membuat Carousel

Banyak dari teman kang Rohman menanyakan bagaimana cara membuat fitur Step carousel viewer pada template blogspot seperti fitur yang ada dalam magazine template R.1.2. untuk membuat fitur Step carousel viewer pada template anda tidaklah terlalu sulit, akan tetapi kaena setiap template sangat berbeda, baik itu karakteristik template, ukuran template, teknik penempatan widget dan lain-lain, maka anda perlu sedikit penyesuaian terhadap kode atau script yang di berikan. Untuk memberi gambaran bagaimana cara memasang fitur Step carousel viewer, simak pembahasannya

Untuk melihat seperti apa fitur Step carousel viewer, silahkan anda lihat demonya :

demo

Terlihat bahwa di bagian atas ada gambar yang bisa bergerak kekanan dan ke kiri serta tombol pengontrol untuk megatur arah pergerakan gambar, itulah yang di sebut Step Carousel Viewer. Script Step Carousel Viewer bisa anda dapatkan secara gratis pada situs http://www.dynamicdrive.com, namun anda bisa memodifikasi kedalam bentuk lain jika anda mengerti tentang CSS.

Agar tidak terlalu memakan waktu, sedikit saya beri gambaran tentang langkah memasang script step carousel Viewer di blogspot.

#Step1

Siapkanlah gambar yang akan di pasang pada step carousel viewer, di sarankan agar gambar tersebut tidak terlalu besar karena gambar yang besar butuh kecepatan koneksi internet yang cepat untuk bisa tampil maksimal.Ingat, tidak semua pengunjung kecepatan koneksi internetnya cepat. Dalam hal ini kang Rohman menyarankan agar membuat gambar dengan ukuran 180 X 130 pixels.

Contoh :

R1-2 R1-4

Uploadlah gambar-gambar anda ke hosting tempat anda biasa menyimpan gambar, contoh image hosting gratisan : http://photobucket.com, http://tinypic.com, http://flicker.com, dll. Catat alamat URL gambar yang telah kita upload tersebut, contoh :

http://i43.tinypic.com/dmg1mv.jpg
http://i42.tinypic.com/2l8an8w.jpg
http://i44.tinypic.com/nda5xt.jpg
http://i44.tinypic.com/b98y8x.jpg
http://i41.tinypic.com/2hmq2c1.jpg
http://i42.tinypic.com/28rpoom.jpg
http://i43.tinypic.com/15ep9x.jpg

Tentukan alamat link yang ingin dipasang pada gambar tersebut. Contoh:

http://blogtemplate4u.com/2008/09/magazine-template-2.html
http://blogtemplate4u.com/2009/03/free-template-magazine-template-3-dark.html
http://blogtemplate4u.com/2009/03/magazine-template-3-white-blue.html
http://blogtemplate4u.com/2009/03/magazine-template-r1.html
http://blogtemplate4u.com/2009/03/magazine-template-r12.html
http://blogtemplate4u.com/2009/04/magazine-template-r13.html
http://blogtemplate4u.com/2009/04/magazine-template-r14.html

#Step 2

Buatlah sebuah kolom baru di bawah header. Untuk membuat kolom baru di bawah header pernah saya bahas, silahkan baca artikel Menyimpan widget di bawah header atau Cara membuat elemen Persis di bawah header atau yang ini juga Buat Kolom Dibawah Header Pada Magazine Template 2. Ingat, ini hanya sekedar contoh, tentu saja script Step carousel bisa di simpan di mana saja mungkin di sidebar atau di bagian footer.

#Step 3

Download script step carousel Viewer. Klik tombol di bawah :

bigdownload

File yang anda download adalah berupa file .rar. Ekstraklah file tersebut dengan ekstraktor win.rar atau software ekstraktor sejenis, atau bisa juga menggunakan online ekstraktor http://wobzip.org.

carousel

Setelah di ekstrak, akan ada 3 file yaitu :

* CSScarausel.txt
* javacarausel.txt
* HTMLcarausel.txt

#Step 4

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Carilah kode ]]> pada template anda.
5. Bukalah file CSScarousel.txt dengan menggunakan program notpad atau program sejenis seperti wordpad dan lain-lain.
6. Copy lah seluruh kode yang ada (tips cepat mengcopy : tekan Ctrl + A kemudian Ctrl + C).
7. Paste kode CSScarausel.txt diatas kode ]]>
8. Carilah kode pada template anda.
9. Bukalah file javacarousel.txt dengan menggunakan program notpad atau program sejenis seperti wordpad dan lain-lain.
10. Copy lah seluruh kode yang ada.
11. Paste kode javacarausel.txt diatas kode
12. Klik tombol SIMPAN TEMPLATE

#Step 5

1. Klik tab Elemen Halaman
2. Klik Tambah gadget pada kolom di bawah header yang tadi di buat. Ingat, ini hanya contoh saja, anda bisa menempatkan di mana saja).

gadget
3. Klik tanda plus ( + ) untuk HTML/JavaScript
4. Bukalah file HTMLcarousel.txt dengan menggunakan program notpad atau program sejenis seperti wordpad dan lain-lain.
5. Gantilah kode link serta gambar yang ada dengan milik anda sendiri.
6. Copy lah seluruh kode yang ada.
7. Paste kode HTMLcarausel.txt pada kolom yang tadi muncul.
8. Klik tombol Simpan
9. Selesai.

Ingat! tutorial diatas hanyalah sebagai gambaran saja, karena karakter setiap template sangatlah berbeda, oleh karena itu mungkin saja perlu penyesuaian, terlebih pada file CSScarousel.txt