Membuat Saran Halaman | Recomended Post Slide Out For Blogger

Coba anda telusuri deh artikel di Blog Ini , anda akan mendapati sebuah slide muncul tiba-tiba, sebagai saran artikel untuk anda baca, Nah oke bukan?
tuch contohnya gambar disebelah kiri ...


Mau Trik nya ? Ok saya bagikan deh ya. Sebentar saya mau menyeruput Kopi dulu nih ..

Caranya Membuat Saran Halaman | Recomended Post SLide Out For Blogger :

Masuk dan login dulu ke akun blogger anda
Pilih Rancangan, lalu pilih Edit Html, Centang expand widget, jangan lupa download dulu template anda agar dapat dipulihkan kalau terjadi eror

Aktifkan mode pencarian dengan menekan CTRL+F , lalu ketik / cari kode dibawah ini :

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

Atau kode ini :

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

Atau ini :

<data:post.body/>

Lalu masukkan kode dibawah ini dibawah / setelah salah satu kode diatas tadi :

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

Nah selanjutnya anda cari kode :

</head>

Lalu masukkan kode berikut ini diatas kode tersebut :

<script>var bpslidein_custom_css=true;
#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;}
</script>

Sampai sini lalu anda Save . Selesai...

Selanjutnya masuk ke elemen laman , cari posisi aman dimana saja untuk menambahkan widgetnya, klik tambah gadget lalu pilih HTML, copy kode dibawah ini :

&lt;script&gt;var bpslidein_custom_css=true;
#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;}
&lt;/script&gt;

Save - Dan lihat Hasilnya deh, mantabs kan ? Jangan lupa komentarnya ya...

Atau mau cepet lewat jalur Tol aja deh, klik 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8pd-OGNxd_0zbjwDQsFNoSYEfPuT0qSmkMAY8Th3GITUV2mu0Fm_PWz3bX4o5qhDO3z6itKEoy9G8WDKx4IDN3zHOASd8mGcU2Pyvt6k-Gfs2DjK-CNtzYSFGtaHOO7j9oPCNaTVPdPA/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a></p><p></p><p>

<br /> <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/AVvXsEi8pd-OGNxd_0zbjwDQsFNoSYEfPuT0qSmkMAY8Th3GITUV2mu0Fm_PWz3bX4o5qhDO3z6itKEoy9G8WDKx4IDN3zHOASd8mGcU2Pyvt6k-Gfs2DjK-CNtzYSFGtaHOO7j9oPCNaTVPdPA/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a><br/> <input style="border:0px;" src="http://www.blogger.com/img/add/add2blogger_lg.gif" value="Link To Your_Blog_Title" name="go" type="image"/> </form>