Cara membuat slide di Header

Langkah langkah :

1. Buat gambar dengan ukuran yang diinginkan. Jumlahya terserah, yang penting resolusinya harus sama, dalam post ini saya menggunakan contoh tiga gambar dengan resolusi sesuaikan dengan ukuran Header ( pixel. )

2. Setelah itu upload ketiga gambar Keblog Caranya Klik TUTORIAL URL Gambar pada blog 

3. Masuk ke Dasbor >> Edit HTML

4. Letakkan kode css di bawah ini , tepat di bawah css Header 

    #myGallery { width: 980px !important; height: 200px !important; overflow: hidden; } 

5. Langkah selanjutnya copy dan paste kode berikut ini tepat di atas kode </head>:

<script src='http://mimuha.byethost2.com/javascript/mootools.v1.11.js' type='text/javascript'/>
<script src='http://mimuha.byethost2.com/javascript/jd.gallery.js' type='text/javascript'/>
<link href='http://mimuha.byethost2.com/css/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>

6.Lanjut>>

Cari kode title='Featured Post' Pada kode-tersebut (gunakan Ctrl+F lagi ). Dibawah kode tersebut, terdapat kode berikut:

<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

Sekarang ganti kode yang berwarna merah dengan kode berikut:

<div>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($(&#39;myGallery&#39;), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent(&#39;domready&#39;, startGallery);
</script>
<div id='myGallery'>
<div class='imageElement'>
<a class='open' href='Url posting yang ingin ditampilkan'/>
<img class='full' src='URL gambar' />
<h3>Judul Slide 1</h3>
<p>Deskripsi Artikel 1</p>
</div>

<div class='imageElement'>
<a class='open' href='Url posting yang ingin ditampilkan'/>
<img class='full' src='URL gambar' />
<h3>Judul  Slide 2</h3>
<p>Deskripsi Artikel 2</p>
</div>

<div class='imageElement'>
<a class='open' href='Url posting yang ingin ditampilkan'/>
<img class='full' src='URL gambar' />
<h3>Judul Slide  3</h3>
<p>Deskripsi Artikel 3</p>
</div>
</div>
</div>

Perhatikan keterangan yang berwarna BIRU dan hijau sebagai keterangan...

Kalau ingin mengubah ukuran yang lebih besar, ubah  saja ukuran gambar yang di-upload, tapi jangan lupa untuk mengubah ukuran lebar dan tinggi widget (yang berwarna biru) pada kode #myGallery di atas kode </b:skin> tadi.

Termasuk tambah jumlah Sliede tinggal nambahkan kode di atas  <div class='imageElement> s.d </div>

 

Selamat mencoba......