Cara Membuat Widget Recommended Post

Cara Membuat Widget Recommended Post  - Apa itu Widget Recommended Post? Box rekomendasi artikel adalah sebuah widget yang berisi related post yang berbentuk thumbnail, seperti random pos yang akan tampil secara acak. Box ini sangat bermanfaat sekali menurut saya, pengunjung akan tertarik dengan artikel yang kita berikan. Dengan menampilkan Widget Recommended Post, blog kita akan tampil lebih profesional dan dengan harapan pengunjung akan betah berkunjung di blog kita, karena Widget Recommended Post ditampilkan secara acak. 

Baca Juga :
1. Menampilkan Widget Tertentu Di Halaman Blog
2. Widget Most Commented for Blogger
3. Simple Subscription Widget for Blogger
4. Cara Mengatasi Widget Google Plus Tidak Muncul
5. Cara Buat Widget Random Post Pada Blogger Berdasarkan Label

Sebenarnya Cara Membuat Widget Recommended Post ini sangat mudah dan sederhana. Kita hanya menggunakan HTML/Javascricpt pada layout blog. Anda hanya memerlukan 2 langkah untuk memasang widget ini :

Cara Membuat  Widget Recommended Post

1. Login ke Blogger >> Tata Letak >> Tambah Gadget > Pilih HTML/Javascricpt
2. Selanjutnya Copy Paste Kode dibawah ini di dalam kotak HTML/Javascricpt
<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>Artikel Pilihan Kami, Tertarik?</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://tipssahabat.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 ini bergaya wordpress, namun jika anda adalah blogger tidak ada salah mencoba menggunakannya. 

UPDATE
Cara Kedua
1. Cari kode script berikut ]]></b:skin> (gunakan Ctrl + F untuk mempercepat pencarian)
2. Copy kode script dibawah ini, lalu paste tepat di Atas kode script ]]></b:skin>
/* Related Post with Sliding CSS */
#kislidingbox{background:#fff;border-top:1px solid #bbb;box-shadow: 0 4px 10px #666;transition:all 0.4s ease-out;width:335px;height:250px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:none;border-top:1px solid #ddd;color:#00789d;display:block;height:40px;width:100%;font-size:14px;font-family:Castellar, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}
.kislidingbox-title span a{float:right;height:40px;width:25px;}
a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;}
.kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
.kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;}
.kislidingbox-container > div > span {font-size:14px;}
.kislidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;}
.show{bottom:80px;}
.hide{bottom:-145px;}
.related-post {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}
.related-post h4 {font-size:150%;margin:0 0 .5em;}
.related-post-style-2 {border-top:1px solid rgba(0,0,0, 0.2);margin-top:-20px;padding-top:15px;list-style:none;}
.related-post-style-2 li {margin-left:-10px;style:none;}
.related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0 0;border:1px solid #ccc;}
.related-post-style-2 .related-post-item-title {font-weight:bold;font-size:120%;text-transform:capitalize;}
a.related-post-item-title {color :#333 !important;}
a:hover.related-post-item-title {color :#0491ea !important;text-decoration:none;}
.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}
.related-post-style-2 .related-post-item-more {}
/* End CCSS Related Post with Sliding */

3. Cari kode script berikut </head> (gunakan Ctrl + F untuk mempercepat pencarian)
4. Copy kode script dibawah ini, lalu paste tepat di Atas kode script </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
<script type='text/javascript'>
$(window).scroll(function(){
        if ($(this).scrollTop() &gt; 400) {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;0px&#39;});
        } else {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;-360px&#39;});
        }
    });
$(document).ready(function(){
 var kislidingbox      = $(&#39;#kislidingbox&#39;);
    var closed      = $(&#39;#kislidingbox-close&#39;);
    var minimize    = $(&#39;#kislidingbox-minimize&#39;);
    var maximize    = $(&#39;#kislidingbox-maximize&#39;);
    maximize.hide();
    closed.click(function(){
        kislidingbox.css({&#39;right&#39;:&#39;-350px&#39;});
        kislidingbox.fadeOut(&#39;slow&#39;);
    })
    minimize.click(function(){
        kislidingbox.toggleClass(&#39;hide&#39;);
        $(this).hide();
        maximize.show();
    })
    maximize.click(function(){
        kislidingbox.toggleClass(&#39;hide&#39;);
        $(this).hide();
        minimize.show();
    })
});
</script>
5. Cari kode script berikut <div class='post-footer'>
6. Copy kode script dibawah ini, lalu paste tepat dibawah kode <div class='post-footer'> (kodenya yang ke 2)
Catatan :
Jika blog tidak memiliki kode <div class='post-footer'>
Anda bisa menyimpannya tepat dibawah kode script
<data:post.body/>
<div class='clear'/>
<!-- Related Post with Sliding -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='kislidingbox'>
    <div class='kislidingbox-title kislidingbox-www'>
      <span style='float: left;margin:14px 0 0 15px;'>Baca Juga Artikel Ini</span>
        <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='http://2.bp.blogspot.com/-IuwrMRddJPA/Uj0EKnY22II/AAAAAAAAFhM/V6cKdl07Bxc/s1600/close.png' title='close'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='http://4.bp.blogspot.com/-QMHVEsX6RI0/Uj0EKiuxajI/AAAAAAAAFhQ/7bebcoyuHKw/s1600/minimize.png' title='minimize'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='http://1.bp.blogspot.com/-spQvK4i4SNk/Uj0EKjKvMpI/AAAAAAAAFhc/CBa6r6ArUHA/s1600/maximize.png' title='maximize'/></a></span>
    </div>
    <div class='kislidingbox-container'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-post' id='sliding-tab'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,
      numPosts: 3,
      summaryLength: 0,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 45,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;sliding-tab&quot;,
      newTabLink: false,
      moreText: &quot;&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
  </script><script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>         
    </div>
</div>
</b:if>
<!-- Related Post Widget End --> 
Bagaimana, cukup mudah bukan? Jika ada pertanyaan, silahkan sampaikan melalui komentar. Demikianlah artikel tentang Cara Membuat Widget Recommended Post kiranya dapat bermanfaat. Terima Kasih..

Related : Cara Membuat Widget Recommended Post

41 comments:

  1. Wah pas banget nie mas, sebelumnya saya juga sempet nyari-nyari widget ini, cuma karena gak tau sebutannya jadi gak nemu deh, nemunya malah banyakan yang widget recents post. Ijin copy scriptnya ya mas, makasi atas sharingnya :)

    ReplyDelete
    Replies
    1. Pertama saya ijin numpang PERTAMAX
      Kedua saya ijin ambil kode ini karena udah lama mencarinya
      Ketiga saya matur tengkyu

      Delete
    2. Terima kasih kembali Mas Marnes. Kiranya bermanfaat ya mas.. Mas Abu Numpang Pertamax, dapat premium saja deh mas.. :)

      Delete
  2. Baru nyadar kalo diriku dapet pertamax dimari...
    iyessss... :D

    ReplyDelete
    Replies
    1. saya yang mlongo gak dapat apa apa coba,, kasihan kan?
      ya sudah saya ambil semua script recommended nya :)

      Delete
    2. Pertamaxnya sudah di ambil Mas Marnes.. Mas Saud, Dapat Keduax saja ya mas.. hehehe

      Delete
  3. bisa saya coba nih mas kl tutorialnya. tapi saya lihat demo nya kaya apa ya mas..? maaf soalnya blog saya belum ada widget recommended nya mas. mohon pencerahanya :)

    ReplyDelete
    Replies
    1. Demonya ada di blog ini Mas Saud. Buka salah satu postingan, lalu scroll kebawah. maka akan muncul pop up widgetnya dari kanan bawah..

      Delete
  4. Lumayan selain alternatiff addthis.

    ReplyDelete
    Replies
    1. Iya uda... Kode ini lebih ringan.. ;)

      Delete
    2. Memang iya, kalau kebanyakan widget juga kurang baik buat kecepatan memuat tampilan blog.

      Delete
    3. Nahh itu dia mas.. :) kebanyakkan widget memang akan membuat lambat loading blog.. :)

      Delete
    4. Dan sepertinya webini termasuk cepat yah.

      Delete
  5. widget recomended memang sangat membantu pengunjung untuk terus membaca artikel yang menarik lainnya, saya sudah pasang dari pihak ketiga sih,kalau belum mah sepertinya wajib untuk dipasangkan..bener kan ya kang

    ReplyDelete
    Replies
    1. Itu dia Mas Cilembu. Saya sangat setuju sekali dengan komentar Mas Cilembu.. :)

      Delete
  6. Perkenalkan Kami salah satu Penerbit Berita Info Menarik , dan info ini sengaja kami terbitkan Khusus bagi yang Pecinta togel / toggeller., dan disini Kami Telah menemukan AKI JAGAD yang Benar Benar bisa Meramal Nomor yang akan Tembus . Beliau Tidak Punya Blog / Web, Hanya saya Sebagai Pelanggang AKI JAGAD yang pernah melihat bukti nyata ( MITOS ) Sehingga saya memperkenalkan dia di Dunia maya, Jujur saya Merasa Berat Hati Kepada AKI JAGAD, Mungkin Dengan Jalan Seperti inilah saya Membalas Budi kepada AKI JAGAD, Memperkenalkan AKI JAGAD Ke DUNIA MAYA, Karena siapa tahu ada yang Butuh Bantuan dari AKI JAGAD. Nomor TLP: 085398722048. . Beliau Pernah Berpesan Kepada saya ” Tolong disampaikan kepada semua Para Pelanggang saya Atas Kesuksesannya , Hanya satu Pintaku jangan Lupa Berbagi Kepada Orang Miskin atau Kepada Masjid atau gereja yang sangat Memerulkan bantuan . Dan AKI JAGAD . Juga mengucapkan Selamat & Sukses kepada Bapak/Ibu , yang telah berhasil tembus / jp/ jebol / menang Angka Jitu SGP pemberian dari AKI JAGAD . Semoga Hasil kemenangan anda yang diterima bisa untuk menyelesaikan semua urusan & dapat dimanfaatkan untuk hal yang berguna untuk masa depan,AKI JAGAD hanya coba membantu sesuai dengan kemampuan yang AKI JAGAD miliki, selebihnya hanya kekuasaan tuhan yg membagikan rizki nya kepada bapak/ibu sekalian. diberitahukan juga kepada para togeller diseluruh dunia hususnya di indonesia, bahwa AKI JAGAD masih menerima pendaftaran member sampai batas waktu Yg Telah di Tentukan..atau klik htt://dewatogel777.blogspot.com

    ReplyDelete
  7. Bisa muncul dan hilang otomatis gitu yah??? wah ini kudu Neng simak bener nih

    ReplyDelete
    Replies
    1. Mohon bantuannya, saya sudah pasang tapi kox gak bekerja semsetinya yah kodenya...Maksih

      Delete
    2. Tidak bisa bagaimana Neng Auni?? :) Saya sendiri sudah coba. Buka salah satu postingan, lalu scroll mouse ke bawah. Pasti akan muncul popup ARTIKEL PILIHAN KAMI, TERTARIK?..

      Delete
    3. Iya sudah muncul tetapi kadang judulnya tidak ada, hanya thumbnail aza. Pas Neng klik juga gak terbuka, ato template Neng yang gak support yah???

      Delete
    4. Saja curiga dengan tempate Neng Auni. Jika tidak bisa, coba cek, apakah semua kodenya telah di copy semua..

      Delete
    5. Silahkan Neng baca lagi, saya update untuk cara yang kedua. Memang agak repot.. :)

      Delete
  8. pas banget ni mas, kebetulan saya memang lagi nyari kode tersebut, ijin copy code widget recommended nya Mas

    ReplyDelete
    Replies
    1. Silahkan di copy Mas Arie.. :) Kang Yanto : Ngopi dulu yuk Kang. :D

      Delete
  9. mantap kang izin coba buat template saya.

    ReplyDelete
  10. saya sebenernya juga pengen memasang widget ini kang.
    tp sayangnya memperlambat loading blog nih.
    saya simpen dulu deh

    ReplyDelete
    Replies
    1. cara pertama tidak memperlambat loading blog kok Kang.. :)

      Delete
  11. kebetulan saya sudah pasang mas :) jadi kali ni izin simpan aja deh yahh tutorialnya :)

    ReplyDelete
    Replies
    1. Silahkan Mas Ainnul di simpan. Terima kasih mas.. :)

      Delete
  12. waduh aku kurang begitu faham nih tapi katanya sudah terpasang mas.... (kata yang punya template)

    ReplyDelete
    Replies
    1. Saya lihat belum terpasang Mbak Santika.. :)

      Delete
  13. banyak juga scriptnya ya gan....tapi kayaknya menarik juga. saya pelajari dulu gan. terima kasih ya tutiorialnya. salam sahabat blogger.

    alamat komunitas nongkrong blogger dialihkan ke group facebook. Hal ini karena banyaknya masukan dari kawan-kawan dan alasan lainnya. silahkan akses link berikut untuk bergabung kembali di Nongkrong Blogger.
    https://www.facebook.com/groups/780826801982711/
    Terima kasih.

    ReplyDelete
    Replies
    1. Cara pertama scriptnya sedikit mas. lebih simple, cara yang kedua memang agak repot.. :)

      Delete
  14. mas kalau ada yang lebih simpel kode untuk widget recommendednya saya pesan ya karena kode yang ini terlalu banyak mas,, saya ingin pasang di blog saya..
    terimakasih banyak sebelumnya..

    ReplyDelete
    Replies
    1. Cara yang pertama lebih simple loh mbak. Saya sendiri juga pakai cara yang pertama.. tinggal Tambahkan Gadget >> HTML/Javascricpt

      Delete
  15. makasih mas, tinggal pasang, sangat menarik

    ReplyDelete
    Replies
    1. Terima kasih kembali mas.. Silahkan mas jika berkenan.. :)

      Delete
  16. Kebetulan diblog saya udah ada.. jadi izin nyimak dulu :)

    ReplyDelete