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:

71 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
  35. https://www.omgqq.com 우리카지노사이트
    https://www.omgqq.com/thekingcasino 더킹카지노
    https://www.omgqq.com/sandscasino 샌즈카지노
    https://www.omgqq.com/firstcasino 퍼스트카지노
    https://www.omgqq.com/yescasino 예스카지노
    https://www.omgqq.com/supercasino 슈퍼카지노
    https://www.omgqq.com/gatsbycasino 개츠비카지노
    https://www.omgqq.com/33casino 33카지노
    https://www.omgqq.com/worldcasino 월드카지노
    https://www.omgqq.com/merit 메리트카지노

    BalasHapus
  36. https://www.omcyy.com 우리카지노사이트
    https://www.omcyy.com/thekingcasino 더킹카지노
    https://www.omcyy.com/sandscasino 샌즈카지노
    https://www.omcyy.com/firstcasino 퍼스트카지노
    https://www.omcyy.com/yescasino 예스카지노
    https://www.omcyy.com/supercasino 슈퍼카지노
    https://www.omcyy.com/gatsbycasino 개츠비카지노
    https://www.omcyy.com/33casino 33카지노
    https://www.omcyy.com/worldcasino 월드카지노
    https://www.omcyy.com/merit 메리트카지노

    BalasHapus
  37. https://www.bbdd66.com 우리카지노사이트
    https://www.bbdd66.com/theking 더킹카지노
    https://www.bbdd66.com/sands 샌즈카지노
    https://www.bbdd66.com/first 퍼스트카지노
    https://www.bbdd66.com/yes 예스카지노
    https://www.bbdd66.com/super 슈퍼카지노
    https://www.bbdd66.com/gatsby 개츠비카지노
    https://www.bbdd66.com/33 33카지노
    https://www.bbdd66.com/world 월드카지노
    https://www.bbdd66.com/merit 메리트카지노

    BalasHapus
  38. https://www.omgka.com 우리카지노사이트
    https://www.omgka.com/theking 더킹카지노
    https://www.omgka.com/sands 샌즈카지노
    https://www.omgka.com/first 퍼스트카지노
    https://www.omgka.com/yes 예스카지노
    https://www.omgka.com/super 슈퍼카지노
    https://www.omgka.com/gatsby 개츠비카지노
    https://www.omgka.com/33 33카지노
    https://www.omgka.com/world 월드카지노
    https://www.omgka.com/merit 메리트카지노

    BalasHapus
  39. https://www.oobbg.com 우리카지노사이트
    https://www.oobbg.com/theking 더킹카지노
    https://www.oobbg.com/sands 샌즈카지노
    https://www.oobbg.com/first 퍼스트카지노
    https://www.oobbg.com/yes 예스카지노
    https://www.oobbg.com/coin 코인카지노
    https://www.oobbg.com/33 33카지노
    https://www.oobbg.com/world 월드카지노
    https://www.oobbg.com/merit 메리트카지노
    https://www.oobbg.com/gatsby 개츠비카지노

    BalasHapus
  40. I went over this internet site and I think you have a lot of great info , saved to favorites. 토토사이트

    BalasHapus
  41. You have remarked very interesting details ! Also visit my site: wordpress

    BalasHapus
  42. When I initially commented I clicked the -Notify me when new comments are added- checkbox and now each time a remark is added I get four emails with the identical comment. Is there any approach you can remove me from that service? Thanks! my-site

    BalasHapus
  43. Rattling wonderful visual appeal on this web site, I’d value it 10 over 10. simplesite
    majortotosite.pro

    BalasHapus
  44. I would like to thank you for the efforts you have put in penning this site. I’m hoping to view the same high-grade content by you later on as well. In truth, your creative writing abilities has motivated me to get my own, personal website now. ty lê keo

    BalasHapus
  45. Youre so right. Im there with you. Your weblog is definitely worth a read if anyone comes throughout it. Im lucky I did because now Ive received a whole new view of this. 먹튀검증사이트


    BalasHapus
  46. You made some good points there. I did a Google search about the topic and found most people will believe your blog. 메이저사이트


    BalasHapus
  47. Great & nice article with a lot of information to read...great people keep posting and keep updating people..thank you If you want to get a Tourist visa to Turkey, you can fill out the Turkey eVisa application form in minutes, & then You must give permission to enter Turkey legally.

    BalasHapus
  48. Really no matter if someone doesn't be aware of after that its up to other users that they will help, so here it takes place 토토사이트추천.

    BalasHapus
  49. Thank you a bunch for sharing this with all of us you actually realize what you are talking about! Bookmarked. Please also seek advice from my site =). We could have a hyperlink change contract between us 안전놀이터


    BalasHapus
  50. 안전놀이터26 November 2021 16.26

    You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers. 안전놀이터


    BalasHapus
  51. The vacation trades offered are evaluated a variety of in the chosen and simply good value all around the world. Those hostels are normally based towards households which you’ll find accented via charming shores promoting crystal-clear fishing holes, concurrent of one’s Ocean. Hotels Discounts 메이저사이트

    BalasHapus
  52. While looking for articles on these topics, I came across this article on the site here. As I read your article, I felt like an expert in this field. I have several articles on these topics posted on my site. Could you please visit my homepage? 토토사이트모음

    BalasHapus
  53. This is a very interesting post. Thank you for posting a lot of interesting posts. And please visit my site!~! The name of the site is 슬롯사이트.

    BalasHapus
  54. In my opinion, the item you posted is perfect for being selected as the best item of the year. You seem to be a genius to combine 우리카지노 and . Please think of more new items in the future!

    BalasHapus
  55. This is a wonderful inspiring article. I am practically satisfied with your great work. You have really put together extremely helpful data. Keep it up.. Are you planning to visit Kenya?For this, you need to fill the Kenya Visa Application Form and pay the kenya visa costs online.

    BalasHapus
  56. I love to read this, thank you... applying for an Indian tourist visa for US citizens online is easy. You can apply online completely securely through eVisa Indian website.

    BalasHapus
  57. I am enjoying every bit of it. It is a good site, as well as the stock is well-chosen. Thank you emergency visa application India, emergency visa to India application form you can fill online. within 1 to 3 business days you can get your visa via fast track Indian visa services.

    BalasHapus
  58. Great blog. This is very inspiring and informative content thanks for sharing with us.. Well done. Oh, you're always more than welcome. So now it's time to pack your bags and enjoy your trip. We're looking forward to seeing you in Cherokee. The Turkish e visa is brought to you by the Turkish ministry of foreign affairs.

    BalasHapus