Cara Membuat Slide Header Di blog

Dipublikasikan oleh : http://www.cobadibaca.com

6:05:00 PM

Indra Antara

13

Cara membuat gambar slide dengan setting html ini mirip dengan gambar Flash yang dibuat dengan software flash...namun disini tak perlu menggunakan software tersebut...hanya sedikit utak-atik html saja sih...
untuk pemasangan nya adalah sebagai berikut:
- Login ke blogger.com
- Pilih template
- Kemudian pilih Edit html
- Jangan Lupa centang expand widget untuk tampilan html penuh..
- Selanjutnya cari kode </head> ,(gunakan F3 atau dengan Ctrl + F untuk memudahkan pencarian)
- Kemudian masukan code script yang ada dibawah 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: 950,height:144, navigation: false, delay: 5000 }); }); </script>

**> Keterangan : width:950,height:144 adalah ukuran lebar dan tinggi slideshow yang nantinya akan ditampilkan di blog. Tapi Untuk Ukuran ini Terserah masing-masing orang mau seberapa lebar header blog yang dimiliki.. ukuran kecilpun bisa misalkan kita mau memasangnya di sidebar....

• Preview dulu agar yakin penempatannya sudah benar, kalau ada kesalahan penempatan scrip biasanya ada   peringatan tertulis.. sobat tinggal klik clear edit aja supaya gak bingung menghapusnya.

• Kalau Semua script sudah benar.. klik simpan template (save template)

• Langkah selanjutnya adalah Sruput kopi dulu biar gak ngantuk...(gak penting sih)

• Setelah tersimpan.. kita masuk ke area Layout (tampilan)

• Lalu Pilih Add a Gadget(tambahkan Gadget), kalau mau menempatkan di area header pilihlah add gadget    di bawah header.

• Selanjutnya Pilih HTML/Javascript

  

Copy/paste script dibawah ini di area HTML/javascript

<div id='coin-slider'>
<center>
<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR DISINI" />
<span>

ISIKAN KETERANGAN GAMBAR DI SINI BROW

</span>
</a>

<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR DISINI" />
<span>

ISI KETERANGAN gambar DI SINI

</span>
</a>

<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR DISINI" />
<span>

ISI KETERANGAN gambar DI SINI

</span>
</a>

</center>
</div>

<div id='coin-slider'>
<center>
<a href="http://www.cobadibaca.com" target="_blank">
<img src="LINK URL GAMBAR DISINI" />
<span>
Hanya Mencoba untuk Coba Dibaca....
</span>
</a>

<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR ANDA" />
<span>

ISI KETERANGAN GAMBAR DI SINI

</span>
</a>

<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR ANDA" />
<span>

ISI KETERANGAN GAMBAR DI SINI

</span>
</a>

</center>
</div>


Semoga bermanfaat... dan coba dibaca dulu dari awal..

sumber: cobadibaca.com http://www.cobadibaca.com/2013/01/cara-membuat-slide-header-di-blog.html#ixzz31Q5EEIca
Under Creative Commons License: Attribution