Cara Membuat Related Post Slide Out Boxs Di Blog

Cara Membuat Related Post Slide Out Boxs Di Blog - 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.

Demo

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 dan letakan kode JS berikut diatas kode

<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/AVvXsEiZeMiL1azkoFJE2CzJcyZLIRyrogwtBvl2g_kopK15AxTMcIfL3NwoLFUiXwWSmPJRkxhYzPaTuViA6Er1RDA9P2LQeQJfLoTHghAGlGjlMjENmJYou1xyoXMDst0cig40-BoMe_be9zs/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/AVvXsEj5IShqUG5qWvfSVNuSdfiamdpw8S5p7kQ4F-OpooW_JaN22S9lIcN5QP3BVeuBR226H4-sAHNtit72jiM_uWM5s8VaHku2F7mCWp-7Vo7Kd0N42ufTe4T0vgk1dG0o-sPAcgNQGtdgiMo/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/AVvXsEiqx7dnOwpvtium9mTAG7L7OGChHl04uFnteCf1GvzBulEwYLV351Ed-DkrFTxaL85SEIxX9fnF0fYwFVuwmP-_kMjY6hVLf0gqDzy4tzlfPPmixEvSjFm4_gwc0SP_6Wn3ctkLsDu_aEQ/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/AVvXsEhmjSZp2U_xar6e4ilJmyv5J92Q_4ynkycs3-l_gbsLh6UBka41zG6QvoXGw30X9xp5DtHm5pSNkht38iRrD3MBIt0U34d0cm90_hvXOp9gmAylf4nE8mLqvIhjJspDA9EMjNmAsAQrjxM/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/AVvXsEjyWrCC_tV0k_teNqBXHGxhCdSrR8zbxZ6CVS-YgCB40J061IceR0en8E77q3jfZMrjKLr-qjmVoa_eFWe5lu6OVqH5RllORK8IIrNeIJltk4SNuHGFu2zCgfMmUf0_5V5ld6_Qy67O340/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/AVvXsEjBS-bvL0kZXioq1FIliNAwz83qNbsMQqBgSgR398mIKcXmiefjNKPGhb9S6_LNi0Wl-w1dQxJ1TcyYPAb7v8ptUT0CX0pPzG3TKEYLSAwss3tvNXHZQcF1YhE3w7S34UNyzlv84wpNFZM/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/AVvXsEhp9KlgiaAHiqxqsasyh6sodg03kD0-GfXXAmDGIVRY-W91ZqQpS_qaBkN6Xd1uxK0hpmXcAqup0Cu_4nQdS5kS_yDmlosXFLm6WsnFY5mq6jcyyngh4HunoTgFB67LW9kRvyGO9pyqVvQ/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

Related Post