Cara Belajar Memasang Gambar di Header Blog Bergantian/SlideShow

Cara Belajar Memasang Gambar di Header Blog Bergantian/SlideShow

 

Kali ini saya mau posting cara membuat gambar berganti-ganti yang letaknya di Header Blog. Dan ini sudah pernah saya coba dan Alhamdulillah berhasil.

Sebenernya saya juga belom tau tutor ini tapi tutor ini saya nyontoh dari bloggerpremiumtemplate.com. Tentun tak ada salahnyakan bila berbagi info dengan yang lain, apa bila dari temen-temen ada tertarik untuk membuat header dengan gambar yang bergantian/slideshow pada template blogspot/blogger, mari kita ikuti tutor di bawah ini:

1.> 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 .

2.>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 -->
------------------------------------------------------------------------------------------------
3.>Dan simpan,bila sukses boleh lihat hasilnya.

CATATAN ;
Lihat dengan teliti tulisan yang berwarna Biru :
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.

Cukup sampai disini aja tutor dari saya

Semoga berhasil dan manfa'at...!