Tampil Cantik dengan Jquery Slideshow Postingan di blogspot

Tampil Cantik dengan Jquery Slideshow Postingan di blogspot

Kalau mau liat Demo nya Bisa langsung kesini
Kalau sudah kita langsung Ke Tutorial ..

1. Login ke Blogger
2. Pilih Tata Letak / Rancangan
3. Pilih Tab Edit HTML
4. Centang "Expand Template Widget"
5. Silakan Cari Kode ]]> dan Taruh Kode Berikut Di atas kode ]]>

Kode:

/* Image Slideshow */
#s3slider{margin-bottom:5px; width:100%; /* important to be same as image width */height:250px; /* important to be same as image height */position:relative; /* important */word-wrap:break-word; /* fix for long text breaking sidebar float in IE */overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
#s3sliderContent{width:100%; /* important to be same as image width or wider */position:absolute; /* important */top:0; /* important */margin:0px; padding-left:0px; /* important */}
.s3sliderImage{float:left; /* important */position:relative; /* important */display:none; /* important */}
.s3sliderImage span{position:absolute; /* important */left:0; font:normal 11px 'Arial',Helvetica,sans-serif; padding:10px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); /* here you can set the opacity of box with text */-moz-opacity:0.7; /* here you can set the opacity of box with text */-khtml-opacity:0.7; /* here you can set the opacity of box with text */opacity:0.7; /* here you can set the opacity of box with text */color:#fff; display:none; /* important */top:0; /*if you puttop:0; ->the box with text will be shown at the top of the imageif you putbottom:0; ->the box with text will be shown at the bottom of the image*/}

6. Kemudian Setelah itu coba cari kode dan Taruh Kode berikut, di atas kode

Kode:

terakhir

1. Login ke Blogger
2. Pilih Tata Letak Atau Rancangan
3. Pilih Tab Edit HTML$0D
4. Jangan Lupa Untuk buat Backupa data anda
5. Centang expand template widget
6. Cari Kode ini

Tekan Ctrl+F untuk mempermudahnya
7. Copy kode di bawah ini dan Paste tepat di bawah kode

• 
  
  height='245'
  src='URL GAMBAR ALAMAT TUJUAN'
  width='450'/>
  JUDUL TAMPILAN ATAU JUDUL URL.
• 
  
  
  src='#'
  width='450'/>
  JUDUL TAMPILAN ATAU JUDUL URL.
• 
  
  
  src='#'
  width='450'/>
  JUDUL TAMPILAN ATAU JUDUL URL.
• 
  
  
  src='#'
  width='450'/>
  JUDUL TAMPILAN ATAU JUDUL URL.
• 
  
  
  src='#'
  width='450'/>
  JUDUL TAMPILAN ATAU JUDUL URL.

KETERANGAN KODE .

Warna Biru Ganti sama URL LINK tujuan Contoh http://japarus.com
Warna orange Ganti sama Judul URL contoh , Pendekar Pemanah Rajawali versi Terbaru
Warna hiaju Ganti sama URL Image nya contoh http://japarus.com/ganteng.jpg
Warna putih yang width sama heigt adalah lebar sama tinggi gambar nya

Selamat Mencoba ...

OriginaL Post By Kang Salman