Cara Membuat Slideshow Widget Photo

368 views

alhadi.org – Cara Membuat Slideshow Widget Photo, Cara Membuat Slideshow Widget Photo

Cara Membuat Slideshow Widget Photo

Tips blog kali ini adalah cara membuat slideshow widget photo. Tips ini adalah hasil utak-atik kang salman ( kucoba.com) silahkan sobat mampir ke situs aslinya www.kucoba.com. Slideshow widget photo ini adalah sebuah widget yang menampilkan image secara random. Dimana akan berganti-ganti tergantung jumlah foto dan informasi yang kita masukan ke dalamnya.

DEMO
http://distro-baju.blogspot.com
Bagaimana cara membuatnya ? Ikuti langkah-langkah berikut ini :

Langkah 1

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 ]]>

/* 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



 

7. Save Template

Langkah 2

Untuk Bisa Menikmati widget ini silakan perhatikan instruksi di bawah ini :

1. Login ke Blogger
2. Pilih Tata Letak Atau Rancangan
3. Pilih Tab Edit HTML
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

  • http://www.kucoba.com/2010/07/10-tanda-cewek-suka-ma-kita.html'>

    src='http://3.bp.blogspot.com/_Z8F7gBEfQSU/S_3BHzSwjQI/AAAAAAAAA4Y/ckLzjBVMJmw/s1600/1.jpg'
    width='450'/>

    Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image akhiri dengan titik.

  • #'>

    src='#'
    width='450'/>

    Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.

  • #'>

    src='#'
    width='450'/>

    Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.

  • #'>

    src='#'
    width='450'/>

    Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.

  • #'>

    src='#'
    width='450'/>

    Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.

Keterangan :

  1. Ganti warna merah dengan alamat link artikel kamu
  2. Ganti warna hijau dengan link gambar / foto
  3. Arti kode width="468" height="245" adalah ukuran dari widget slideshow view, lebar="468" tinggi="245" (atur sesuai ukuran widget yang kamu inginkan)
  4. Isi dengan kalimat yang ingin di tampilkan di atas foto.
  5. Jumlah Slide Show bisa anda perbanyak dengan menambahkan kode
  6. #">#" width='468'/> isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image jangan lupa akhiri dengan titil atau tanda kalimat lainnya .
  7. di atas kode

     

Memang agak panjang sob cara penerapanya, jadi pelan-pelan saja dan cek dengan teliti untuk menghindari kesalahan.

Cukup sekian tips blog Cara Membuat Slideshow Widget Photo. Semoga bermanfaat.

Source
Terima Kasih Atas kunjungan anda di halaman  Cara Membuat Slideshow Widget Photo, Jangan lupa untuk Membookmars Halaman ini jika  Cara Membuat Slideshow Widget Photo berguna untuk anda.