Welcome

Kali ini saya akan membahas tentang cara memasang slide show pada blog.Yang akan berguna untuk memperindah blog kalian dengan slide gambar beserta deskripsinya.Berikut tutornya:

1. Masuk ke Edit HTML.
2. Jangan klik Expand Template Widget karena akan membuat sobat jadi pusing dengan kode yang panjang.
3. Copas kode berikut diatas kode ]]>
   
   /* SLIDESHOW */
   #slider-holder{width:540px;height:300px;overflow:hidden;margin-left:-15px;padding:0}
   #s3slider{width:540px;height:300px;position:relative;overflow:hidden}
   #s3sliderContent{width:540px;position:absolute;top:0;margin-left:0}
   .s3sliderImage{float:left;position:relative;display:none}
   .s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:70px;width:540px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}
   .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}
   .s3sliderImage span a.featured-title:hover{color:#999}
   .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}
   .s3sliderImage span a:hover{color:#555}
   
4. Kemudian copas kode berikut diatas kode
   
   
   
   
5. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan sobat copas kode berikut setelah kode
   
   

   
   

   
   

   • 
     
     
     JUDUL POST 1
     
     Isi diskripsi tentang gambar diatas
     
     
   • 
     
     
     JUDUL POST 2
     
     Isi diskripsi tentang gambar diatas
     
     
   • 
     
     
     JUDUL POST 3
     
     Isi diskripsi tentang gambar diatas
     
   • 
     
     
     JUDUL POST 4
     
     Isi diskripsi tentang gambar diatas
     
     
   • 
     
     
     JUDUL POST 5
     
     Isi diskripsi tentang gambar diatas
     
   • 
     

   
   

   
   

   
   
6. Simpan Template

• Perhatikan lebar 540px, silahkan sesuaikan saja dengan lebar post template sobat.
• Lihat tulisan yang berwarna ungu pada kode css-nya, saya gunakan margin-left:-15px karena menyesuaikan dengan demo template yang saya gunakan.
• Kode yang berwarna pink adalah kode url untuk gambar yang sudah sobat upload sebelumnya.
• dan kode dengan tulisan tebal pastinya bisa dimengerti dan jelas saya tulis disitu