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

2. Klik Tambah Gadget / Add A Gadget

3. Pilih Gadget Html/JavaScript

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

2. Klik menu Edit HTML

3. Klik tulisan / menu Lanjutkan

4. Beri centang pada Expand Template Widget

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