Anda di halaman 1dari 4

Cara Belajar Membuat-Memasang Gambar di Header Blog Bergantian/Slide

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.

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

Anda mungkin juga menyukai