Cara Membuat slide show di header blog

 Memperindah blog, atau menghiasi blog dengan gadget gadget yang penting dan indah adalah salah satu faktor bagaimana sebuah site di kunjungi, termasuk dengan pembuatan slideshow berikut ini, blog kita akan lebih menarik ,ikutilah kata kata berikut 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 atau photo shop saja, jangan lupa tambahkan teks judul blog dan deskipsi blognya(jika ingin) jika menggunakan power point jangan lupa untuk meng grouping agar gambar menjadi satu lalu save dengan format image, jika pakai photoshop tidak perlu di satukan setiap layers nya karena jika kita men save nya maka gambar akan automatis menjadi 1

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/ms word atau sejenis nya agar anda tidak sulit unuk menghafal link photo 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 full template 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>
Gunakan ctrl + F untuk searching code </head> agar lebih mudah

      <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 yang ditampilkan,sesuaikan dengan header anda ya

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

8. Lakukan Add a Gadget, pilih Add a Gadget di bagian header, jika tidak ada maka aktifkan ulti gedget di header , setelah multi gedget di header di aktifkan add gedget 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 tulisan ISI KETERANGAN DI SINI tersebut,untuk isi keterangan terserah anda bisa diisi atau anda abaikan.

10. lalu save, dan lihat hasilnya.

Jika ingin membuat di bawah header langkah yang berubah adalah pada langkah ke 8-seterus nya, add gedget nya di bawah header atau bias di atas postingan….. terserah anda

Rating Artikel : 5 Jumlah Voting : 99 Orang Terbaru