Anda Di : Home » blogger tutorial » blogger widget » Recommended Post Slide out Untuk Blogger

Recommended Post Slide out Untuk Blogger

Memasang widget Recommended Post Slide out di blog kita merupakan salah satu cara untuk meningkatkan page view, karena widget ini menawarkan artikel lain yang ada di blog kita untuk dibaca oleh pengunjung blog kita.

Pada tutorial kali ini saya akan menuliskan cara membuat recommended post slide out widget di Blogger, siapa tahu ada yang tertarik ingin memasang widget ini di blog kamu.

Cara Pasang Recommended Post Slide out Di Blogger

Seperti biasa, langkah pertama yang harus kita lakukan adalah masuk dahulu ke blogger menggunakan akun kita, kemudian.

1. Klik Tata Letak


Membuat Efek Daun Jatuh

2. Klik Tambah Gadget / Add A Gadget
Panduan Membuat Efek Daun Jatuh

3. Pilih Gadget Html/JavaScript
Tutorial Membuat Efek Daun Jatuh
4. Masukkan script Recommended Post Slide out berikut di dalamnya
<style type='text/css'>
#bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #1616F5;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial, Helvetica, sans-serif;}
#bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;}
#bpslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{text-decoration:none;color:#1616F5;}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
#bpslidein .help{right:35px;}
#bpslidein_title,#bpslidein_image{float:left;width:80px;}
#bpslidein_title{width:290px;}
</style>
<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://recommended-slide-out-for-blogger.googlecode.com/svn/trunk/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://www.bloggerplugins.org/2011/12/recommended-post-slide-out-for-blogger.html" target="_blank"><img src="https://lh4.googleusercontent.com/-3ZeBFGQpJLA/Tu3juLKG8EI/AAAAAAAACTs/9CxWgQBV9G8/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>

5. Simpan.

Setting Recommended Slide out

Secara default widget ini akan muncul setelah pengunjung menggulir sampai kebawah blog kita (footer blog), jadi agar widget keluar setelah pembaca menggulir kebawah artikel (sampai akhir artikel) maka ada beberapa hal lagi yang harus kamu lakukan, yaitu:
1. Klik menu Template

Cara Pasang Efek Daun Jatuh
2. Klik menu Edit HTML
Panduan Pasang Efek Daun Jatuh
3. Klik tulisan / menu Lanjutkan
Tutorial Pasang Efek Daun Jatuh
4. Beri centang pada Expand Template Widget
Efek Daun Jatuh Untuk Blogger

5. Cari kode
<div class='post-footer-line post-footer-line-1'>
atau
<p class='post-footer-line post-footer-line-1'>
atau
<data:post.body/>
6. Setelah kode tersebut sudah dapat silakan sisipkan kode ini di bawah nya (cukup satu saja, silakan pilih salah satu tempat di antara 3 tempat/kode di atas)
<b:if cond='data:blog.pageType == "item"'>
<div id='bpslidein_place_holder'></div>
</b:if>
8. Simpan Pengaturan.

Nah itulah tutorial cara pasang widget recommended post slide out untuk Blogger, selamat mencoba dan semoga bermanfaat.

Sumber
Tags: ,

Jangan Lupa Like dan share artike Recommended Post Slide out Untuk Blogger ini ya.

New Tutorial :
Recommended Post Slide out Untuk Blogger

Tentang Admin

Hanya seorang blogger biasa yang ingin mencoba menulis apa saja yang bisa di tulis, baik seputar tutorial blog, blogger template, dsb.

Berlangganan via RSS Feed

Mau baca artikel terbaru langsung di Email kamu? Silahkan masukan alamat email kamu untuk berlangganan artikel baru. (GRATIS!!!)

Jangan lupa konfirmasi di Email Kamu.

Saat ini kamu sedang berada di halaman Recommended Post Slide out Untuk Blogger, di bawah ini ada beberapa artikel lainnya yang mungkin ingin kamu baca, terimakasih atas kunjungannya.

2 komentar

  1. Keren, gan!
    Ane bookmark dulu deh. Thanks sharingya :)

  2. Thanks gan. Langsung ke tkp :D