Cara Membuat Widget Recommended Post Slide Out

Sering kali kita mendengarkan atau melihat kata Recommended Post Slide Out. Ternyata itu adalah salah satu widget untuk sebuah blog atau website. Jika ingin membuat widget tersebut pada blog atau website sendiri, tapi tidak tahu cara membuatnya? anda tidak perlu khawatir, karena disini tempat yang sangat tepat untuk anda semua yang ingin belajar tentang dunia blogging dan sebagainya.

Cara Membuat Widget Recommended Post Slide Out
Widget recommended post slide out ini hampir sama dengan related post, perbedaannya related post menampilkan dengan satu label saja, tapi kalau recommended post ini menampilkan secara acak (random) dengan muncul tiba - tiba dibagian sudut kanan bawah. Manfaat dari widget tersebut sama dengan related post yaitu untuk meningkatkan pageview terhadap blog atau website anda.

Bagi anda yang ingin membuat widget tersebut, silahkan ikuti langkah - langkah berikut.
  1. Login ke blogger
  2. Pilih Tata Letak
  3. Klik Tambahkan Gadget
  4. Pilih HTML/Javascript
  5. Masukkan kode berikut ke dalam kotak HTML/Javascript yang sudah disediakan
  6. <div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p><a href="http://catatan-lingga.blogspot.com/" target="_blank">Recommended for you</a></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://ngocop16.googlecode.com/files/recomended%20slide%20out.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://catatan-lingga.blogspot.com/" target="_blank"><img src="https://lh4.googleusercontent.com/-3ZeBFGQpJLA/Tu3juLKG8EI/AAAAAAAACTs/9CxWgQBV9G8/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>  
    
  7. Klik Simpan
  8. Sekarang kita pindah ke Edit HTML, lalu cari kode di bawah ini, gunakan Ctrl+F untuk memudahkan pencarian kode
  9. <div class='post-footer-line post-footer-line-1'>
    atau
    <data:post.body/>
    Scroll ke bawah sampai kode </div>, kemudian copy kode berikut dan paste di bawah kode </div>
    <b:if cond='data:blog.pageType == "item"'><div style='display:none' id='bpslidein_place_holder'></div></b:if>
  10. Simpan Template

Demikian tutorial yang dapat saya bagikan tentang Cara Membuat Widget Recommended Post Slide Out. Semoga bermanfaat dan jangan lupa tinggalkan komentarnya.

4 comments:

  1. Keren niih sob, terima kasih atas tutorialnya sob :)

    ReplyDelete
  2. wah keren ini kaya widget news gitu ya gan

    ReplyDelete
  3. ini bikin loading blog makin berat ga gan?

    ReplyDelete
    Replies
    1. biar gak berat ni loading blognya, baca aja di http://starpurnama.blogspot.co.id/2016/05/cara-terbaik-mempercepat-loading-blog.html

      Delete

 
© Copyright 2016 Lingga Mendunia. All Rights Reserved | Powered by Blogger.com
Created by Lingga Novandra