Slide Box Animation di Blogger

Baca Juga

Bismillah... pada postingan kali ini saya akan sedikit share cara membuat slide box di blogger/blogspot, pada postingan terdahulu saya pernah membuat artikel tentang slide box, namun pada kesempatan slide box nya aga sedikit berbeda, lumayan untuk untuk mempercantik dan memperindah blog sobat.

Slide Box

Slide box disini hampir mirip dengan related post namun disini sobat harus manual memasukan link (url) dan gambarnya. sebelum ke cara membuat slide box sebaiknya sobat lihat dulu contonya  di gambar atau sobat bisa lihat di blog ini, jika sobat tertarik dengan gadget seperti itu silahkan sobat di coba pada blog sobat.

• Langkah pertama untuk membuat slide box yaitu :
• Sobat login ke blogger dengan akun masing masing.
• Setelah itu sobat langsung menuju ke tab Design/Rancangan blog
• Langkah selanjutnya sobat masuk ke area edit HTML terus centang kotak Expand Widget
• Setelah itu sobat cari kode/tag <b:skin>, setelah ketemu sobat copy kode di bawah ini dan letakan di atas kode <b:skin>

CSS Unutuk Slide Box

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

• Jangan dulu di save langkah selanjutnya sobat cari lagi kode/tag </body>, terus sobat masukan kode JavaScript di bawah ini di atas kode/tag </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>

Langkah terakhir sobat masukan kode HTML di bawah ini di atas kode/tag </body>  

<li>
<div>
<img height='72' width='72' alt='JUDUL GAMBAR' src='URL-GAMBAR'/>
<span class='rp_title'>JUDUL-POSTINGAN</span>
<span class='rp_links'>
<a href='URL-ARTIKEL' target='_blank'>Article</a>
<a href='URL-DEMO' target='_blank'>Demo</a>
</span>
</div>
</li>

Keterangan ganti lah kode di atas dengan url milik sobat

• JUDUL GAMBAR ="Judul gambar dalam artikel"
• URL-GAMBAR ="Alamat (url) gambar contoh 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEistlpHqS_49NGO9kQDTgDTA3cPkYaTx_oGMDeKev4CTYnB9HNvGwlKy3fO2wWHrx42aqcuOJKR8qWkzTsI9S1PeMvl3ssqeQbaGNfuPHyKbFFE7ALl68HsM-pzpzXzXI4GuiH6-Fd_9Ic/s72-c/download-template-today.jpg' "
• JUDUL-POSTINGAN : "Judul artikel milik sobat blogger"
• URL-ARTIKEL ="Alamat artikel yang akan di tuju" contoh :http://lutfietutor.blogspot.com/2012/03/cara-download-file-pdf-dari-scribd.html
• URL-DEMO ="Alamat demo jika blog sobat memiliki demo/tutorial yang online"

Oke sobat sampai disini dulu postingan pada kesempatan ini semoga berhasil, Good Luck Happy Blogging