Cara Pasang Related Post Gambar/Thumbnail Melayang

Cara Pasang Related Post Gambar/Thumbnail Melayang -

Hallo para Blogger

Pada kesempatan kali ini saya akan berbagi tutorial Cara Pasang Related Post Gambar/Thumbnail Melayang

pada posting sebelumnya saya juga pernah menerankan bagaimana "Cara Pasang Related Post Gambar" dan "Cara Buat Artikel Terkait/Related Post dan Scrool Box"

Tapi ada Sayangnya artikel yang muncul tidaklah otomatis dan tidak sesuai label, tetapi kita harus menulis secara manual judul artikel, alamat gambar, deskripsi artikel yang nantinya akan tampil di sebelah kanan blog. Tetapi tidak salahnya jika Anda mencoba widget menarik ini, karena tampilannya yang menarik dan unik mampu mendatangi daya tarik tersendiri bagi pengunjung blog.

Pertama masuk dulu ke akun Blogger

Kedua Klik Rancangan lalu Edit HTML

Jangan Lupa Centang Expand Widget Template atau Download template

Lalu cari Kode ]]></b:skin> dan letakan kode CSS di bawah ini sebelum kode ]]></b:skin>

<link href='http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css' media='screen' rel='stylesheet' type='text/css'/>

Selanjutnya letakan lagi kode Javascript di bawah ini sebelum 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>

Masih sama seperti cara di atas, letakan kode di bawah ini sebelum kode </body>

<div class='rp_list' id='rp_list'>
<ul><li>
<div>
<img height='72' width='72' alt='JUDIL-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>
<li>
<div>
<img height='72' width='72' alt='JUDIL-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>
<li>
<div>
<img height='72' width='72' alt='JUDIL-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>
<li>
<div>
<img height='72' width='72' alt='JUDIL-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>
<li>
<div>
<img height='72' width='72' alt='JUDIL-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>
</ul>
<span class='rp_shuffle' id='rp_shuffle'/>
</div>