Cara Membuat Gambar SlideShow di Blog / Website


Untuk beberapa kategori blog atau website, pemakaian gambar slide show pada blog / website sangat diperlukan, disamping untuk mempercantik penampilan blog / website itu sendiri, ada beberapa alasan kenapa gambar slide show sangat diperlukan dalam tampilan blog / website.
Untuk blog / kategory Movie misalnya, hal ini diperlukan, agar penyampaian isi konten dalam blog / website dapat tersampaikan kepada para pengunjung blog / web tersebut, begitu juga dengan blog / website dari sebuah perusahaan, penggunaan gambar slide show banyak diaplikasikan. Lalu bagaimana cara membuat  atau memasang gambar slide show di blog atau website? ada banyak cara diantaranya dengan menggunakan gambar dengan format Flash, bisa juga dengan menggunakan script / kode HTML / Javascript tertentu.

Kini HTML 5 telah mendukung penggunaan gambar slide show dengan menggunakan kode script tanpa harus menggunakan gambar dengan format file flash. Nah untuk kali ini saya akan berbagi panduan cara membuat gambar slide show dengan kode html / javascript pada blogger.

Langkah-langkahnya sebagai berikut :

1. Siapkan beberapa gambar dengan ukuran tertentu sesuai dengan kebutuhan anda.
2. Upload gambar-gambar tersebut di media penyimpanan online (anda dapat menyimpan gambar di picasaweb.google.com).
3. Catat url link dari masing-masing gambar yang sudah anda upload tersebut.
4. Masuk / Login ke Blog anda. (Blogger)
5. Pilih "Template" >> Klik "Edit HTML" >> beri tanda centang pada "Expand Template Widget".
6. Untuk keamanan jika terjadi kesalahan sebaiknya anda "COPY" terlebih dahulu script HTML anda dan "PASTE" kan ke dalam NOTEPAD untuk backup.

7. Cari kode </head> pada bidang HTML template blog anda (gunakan tombol "Ctrl+F" untuk memudahkan pencarian)
8. Masukkan kode script berikut tepat diatas kode </head>

Kode Script-1 : 



9. "Simpan Template" blog anda.
10. Sekarang beralih ke menu "Tata Letak"
      >> Klik "Tata Letak" >> Klik "Tambahkan Widget" >> pilih "HTML / JAVASCRIPT".
11. Masukkan kode script berikut kedalam bidang widget "HTML / Javascript" tersebut.

Kode script -2


Keterangan :
- Untuk kode script-2 silahkan atur size / ukuran gambar sesuai dengan ukuran gambar yang sudah anda   upload tadi.
- Untuk kode script-2 sulahkan atur Url link gambar sesuai dengan url masing-masing gambar anda yang sudah anda simpan di media penyimpanan online tadi.

Preview / Demo gambar slide show dapat anda lihat DISINI>>

Demikian tutorial cara membuat gambar slideshow pada blog, semoga bermanfaat.

No comments:

Popular Posts