Menganti slide show bawaan template

Cara Mengganti Gambar Pada Slider

Posted on May 22, 2011

Pada template bawaan seperti Rival tentunya template tersebut menyediakan komponen slider untuk mempercantik tampilan blog. Berbentuk seperti slide show dari beberapa gambar , tentunya akan membuat tampilan blog kita lebih bervariasi. Berikut ini adalah cara mengganti gambar pada slider tersebut :

1. Dashboard -> Design -> Edit HTML

2. CTRL + F lalu search Slider dan anda akan menemukan koding seperti dibawah ini :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='featuredposts clearfix'>

<div class='fp-slides'>

<div class='fp-post'>
<div class='fp-thumbnail'>
<a href='post-1-url-here'><img src='http://aaa.com/xxx.jpg'/></a></div>
<h3 class='fp-title'><a href='post-1-url'>featured post 1 title</a></h3>
<p>Now replace these sentences with your own descriptions.</p>
</div>

Keterangan:

Tentukan terlebih dahulu ukuran slide show dengan cara membuka linkhttp://aaa.com/xxx.jpg pada contoh diatas agar gambar anda nantinya pas dengan ukuran slider yang bersangkutan

<a href='post-1-url-here'>

Sisipkan link dari gambar yang bersangkutan, dalam contoh ini saya akan menggunakan logo dari jurusan saya yaitu HIMSISFO maka saya akan mensisipkan link http://himsisfo.net

<img src='http://aaa.com/xxx.jpg'/></a></div>

Sisipkan link dari gambar anda yang sudah di hosting terlebih dahulu. Saya akan mensisipkan link http://img202.imageshack.us/img202/8883/himsisfo.jpg 

<h3 class='fp-title'><a href='post-1-url'>featured post 1 title</a></h3>

Koding diatas merupakan komponen slider bagian keterangan perslide. Pada ‘post-1-URL‘ saya akan mensisipkan link yang bersangkutan dan pada featured post 1 title akan saya ganti menjadi judul dari slide tersebut.

<p>Now replace these sentences with your own descriptions.</p>

Ganti kata-kata diatas menjadi deskripsi dari slide anda.

3. Jika tahap diatas sudah selesai, maka pastikan kodingan anda kurang lebih sperti dibawah ini :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='featuredposts clearfix'>

<div class='fp-slides'>

<div class='fp-post'>
<div class='fp-thumbnail'>
<a href='http://himsisfo.net'>
<img src='http://img202.imageshack.us/img202/8883/himsisfo.jpg'/></a></div>
<h3 class='fp-title'><a href='http://himsisfo.net'>Himsisfo</a></h3>
<p>HIMSISFO adalah himpunan mahasiswa jurusan Sistem Informasi.</p>
</div>

3. Lakukan hal yang sama untuk slide yang ke dua dan seterusnya
4. Slide anda sudah siap ditampilkan