Memasang Recommended Posting Slide Out pada Blog

Memasang Recommended Slide Out di Blog

Widget Recommended Slide Out di Blog adalah munculnya postingan kita, berbentuk seperti slide gambar, berisikan postingan yang muncul secara acak (random). ketika pengujung blog membaca artikel kita hingga halaman yang paling bawah Recommended slide out akan muncul, dan menampilkan posting lain blog kita.. anda tidak usah khawatir  loading page blog tidak terganggu karena widget ini sangatlah  ringan, sehingga halaman tidak akan menjadi berat.

berikut langkah - langkahnya :

1. Login dulu Kedalam Blog Anda

2. Pilih Tata Letak

3. klik "add Widget"

5.Pilih JavaScript/HTML

4. masukkan Kode Berikut:

<script>var bpslidein_custom_css=true;</script> <style> #bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-radius:5px;border:3px solid #619bb9;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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI-J_4E1HRcYH2v0IEXZ-m7knr9wBCs9l9lqDS99VYDSskN7B0aLdJLcSzg9brzVvilgn6a1CNjKW-0Yrk5fbo9wJtP_qlZwPbxH_N84Qbuh5BJM_M8wWYCPCFTkFtERExsUzmAfW5fGA/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>

6. Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates"

7. cari kode di bawah ini (tekan tombol keyboard CTRL+F untuk mempercepat pencarian). 

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

atau

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

atau

<data:post.body/>

8. Setelah kode di atas sudah ketemu, selanjutnya copy-paste kode di bawah ini dan letakan kode tepat di bawahnya.

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

9. Pasang Lagi script berikut ini di atas kode </Head> pada template

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

10. Simpan Template

Jika anda ingin melihatnya maka, buka salah satu postingan anda, lalu scroll ke halaman paling bawah. setelah itu Anda akan melihat akan muncul recommended post slideout dari sudut kanan.

Sebagai Tambahan, anda bisa mengubah tampilan slide recomemnded sesuai dengan keinginan anda sendiri dengan mengubah kode css dibawah ini:

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

kode diatas hanyalah contoh, dan saya sudah mamasukkan kode tersebut pada widget yang tadi kita pasang yaitu pada langkah 4. jadi anda tinggal merubah kode css yang ada pada widget tersebut, jadi tinggal edit saja. . .  okey!!!

Selesai,, Selamat Mencoba !!!! (^,^'

Commentar dong. . . . .