Cara pasang widget Related Post Slide Out Boxs di blogger - Rasanya sudah lama saya nggak sempat update blog karena banyak kesibukan di dunia nyata, berhubugan akan menjelang hari raya pengrupuk dan nyepi jadi umat Hindu lagi sibuk mepersiapkan yg namanya Ogoh -ogoh! Nah, pada kesempatan kali ini, saya akan berbagi satu widget yang tidak kalah menariknya dengan widget related post with thumbnail. widget Related Post Slide Out Boxs menurut saya belum banyak yang memakai mungkin karena fiturnya agak janggal sedikit karena kurang feednya. nah biar nggak kelamaan mari kita lihat demonya dibawah ini.




Bagaimana, menarik bukan? jika sobat tertarik, mari kita pasang widget ini di blog sobat. ikuti langkah sebagai berikut :




1. Pergi ke Template/Rancangan > Edit Html
2. Cari kode <b:skin> dan letakan kode CSS berikut diatas kode <b:skin> 
<link href='http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css' media='screen' rel='stylesheet' type='text/css'/>
3. Selanjutnya cari </body> dan letakan kode JS berikut diatas kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>  <script>//<![CDATA[   $(function() {    /**    * the list of posts    */    var $list   = $('#rp_list ul');    /**    * number of related posts    */    var elems_cnt   = $list.children().length;        /**    * show the first set of posts.    * 200 is the initial left margin for the list elements    */    load(200);        function load(initial){     $list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');     var loaded = 0;     //show 5 random posts from all the ones in the list.      //Make sure not to repeat     while(loaded < 5){      var r   = Math.floor(Math.random()*elems_cnt);      var $elem = $list.find('li:nth-child('+ (r+1) +')');      if($elem.is(':visible'))       continue;      else       $elem.show();      ++loaded;     }     //animate them     var d = 200;     $list.find('li:visible div').each(function(){      $(this).stop().animate({       'marginLeft':'-50px'      },d += 100);     });    }         /**    * hovering over the list elements makes them slide out    */     $list.find('li:visible').live('mouseenter',function () {     $(this).find('div').stop().animate({      'marginLeft':'-220px'     },200);    }).live('mouseleave',function () {     $(this).find('div').stop().animate({      'marginLeft':'-50px'     },200);    });        /**    * when clicking the shuffle button,    * show 5 random posts    */    $('#rp_shuffle').unbind('click')        .bind('click',shuffle)        .stop()        .animate({'margin-left':'-18px'},700);            function shuffle(){     $list.find('li:visible div').stop().animate({      'marginLeft':'60px'     },200,function(){      load(-60);     });    }            });  //]]></script>
4. Sekarang letakan struktur HTML ini juga diatas kode </body>
<div class='rp_list' id='rp_list'><ul><li><div><img height='72' width='72' alt='Download Template Zoom Gallery' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh381ba0N91BtuHilGVXve7A0LPJ4qrhrBPe7N7nmPqiI_gZPAjrSGKyzrXWRwuUWIcTmDcbzKpNunwuxKtE-lBNSxkhPmCDZLi2B1sOC02wud0FLQ3-BuY8Y2v81dOKJBAa7UIPmo6CTk/s72-c/zoom-gallery.jpg'/><span class='rp_title'>Download Template Zoom Gallery</span><span class='rp_links'><a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></span></div></li>
<li><div><img height='72' width='72' alt='Download Template Blogger Tune-Up' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqUJHKhnwk-ZF-epYV4ASd-2TWCY3quRppLgDbmJQMbrAK1l07LYIPkBGyoEQF4vNSuP3zdCSKH_KmZbrK1ny8XWdhazSaX4wrz-9RWFenc1LWDEizBbmcINIlpOQREfhUC9_ChvS_0NI/s72-c/download-template-blogger-tune-up.jpg'/><span class='rp_title'>Download Template Blogger Tune-Up</span><span class='rp_links'><a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></span></div></li>
<li><div><img height='72' width='72' alt='Download Template Today' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHY9ZF2vT0MEfYkKRRJBZqA3V0QB_pEXqQOd1fYP4zqIwHNuQq_Z7kHATwVLcml3BBkEeyfYWZsEMr0MWnhu_j9kFQtWwG2gvV_BkFyVbXCnePhV1neTCaD8GyBJVuVkzKYhLMOUYqa0Y/s72-c/download-template-today.jpg'/><span class='rp_title'>Download Template Today</span><span class='rp_links'><a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></span></div></li>
<li><div><img height='72' width='72' alt='Download Template Kolom Tutorial' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgovn8FLN9BoH_AUvtjXPZCx-pMoQkr0deLOqtQLJSBB1AJbnA5cm_l59tzGqkwCmNQCAEpXgb8NUuEqs-SEk_Z9qzLrAgjh6zppfOuuaT6RLFz56RoBV4PmcAhG-PU7VyjoJ0WZab7Uw/s72-c/kolom-tutorial.blogspot.com_medium.jpg'/><span class='rp_title'>Download Template Kolom Tutorial</span><span class='rp_links'><a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></span></div></li>
<li><div><img height='72' width='72' alt='Download Template Sporty Magazine 2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9DeG3sLan0GQoiyOBnoVu0_BvbaydS2wYHGLvqou-HuWxxNleNrQ_J6OXgYJplNG6ea-fKSqqZ8jl6YAyrRUinud654Eh3BNf_v_0RLByde5WvB7Bvk3Wxe0v3DJi4lz9Jnpnz2Rtme0/s72-c/Sporty+Magazine+2.png'/><span class='rp_title'>Download Template Sporty Magazine 2</span><span class='rp_links'><a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></span></div></li>
<li><div><img height='72' width='72' alt='Download Template Blog Juragan' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd747Q7vIVwz0-fdoWUGctsyuRxnHWrS8ut6CXurnsxm10tApuhQ8QTJMkRotBV93iL6YKN-xmkzedJRLnocGBMG2kUoZRPWsIkcYAe7Kzqc2X8SlSOYtVf2T0uS1XjfVplEaTW9otgh4/s72-c/blog_juragan.jpg'/><span class='rp_title'>Download Template Blog Juragan</span><span class='rp_links'><a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></span></div></li>
<li><div><img height='72' width='72' alt='Download Template O-om' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9GwUQ3mLM-1K0xWqR1lMAlPUFuPSPyFL6FukHu44ERkG19Z8HZRcqeNjdRRCm_zF3x-qFgwmu91Ke-noohe8fa2sQEfpuPhC5VgolZ628xtzqg96rI_GoGDahBkFwxE6Yh0CC3MJfyzc/s72-c/download_template_o-om.jpg'/><span class='rp_title'>Download Template O-om</span><span class='rp_links'><a href='http://darmasite.blogspot.com/' target='_blank'>Article</a><a href='http://darmasite.blogspot.com/' target='_blank'>Demo</a></span></div></li>
</ul><span class='rp_shuffle' id='rp_shuffle'/></div>
Struktur diatas hanyalah sebuah contoh jika anda ingin merubah thumbnail image, judul dan link. yang perlu Anda rubah adalah seperti struktur berikut
<li><div><img height='72' width='72' alt='JUDUL-IMG' src='URL-IMAGE'/><span class='rp_title'>JUDUL-POST</span><span class='rp_links'><a href='LINK-ARTIKEL' target='_blank'>Article</a><a href='LINK-DEMO' target='_blank'>Demo</a></span></div></li>
Sobat bisa menambahkan struktur tersebut minimal 5. Dalam JavaScript kita akan mendefinisikan bahwa hanya menampilkan 5 posting pada suatu waktu. Tentu saja, sobat harus mengganti teks berwana dengan link dan judul sobat.

5. Terakhir Klik Save Template


Sekian postingan saya kali ini mengenai cara pasang Related Post Slide Out Boxs di blogger, semoga artikel ini bermanfaat bagi sobat blogger semua! Terimakasih

Posting Komentar

  1. waHHH NI KAN YG DARI TYMAPNUSS

    BalasHapus
  2. hmhmhm...
    kalau yang seperti slide out box tapi isinya info gitu ada gak gan ???

    BalasHapus
  3. wah keren tutor membuat related post slide out-nya nih sob,, ijin bookmark dulu,, kapan2 bisa di coba nih

    BalasHapus
  4. nyimak dulu aja om...
    dipelajri dl br praktek :)

    BalasHapus
  5. keren mas :D
    tapi sayang, berat banget :(
    masih suka sama artikel terkait biasa aja deh :D

    BalasHapus
  6. "Om Swasti Astu" Sip bli bro bisa di praktekkan nanti, thanks for sharingnya.

    BalasHapus
  7. Keren :D

    Risepu.blogspot.com

    BalasHapus

Catatan:
1. Komentar Anomin telah kami buka, silahkan berkomentar yang sopan
2. Jika kurang mengerti dengan posting di atas silahkan ajukan pertanyaan
3. Kami usahakan membalas komentar anda secepat kilat!
4. Masalah "Link Rusak" bisa anda laporkan lewat komentar
5. Jika meninggalkan Link Aktif pada komentar terpaksa kami hapus

Salam Admin
Darma Jaya

 
Top