Senin, 07 Mei 2012

Membuat slide Header


Header Slide Keterangan width:930,height:140
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

Tidak ada komentar:

Posting Komentar