Kali ini saya mau share yang saya dapat dari bloggerpremiumtemplate.com cara membuat gambar berganti-ganti yang letaknya di Header /tepatnya di bawah judul blog. Dan ini sudah pernah saya coba dan jadi.

Karena saya pun belum mengerti benar kode-kodean kaya begini,maka ini saya hanya share saja (bahasa halusnya-'saya cuma nyontek').

Sebab saya pernah mencobanya dan berhasil,sepertinya tak ada salahnya bila berbagi info dengan yang lain (tentunya sama yang belum tahu juga),yang mungkin tertarik untuk membuat header dengan gambar yang bergantian/slide pada template blogspot/blogger.

Caranya :
>Masuk ke "dashboard" blog anda, lalu untuk jaga-jaga terjadi kesalahan baiknya didownload dulu tempalte anda yang sekarang dan simpan,kemudian klik "rancangan",klik "edit Html",centang kotak kecil dipojok atas kanan kotak HTML .

>Setelah itu cari kode <div id='content-wrapper'> ,(biar mudah carinya pakai Control F) dan kopi kode scrip di bawah ini lalu tempelkan pas di bawah kode <div id='content-wrapper'>.
------------------------------------------------------------------------------------------------
<!-- Featured Content Slider Started -->

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

<div class='fp-slider clearfix'>
<div class='fp-slides-container clearfix'>

<div class='fp-slides'>

<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='###'><img src='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 1 Code End -->

<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='###'><img src='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 2 Code End -->

<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='###'><img src='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 3 Code End -->

<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='###'><img src='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 4 Code End -->

<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='###'><img src='URL GAMBAR ANDA'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='###'>JUDUL KETERANGAN</a>
</h3>
<p>
Keterangan gambar anda
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 5 Code End -->

</div>

<div class='fp-nav'>
<span class='fp-pager'/>
</div>

</div>
</div>
<div style='clear:both;'/>

</b:if></b:if>

<!-- Featured Content Slider End -->
------------------------------------------------------------------------------------------------
>Dan simpan,bila sukses boleh lihat hasilnya.

CATATAN ;
Lihat dengan teliti tulisan yang berwarna hijau :
1. ### -pagar 3 x masukan Url yang anda kehendaki mau dituju.
2. URL GAMBAR ANDA -Isi dengan url gambar anda yang telah disimpan seperti di google picasa atau situs yang lainnya.
3. JUDUL KETERANGAN - Tulis judul keterangan yang sesuai dengan url yang hendak dituju.
4. Keterangan gambar anda - Isi deskripsi singkat untuk url yang dikehendaki.

Untuk Contoh bisa di lihat di sini,cuma bedanya yang buat contoh gambarnya di atas postingan. Kalau kepengin sperti yang di contoh letakn kode scrip tadi di bawah kode ini

<div id='main-wrapper'>.

Semoga jadi,berhasil dan dimudahkan,tanks telah mampir !*****

Leave a Reply