Recommended Post Slide Out pada Akhir Artikel

Memasang widget Recommended Post Slide Out pada akhir artikel kita

1. Copy script dibawah pada edit layout lalu add a gadget lalu pilih html/JavaScript, paste

<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://berdbord.blogspot.com/2013/02/recommended-post-slide-out-pada-akhir.html" target="_blank"><img src="https://lh5.googleusercontent.com/-1Qc9s_9HXNU/URrOFb4VPLI/AAAAAAAAAUM/5kDUbPeeIF0/s70/backlinkberd.png" alt="Recommended Post Slide Out For Blogger" /></a>

2. Cari di dalam template (Expand Widget Templates harus di centang) cari script ini: 

<div class='post-footer-line post-footer-line-1'> atau 

<p class='post-footer-line post-footer-line-1'> atau 

<data:post.body/>

Letakkan script dibawah ini, dibawah salah satu script biru diatas :  

<b:if cond='data:blog.pageType == "item"'> <div style='display:none' id='bpslidein_place_holder'></div> </b:if> 

Agar pembaca artikelmu dapat melihat widget recommended post slide ini keluar saat akhir artikel 

3. Mengubah widget agar sesuai dengan template blog kamu. 

Widget kamu sudah berjalan sempurna, kemudian kamu ingin mengubah warna dan tampilannya, sebelum kamu melakukannya, kamu harus menambahkan definisi variabel ke template Anda 

<script>var bpslidein_custom_css=true;</script> 

Ini harus ditambahkan di suatu tempat di atas Slide Out Widget. Jika variabel ini tidak diatur, sebuah StyleSheet defaultnya yang akan dipakai sampai Slide yang sudah di customize keluar.

Setelah script itu dipaste, kamu dapat menambahkan definisi sendiri CSS. Anda dapat menambahkan CSS Anda di Template Designer > Advanced > Add CSS Ini adalah default set definisi Style diterapkan pada Widget tersebut. Anda dapat memodifikasi mereka dan menggunakannya.

 #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;}

4. Lainnya yang dapat kamu edit 

Anda dapat mengedit Judul Widget dan teks Memuat dengan mengedit Content Widget.


Selamat mencoba....