Membuat Widget Recommended Post Slide Out Bergaya WordPress

 
Recommended Post Slide widget atau bisa dibilang widget artikel rekomendasi ini, begitu populer di kalangan blogger luar negeri. Dan kebanyakan dipakai oleh pengguna wordpress. Widget ini cukup ringan dan tidak begitu berat. Cara membuatnya pun cukup mudah, hanya menambahkan gadget pada blog dan hanya menambahkan sedikit kode ke edit HTML template.

Untuk melihat live demonya sobat bisa melihatnya di blog ini atau jika belum muncul bisa membuka disini.

Oke langsung saja kita membuat widget recommended post nya.

1. Buka akun blogger > Rancangan > Tata Letak > add gadget > Html/javascript, kemudian masukkan kode berikut ini ;

<div id=”bpslidein” style=”display:none;”> <div>?</div><div>+</div>
<div>X</div> <p>Recommended for
you</p> <div id=”bpslidein_image”></div> <div
id=”bpslidein_title”>Loading..</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&#8221;,function(){bp_async_loader(“http://julak-project.googlecode.com/files/recombb2.js&#8221;,function(){},”bp-out-slide”)},”jQueryjs”)}
</script> <a href=”http://blogbelajar2.blogspot.com/&#8221; target=”_blank”><img src=”https://lh4.googleusercontent.com/-3ZeBFGQpJLA/Tu3juLKG8EI/AAAAAAAACTs/9CxWgQBV9G8/I/bloggerplugins.png&#8221;
alt=”Artikel Rekomendasi Slide Out For Blogger” /></a></div>

2. Simpan > Simpan Setelan.

3. Kemudian masuk ke rancangan template > edit HTML > (ctrl F)  cari kode;

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

atau yang sejenis dengan itu, atau kode

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

ataupun kode

<data:post.body/>

Dari kode-kode di atas cukup pilih salah satu saja.

Kemudian masukkan kode berikut tepat dibawahnya

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

4. Simpan template, Selesai.

Widget recommended post bergaya wordpress ini menampilkan random post atau artikel terkait, tidak ada salahnya kita mencobanya untuk memperindah blog kita, oke sobat blogger, Selamat Mencoba.

Tentang nasrulm2

Saya lahir di Medan 05 Nopember 1989, Saya berdarah Padang Sumatra Barat, Tamatan YPAI SMK ERIA 2008, Segala Sesuatunya hanya milik Allah SWT, Jika Allah Berkehendak.. tiada satupun yang bsa menghalang... karena Allah maha Besar...tiada yg berhak disembah kecuali Allah.. Tiada yang tak mungkin jika Allah menginginkan nya....
Pos ini dipublikasikan di News, Tips dan Trik Blog. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s