Cara Mudah Membuat Slide Box Pada Blogspot

Cara Membuat Slide Box Pada Blogspot

Cukup memasukkan kode berikut untuk membuat Slide Box pada Blogspot anda. anda juga bisa memasukkan tulisan dan kode iklan, halaman fb, banner atau kode yang lain pada slide box anda. Jika ingin mencobanya, inilah cara membuat Slide Box pada Blog selengkapnya.




Cara Mudah Membuat Slide Box Pada Blogspot

Cara1

~ Masuk ke dasboard blog

~ Pilih menu Tata letak > Tambah-gadget > pilih HTML/JavaScript

~ Copy paste ke kotak HTML/JavaScript kode berikut ini: 

<!--Slidbox -->
     <script type="text/javascript" src="http://marewainfo.googlecode.com/files/slidboxordinary.js"></script>
<div style="position:fixed;left:10px; float:left; width:750px; overflow:hidden; bottom:20px;
right:10px; display:none;
background:transparent; -moz-border-radius:15px; -webkit-border-radius:15px;
border-radius:15px; border:2px solid #111111;" id="fbslidebox">

    <div style="width:750px; padding:10px; margin:0 auto; overflow:hidden;">

        <a href="#" style="float:center; color:#999; padding:0 3px;
border:1px solid #CCC; text-decoration:none; font-size:9px; font-family:Verdana, Geneva, sans-serif;" id="fbcloseslidebox">X</a>

        <strong style="color:#66ad3d;">SILAKAN LIHAT INFO MENARIK DARI KAMI</strong>
<a href="http://indonesia-blogger.com">INDONESIA-BLOGGER</a>


  </div></div>
<!--Slidbox end -->

~ Simpan

Anda bisa mengganti kode pada ukuran kotak, dan ganti isi tulisan (warna biru) serta isi kode tertentu (pada tulisan warna merah) bisa diisi kode iklan, banner, text, halaman fb) dan lainnya.




Cara 2

~ Silakan masuk ke Template > edit HTML >Lanjutkan
~ Centang pada kotak Expand Widget
~ Cari kode <b:skin>
~ Copy kode berikut, dan letakkan di atas kode <b:skin>


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


~ Lanjutkan dengan mencari lagi kode </body>

~ Copy paste kode berikut, di atas 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>



~ Edit dulu kode berikut, setelah itu taruh di atas kode  </body> 


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


Sekian info trik Cara Membuat Slid Box Pada Blog.