Cara Membuat Rekomendasi Slide - Out Otomatis di Samping Artikel Blogger

Widged Recommended Post Slide-oud bloogger atau bisa dibilang widget rekomendasi artikel yang unik dan keren yang berada disudut bawah halaman blog sangat populer di kalangan blogger luar negeri, walaupun kebanyakan dipakai oleh pengguna wordpress saja. Widget rekomendasi bar (bukan rekomendasi facebook) 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.

Update penting !!!

Karna google code sudah tertutup maka artikel tentang Cara Membuat Rekomendasi Slide sudah tidak bisa lagi berfungsi. Penulis akan segera memperbaharuinya kedepan.

Rekomendasi Slide Artikel Blog
Rekomendasi Slide Blogger (berada di footer bawah)
Seperti anda lihat diatas bahhwa tampilan sebuah widget rekomendasi slide out artikel adalah begitu simple dan sagat profesional. So ini akan sangat berguna untuk melengkapi aksesoris blog kamu agar tampak lebi keren.

Selain itu widget rekomendasi slide out memilki fungsi yang sangat bermanfaat menurut saya, karena selain tampilannya menarik, aksesoris blog yag satu ini mampu membuat pembaca bertahan lama pada blog kita. Apalagi jika blog telah memiliki related post / artikel terkait cepat loading.

Cara Membuat Rekomendasi Artikel *Slide Out

Sebenarnya untuk membuat widget ini sangat sederhana bahkan gampang sekali. Heran aja masih banyak saja yang belum berhasil menampilkan rekomendasi bar yang slide dibawah halaman artikel seperti ini.

Okey guys, Mari mulai mencoba. Ada 2 cara (Pilih salah satu):

A. Cara Pertama untuk meampilkan Rekomendasi Slide

Untuk cara ini kita memerlukan dua langkah untuk bisa menampilkan Rekomendasi Slide - out Blogger. berikut kedua langkah tersebut.

Tambahkan Gadget HTML
  • Masuk Dashboard dengan login Ke akun Blogger anda
  • Selanjutnya pilih dan klik menu Tata letak (rancangan) > Tambah gadget > Pilih HTML/Javascricpt | lalu masukkan kode source dibawah ini sebagai isi widget tersebut:
<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Anda Mungkin Perlu Baca ini</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("https://slider-rekomendasi.googlecode.com/files/rekomenasi%20slider.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://fispol.com" target="_blank"><img src="https://lh4.googleusercontent.com/-3ZeBFGQpJLA/Tu3juLKG8EI/AAAAAAAACTs/9CxWgQBV9G8/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>
  • Simpan
Sisipkan Ke dalam Template

  • Masuk ke Template > Edit > centang expand template
  • Jika sudah, langsung cari kode <div class='post-footer-line post-footer-line-1'> , atau jika tidak ada bisa juga kode <p class='post-footer-line post-footer-line-1'>. jika telah ditemukan salah satunya maka sekarang pastekan kode berikut tepat dibawah kode tersebut :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bpslidein_place_holder' style='display:none'/>
</div></b:if>
  • Selesai, coba lihat : apakah Rekomendasi Slide - out Blogger tampil?. untuk mengeceknya harus dalam halaman artikel bukan home.

B. Cara 2 membuat Rekomendasi Slide

Cara yang satu ini adalah Tutorial khusus blogger yang ggak mau repot-repot, cocok buat yang super sibuk dan tidak punya waktu untuk editing template.
  • Masuk Ke akun Blogger anda
  • Klik Tata letak (rancangan) > tambah gadget > Pilih HTML/Javascricpt | masukkan kode source dibawah ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='bpslidein_place_holder' style='display:none'/></div><div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Anda Mungkin Perlu Baca ini</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("https://slider-rekomendasi.googlecode.com/files/rekomenasi%20slider.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://fispol.com" target="_blank"><img src="https://lh4.googleusercontent.com/-3ZeBFGQpJLA/Tu3juLKG8EI/AAAAAAAACTs/9CxWgQBV9G8/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a></b:if>
  • Simpan dan 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.

Baca Juga Artikel lainnya:

46 Tanggapan untuk "Cara Membuat Rekomendasi Slide - Out Otomatis di Samping Artikel Blogger"

  1. Thanks infonya ya. gantian berkunjung ya di http://gudang.tv

    saya juga mau pasang rekomendasi slide tapi bukan untuk artikel sendiri saja tapi artikel teman2 blogger yang mau sharing dgn saya.

    Jadi saling bantu mempublikasikan artikel teman2 blogger.

    kalau banyak yang berminat, saya baru pasang rekomendation slidenya.

    Jadi bisa menjadi backlick permanen bagi teman blogger.

    BalasHapus
  2. Sukse gan, mantap : thanks

    BalasHapus
  3. Keren rekomendasi slide ini, patut di aplikasikan

    BalasHapus
  4. bagus nih tutorial, saya mau coba. semoga berhasil dan diblog saya ada rekomendasi artikel lainnya. terima kasih

    BalasHapus
  5. perasaan sama script atas dengan yang di bawah gan...

    BalasHapus
    Balasan
    1. Perbedaannya pada peletakkan widgetnya. Untuk Cara pertama kita harus menyisipkan tag kondisi ikedalam template, sedangkan cara kedua tag kondisi kita gabung kedalam widget (Biar Cepat)

      Hapus
  6. Balasan
    1. Ya widgetnya seperti rekomendasi box unik disudut bawah artikel ini : muncul keluar

      Hapus
  7. ada demonya ga broo, apa sm yg ada di blog ini

    BalasHapus
    Balasan
    1. Untuk Demo, silahkan scroll mouse kebawah halaman blog ini : Nanti rekomendasi slide akan muncul dari sudut bawah artikel

      Hapus
  8. Wah mantaf nikh Tips nya mau dicoba akh salam kenal saja Trims

    BalasHapus
  9. thenkz mas atas info y....?

    BalasHapus
  10. Wah, Sukses :D
    Terimakasih Informasinya
    Bila ada waktu luang kunjungi blog saya http://firmanardyansyah.blogspot.com/

    BalasHapus
  11. ok juga ni
    jgn lupa kunjungi juga blog dibawah ini djamin

    http://semesta-blogger.blogspot.com/

    BalasHapus
  12. cara yang kedu aja biar cepat... :)
    makasih gan infonya, akan langsung saya coba di blog saya......

    BalasHapus
  13. keren gan, test praktek

    BalasHapus
  14. terimkasih mas!! keren tipsnya!

    BalasHapus
  15. mantap gan.. terima kasih.. izin praktek ya.. :p

    BalasHapus
  16. wow ijin praktek mas... blog ane msh amburadul maklum msh newbie bnget tq bang

    BalasHapus
  17. Ajeb mas Bro....sama ajeb seperti URL awak ... join yo

    BalasHapus
  18. Kalau mau buat slide diposisi atas gimana caranya ya

    BalasHapus
  19. thx gan, ijin praktek

    http://diakuin.blogspot.com

    BalasHapus
  20. wah ternyata ada yang lebih muda caranya. thanks gan

    BalasHapus
  21. gan, kenapa slide nya gakmuncul di blog ane. ane pake cara yang kedua

    BalasHapus
  22. makasih banget mas tutorial dan kodenya, segera meluncur ni...

    BalasHapus
  23. thank,, jangan lupa ke http://komangsuardika.blogspot.com/

    BalasHapus
  24. artikel yang bagus sob,
    http://si-kudil.blogspot.com/

    BalasHapus
  25. Wis keren mas, izin nyoba ya

    BalasHapus
  26. keren sob, izin bookmark dan coba

    BalasHapus
  27. Mas... cara ngengati warna biru di javascript ini gmn yah?

    BalasHapus
  28. wah masih bingung mas,, maklum mash newbie,,

    BalasHapus
  29. sip gan bekerja dengan baik di blog ane

    BalasHapus
  30. Terima kasih gan. berhasil. silahkan cek.. :)

    BalasHapus
  31. Thanks Mas, tapi Widgetnya kalau di klose kok nggak hilang ya ?

    BalasHapus
  32. Yang kalau kebawah muncul endak mas ?

    BalasHapus
  33. Terima kasih mas, tutornya. tapi sedikit kurang rapi mas, ada solusi

    BalasHapus
  34. mantap gan, udah saya praktekin,,, :) mampir ya gan http://starpurnama.blogspot.co.id/ :)

    BalasHapus