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 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>
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 == "item"'>
<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
- 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 == "item"'><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>
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.
Terkait dengan Cara Membuat Rekomendasi Slide - Out Otomatis di Samping Artikel Blogger:
Thanks infonya ya. gantian berkunjung ya di http://gudang.tv
BalasHapussaya 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.
mantap mas... saya setuju
HapusSukse gan, mantap : thanks
BalasHapusKeren rekomendasi slide ini, patut di aplikasikan
BalasHapusbagus nih tutorial, saya mau coba. semoga berhasil dan diblog saya ada rekomendasi artikel lainnya. terima kasih
BalasHapusperasaan sama script atas dengan yang di bawah gan...
BalasHapusPerbedaannya pada peletakkan widgetnya. Untuk Cara pertama kita harus menyisipkan tag kondisi ikedalam template, sedangkan cara kedua tag kondisi kita gabung kedalam widget (Biar Cepat)
Hapusada demo nya ga mas broo
BalasHapusYa widgetnya seperti rekomendasi box unik disudut bawah artikel ini : muncul keluar
Hapusada demonya ga broo, apa sm yg ada di blog ini
BalasHapusUntuk Demo, silahkan scroll mouse kebawah halaman blog ini : Nanti rekomendasi slide akan muncul dari sudut bawah artikel
HapusWah mantaf nikh Tips nya mau dicoba akh salam kenal saja Trims
BalasHapusthenkz mas atas info y....?
BalasHapusWah, Sukses :D
BalasHapusTerimakasih Informasinya
Bila ada waktu luang kunjungi blog saya http://firmanardyansyah.blogspot.com/
ok juga ni
BalasHapusjgn lupa kunjungi juga blog dibawah ini djamin
http://semesta-blogger.blogspot.com/
cara yang kedu aja biar cepat... :)
BalasHapusmakasih gan infonya, akan langsung saya coba di blog saya......
keren gan, test praktek
BalasHapusterimkasih mas!! keren tipsnya!
BalasHapusmantap gan.. terima kasih.. izin praktek ya.. :p
BalasHapuswow ijin praktek mas... blog ane msh amburadul maklum msh newbie bnget tq bang
BalasHapusmantep gan tips slider nya.
BalasHapusAjeb mas Bro....sama ajeb seperti URL awak ... join yo
BalasHapusKalau mau buat slide diposisi atas gimana caranya ya
BalasHapusWah thanks mas . jadi makin keren nih blognya :D
BalasHapusNice gan jangan lupa kunjungi juga ya
BalasHapusDunia INTERNATIONAL|Berita Olahraga|Tips Kesehatan|Berita Politik
thx gan, ijin praktek
BalasHapushttp://diakuin.blogspot.com
wah ternyata ada yang lebih muda caranya. thanks gan
BalasHapusgan, kenapa slide nya gakmuncul di blog ane. ane pake cara yang kedua
BalasHapusnice post gan;)
BalasHapusTerima kasih :-)
BalasHapusmunculnya kalau kursor kebawah ya
BalasHapusmakasih banget mas tutorial dan kodenya, segera meluncur ni...
BalasHapusthank,, jangan lupa ke http://komangsuardika.blogspot.com/
BalasHapussangat membantu mas Kunjungi balik ya
BalasHapusartikel yang bagus sob,
BalasHapushttp://si-kudil.blogspot.com/
Wis keren mas, izin nyoba ya
BalasHapuskeren sob, izin bookmark dan coba
BalasHapusMas... cara ngengati warna biru di javascript ini gmn yah?
BalasHapuswah masih bingung mas,, maklum mash newbie,,
BalasHapussip gan bekerja dengan baik di blog ane
BalasHapusTerima kasih gan. berhasil. silahkan cek.. :)
BalasHapusThanks Mas, tapi Widgetnya kalau di klose kok nggak hilang ya ?
BalasHapusobat kutil kelamin
BalasHapusYang kalau kebawah muncul endak mas ?
BalasHapusTerima kasih mas, tutornya. tapi sedikit kurang rapi mas, ada solusi
BalasHapusmantap gan, udah saya praktekin,,, :) mampir ya gan http://starpurnama.blogspot.co.id/ :)
BalasHapus