Cara Membuat Bar Recommended Otomatis Pada Blog

Cara membuatnya sangat gampang.Sobat hanya copas kode-kodenya saja dan Bar Recommended Pada Blog sudah jadi.Terus bagaimana Cara Membuat Bar Recommended ini ?

Sebagai ilustrasi coba perhatikan gambar berikut ini :

Seperti inilah Bar Recommended jika diperbesar :

Bar Recommended adalah postingan pada blog kita yang muncul ketika halaman postingan discroll maka secara random dan otomatis dimunculkan, Bar Recommended ini mirip sekali dengan Facebook Recommend.Jadi Bar Recommend ini bisa dikatakan sebuah anjuran kepada visitor untuk membaca artikel lainnya dari blog kita.

Langkah-langkah pembuatan :

1. Login ke Blogger
2. Tata letak --> Tambah Gadget --> HTML/Javascript
3. Copy kode berikut ini dan letakkan pada Gadget HTML/Javascript tadi
<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://kenadeh-dot-com.googlecode.com/files/recommendedbar1.js",function(){},"bp-out-slide")},"jQueryjs")} </script>
4. Simpan
5. Setelah itu masuk ke Template --> Edit HTML --> Expand Template Widget
6. Cari kode <data:post.body/> setelah ketemu copy kode berikut ini letakkan setelah kode <data:post.body/> :
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='bpslidein_place_holder' style='display:none'/></b:if>
7. Cari kode </head>, letakkan kode berikut ini tepat diatas kode </head> :
<!--Kode Rekomendasi Blogger--> <script>var bpslidein_custom_css=true;</script>
8. Cari kode ]]></b:skin>, copy kode dibawah ini letakkan diatas kode ]]></b:skin> :
/*Kode Rekomendasi Blogger*/ #bpslidein{z-index:5;width:400px;height:100px;padding:10px;background: #E1E1DE; background: -moz-linear-gradient( center top, #E1E1DE 35%, #6F6F68 100% ); border:3px solid #3E3E38;position:fixed;right:-430px;bottom:250;-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;-webkit-border-radius:70px;-moz-border-radius:70px;-o-border-radius:70px;border-radius:70px;} #bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;margin-left:15px;padding-bottom:5px;} #bpslidein_title{color:#555;font-weight:700;font-size:13px;margin:15px 15px 10px 0;} #bpslidein a, #bpslidein_title{text-decoration:none;color:#1616F5;} #bpslidein .close,#bpslidein .expand,#bpslidein .help{border:2px solid #555;cursor:pointer;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:9px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;margin-right:20px;} #bpslidein .help{right:35px;color:#321FE9;}#bpslidein .help:hover{right:35px;color:#321FE90690FB;}#bpslidein .close{color:#F21414;}#bpslidein .close:hover{color:#6E0911;} #bpslidein_title,#bpslidein_image{float:left;width:80px;margin-left:7px;} #bpslidein_title{width:290px;}#bpslidein a:hover{color:#1252BB;}

http://www.kenadeh.com/2012/10/cara-membuat-bar-recommended-otomatis.html