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>

Setelah itu klik SIMPAN
keterangan:
huruf yang berwarna merah ganti dengan sesuai keinginan anda.

6 Responses to "Cara Pasang Related Post Gambar/Thumbnail Melayang"

  1. mantapb gan ,. bisa di coba tuh ,. :D

    BalasHapus
  2. Em ane dari dulu mau pasang ini kagak ada yang berhasil bang? :)

    BalasHapus
  3. mantab gan :) Nice Share


    http://cyberpkl.blogspot.com/

    BalasHapus
  4. Keren ni mas bro, kebetulan belum pasang juga di blog. mau tak coba deh
    thanks mas bro

    BalasHapus

Jangan Menulis Komentar Mengandung
SPAM, SARA, P*RNO Atau KATA KASAR..!!