Widget Rekomendasi Post Slide Show

Satu lagi widget cantik dari blogger pluggin. Widget ini oleh pembuatnya diberi nama Recomended Post Slide Widget. Widget hanya aktif di halaman posting. Widget ini berisi rekomendasi posting blog, yang akan muncul ketika halaman ter-scroll ke bawah di bagian paling bawah postingan. Jendela munculan dari bagian bawah kanan yang berisi rekomendasi posting widget

Cara Kerja Widget Slide Out

Scroll halaman sampai ke bawah posting dan anda akan melihat Recommended Slide Out seperti pada gambar di bawah ini.

 

Live Demo

Tambahkan Recommended Post Slide out Widget ke Blog Anda

Untuk menambahkan widget ke blog anda, Anda bisa memakai tombol widget installer di bawah ini. 

<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>

Pengaturan Recommended Slide out

Jika anda ingin melakukan editing /pengaturan widget tersebut, berikut ini beberapa tutorialnya.

1. Penanda Akhir Post – Slide muncul ketika pengguna meng-scrolls turun ke bawah halaman post dalam Blog anda.(bagian bawah halaman secara default) Untuk menandari titik ini, anda bisa menambahkan sebuah elemen HTML di sana. Element hasrus emmiliki id bpslidein_place_holder

misalnya : <div id='bpslidein_place_holder'></div> yang akan melakukan pekerjaan tersebut. 

Tempat terbaik untuk menambahkan penanda ini ada di akhir dari posting. Jika anda ingin melakukannya dengan mudah, anda bisa menambahkannya ke Blogger Template anda.

Di dalam template anda cari salah satu kode berikut,(Jangan lupa mencentang expand Widget Templates)

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

atau

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

atau

<data:post.body/>

Tepat di bawah kode yang anda temukan di atas, tambahkan kode berikut dan simpan/save template

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

Sekarang ketika pembaca men-scrolls ke bawah, slide akan terbuka.

2. Pengaturan Tampilan dan Feel dari Slide out.

Anda bisa dengan jelas mengatur gaya dari Recommended Slide out. Tetapi sebelum anda melakukannya, anda harus menambahkan definisi variable ini ke template anda:

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

Ini harus di tambahkan di tempat di atas Slide Out Widget. Jika variable ini tidak di set, akan dipakai default StyleSheet untuk memisahkan Recommended Slide out.

Sekali variable ini di-set menjadi true, anda bisa menambahkan definisi CSS anda sendiri. Anda bisa menambahkan CSS anda di Template Designer > Advanced > Add CSS

Ini adalah set default dari Style definitions yang diterapkan ke Widget. Anda bisa memodifikasinya dan memakainya.

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

3. Hal lain yang bisa anda edit

Anda bisa mengedit Judul dari Widget dan menambahkan teks dengan  mengedit Konten Widget.

Selamat Mencoba

Source