Membuat Slideshow Header dengan jquery

Membuat Header slideshow pada blog kadang kita perlukan dalam rangka keindahan blog itu sendiri, ingat bukankah blog adalah seni? eeit..tapi tunggu dulu anda juga harus mempertimbangkan proses loading blog anda sendiri. Jangan hanya karena ingin membuat tampilan blog keren, penuh dengan widget blog yang keren,
penuh dengan flash dan gambar bergerak lainnya justru akan memperlambat loading blog hingga menjadi berat, hal ini bisa membuat kapok para pengunjung.

Tapi jika hal ini sudah menjadi pertimbangan anda, silahkan saja. Header slideshow sebenarnya bisa menggantikan header dengan flash atau swf masalahnya hosting tempat penyimpanan kita upload swf terkadang error atau mematikan akun kita karena berbagai kebijakan, maka header swf kita menjadi tidak bergerak alias mati, karena link pada script embed kita sudah tidak aktif, ada banyak tempat alamat web upload swf gratisan akan tetapi pada kenyataannya tidak pernah menjamin akun dan file kita bertahan lama, atau mungkin hanya memberi fasilitas trial kepada kita. Atau begitu kita akan generate 'embed' swf tersebut, kita dibawa ke halaman untuk mengisi form yang menyediakan kolom isian type pembayaran 'transfer' 'credit card' or 'paypal' .....hahahaha...ujung-ujungnya duit ya. Sampai saat ini hanya ada satu tempat upload swf yang masih terpercaya kegratisannya yaitu milik google, silahkan kalau anda ingin mencobanya kunjungi dan buatlah akun disini https://sites.google.com

Kembali tentang Header slideshow, header dengan menggunakan slideshow menurut saya juga cukup dinamis dan masuk kategori memperindah estetika sebuah blog, hanya bermodalkan file berformat jpeg atau png yang kita upload pada sebuah hosting gratisan semacam www.photobucket.com sebuah web tempat upload gambar paling terpercaya saat ini.

1. Silahkan untuk langkah awal kunjungi dan registrasi dihttp://www.photobucket.com

2. Buatlah beberapa gambar berformat jpeg/png (harap gambar yang anda buat diserasikan dengan thema blog, ukuran lebar dan ukuran tinggi header blog anda), karena header tidak membutuhkan ukuran & resolusi tinggi silahkan anda buat beberapa gambar header anda di powerpoint saja, jangan lupa tambahkan teks judul blog dan deskipsi blognya, lanjut lakukan grouping sehingga gambar menjadi satu, kemudian klik kanan gambar lakukan 'save as picture' dengan format jpeg atau png.

2. Setelah beberapa gambar header selesai anda buat dengan langkah kerja diatas, silahkan anda login di photobucket kemudian silahkan upload beberapa gambar header yang anda buat tadi, beri judul kemudian silahkan saving file yang sudah di upload. Kemudian copy paste Dirrect link gambarnya simpan di notepad sebagai dokumen anda. Sampai disini anda sudah punya modal link gambar header yang nanti akan dijadikan modal slideshow :)

3. Langkah ketiga silahkan login ke akun blog anda, masuk ke design dan edit html.

4. Download dan backup fulltemplate anda untuk berjaga-jaga, siapa tahu nantinya terjadi kesalahan.

5. Silahkan centang expand widget, kemudian cari kode </head> , letakkan kode dibawah ini dengan cara copy paste, diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 930,height:140, navigation: false, delay: 5000 }); }); </script>

6. Keterangan width:930,height:140 adalah menunjukkan ukuran lebar & tinggi slideshow serta ukuran gambar (image) yang ditampilkan,sesuaikan dengan header anda.

7. Setelah selesai, silahkan save template anda. Kemudian masuklah ke Design (Rancangan).

8. Lakukan Add a Gadget, pilih Add a Gadget yang paling atas sebagai header, pilih HTML/Javascript. Kemudian Paste kode dibawah ini.

<div id='coin-slider'>

<center>

<a href="imgN_url" target="_blank">

<img src="LINK URL GAMBAR ANDA" />

<span>

ISI KETERANGAN DI SINI

</span>

</a>

<a href="imgN_url" target="_blank">

<img src="LINK URL GAMBAR ANDA" />

<span>

ISI KETERANGAN DI SINI

</span>

</a>

<a href="imgN_url" target="_blank">

<img src="LINK URL GAMBAR ANDA" />

<span>

ISI KETERANGAN DI SINI

</span>

</a>

</center>

</div>

9. Jangan lupa masukkan dirrect link url gambar-gambar yang anda simpan di notepad tadi pada area berwarna merah tersebut,untuk isi keterangan terserah anda bisa diisi atau anda abaikan.

10. Lakukan saving, selesai, lihat hasilnya.

Jika anda menggunakan Slideshow ini sebagai header, tentunya posisinya akan bertumpuk dengan judul dan deskripsi blog pada header default blogger, maka hal ini akan kelihatan janggal dan sangat wagu toh? maka anda bisa memakai trick dengan cara menyembunyikan judul blog dan deskripsi blog anda. Silahkan lihat postingannya klik di sini.

Share :