membuat Recommended Post Slide di blog

Untuk tahap pertama klik terlebih dahulu gambar dibawha ini untuk memasang gatgets otomatis langsung ke blog kamu
<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/AVvXsEjTSjKT2m452udRvXgKGBVTUHd5tiTfymEV1irLDOf43fPK6Tpu_wBRq9ZGbVm2uv-HtPR1e0BBS0xOI_ke9oPqYVBCWUeal0dDr_ns6GpVgCd6I_YCeb6JKPJ3UKZGtblayBCR5yWXOPc/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>

cara diatas belum menunjukkan hasil kita harus melakukan beberapa hal sebagai berikut
dan untuk langkah selanjutnya masuk kehalaman EDIT HTML jangan lupa centang Expand Widget
kemudian cari code

<data:post.body/>  atau tepatnya dekat dengan readmore 
atau code

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

atau

<div class='post-footer-line post-footer-line-1'>
jika salah satu code sudah sobat temukan latakkan code berikut tepat dibawah code yang disebutkan diatas
<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>
dan untuk langkah terakhir memasukkan css code 
coba cari code berikut ]]></b:skin> 
ini code cssnya



#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;}
15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;
#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
: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;}
dan save template lihat hasilnya
buka 1 artikel blog kamu kemudian scroll kebawah maka  Recommended Post Slide akanmuncul.

Untuk demo anda bisa liat gambar dibawah ini
tutorial ini sudah saya coba dan berhasil, kalau ada pertanyaan silahkan tnggalkan komentar sobat

jika berhasil coba laporkan kepada saya untuk jadi DEMO 

BUKU TAMU DISINI

Share on Google Plus

About Budi Setiawan

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.