Cara Membuat Slide Box Rekomendasi di Blogger

Cara Membuat Slide Box Rekomendasi di Blogger

Cara Membuat Slide Box Rekomendasi di Blogger. Blogger saat ini banyak merelasikan dengan visual desain yang menarik sehingga memanjakan ... 15.21.00

Cara Membuat Slide Box Rekomendasi di Blogger. Blogger saat ini banyak merelasikan dengan visual desain yang menarik sehingga memanjakan para penggunanya, banyak hal yang dapat dikembangkan berbagai fungsi javascript. Anda akan lebih kreatif dan lebih menyenangi web desain yang berkualitas antara lain yang akan kita tampilkan disini yaitu membuat rekomendasi slide box, caranya sangat mudah yaitu:

1.masuk Account blogger, Add widget copy kode di bawah ini ke widget html.

 <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/AVvXsEhmb07VorUdlM_Qb-zYWUO5LIDxVkkiYxwgYllCrsLoH-BDKhve7OI3WLnqrYCSdLsuVBnJYgUoJrWx42z0b46zGEsoUk5iZKx_V0rTEbRZaU68NMTG134N33l3Trz32mQ_733QFvkbhbM/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a> 

   lalu save.
2.Masuk ke edit html,jangan lupa centang Expand Template Widget.lalu cari kode seperti di bawah ini 

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

atau

<data:post.body/> 

lalu copykan kode di bawah ini peris di bawahnya kode yang di atas

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

3.lalu cari kode copykan kode di bawah ini peris di atasnya kode</head>

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

4.dan cari lagi kode ]]></b:skin> lalu copykan kode di bawah ini tepat di atasnya.

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

5.Lalu simpan

[source]