Cara Membuat slid Box di blog

 Sebelum melangkah alangkah baiknya kita mengetahui dulu apa itu slid box. Slid box pada dasarnya sama dengan widget pada umumnya hanya saja cara penampilanya yang berbeda. Slid box akan muncul di area tertentu pada blog, misal di atas kanan, bawah kanan, atas, bawah, dll. Nah, slid box tersebut bisa kita isi dengan apa saja, contohnya di blog saya ini saya gunakan untuk menampilkan profile. Widget ini cocok bagi blog yang sudah penuh dengan widget dan ini juga untuk menghemat tempat pada blog sobat. Baiklah cukup basa-basinya langsung saja kita praktek.

Contoh slid box


  • Login ke blogger
  • Masuk ke Rancangan > elemen laman > tambah gadget > HTML/java script
  • Lalu kopy pastekan kode dibawah ini


<!--Slidbox -->  
         <script type="text/javascript" src="http://marewainfo.googlecode.com/files/slidboxordinary.js"></script>  
    <div style="position:fixed; width:342px; overflow:hidden; bottom:20px;  
    left:10px; display:none; 
    background:url(http://s1099.photobucket.com/albums/g395/agusdtr/00.png)  
    repeat; -moz-border-radius:15px; -webkit-border-radius:15px;  
    border-radius:15px; border:2px solid #111111;" id="fbslidebox">  
      
        <div style="width:320px; padding:10px; margin:0 auto; overflow:hidden;">  
      
            <a href="#" style="float:left; 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;">Disini Judul</strong>  
      
    Sobat tulis apasaja disini !!! gambar, teks, dll
            </div></div> 
    <!--Slidbox end -->

  • Save dan lihat hasilnya
NB : Teks berwarna merah bisa sobat ganti dengan tulisan yang sobat inginkan
         Teks berwarna biru bisa sobat ganti dengan right, jika ingin muncul dikanan

| Free Bussines? |

0 komentar:

Template by : Agus Diantoro www.megatrik.blogspot.com