Cara Membuat Slide Show Gambar di Blog

Pada sore hari ini saya akan mennyapaikan Turitorial pendaek bagaimana Cara mebuat slide show gambar di blog . Fungsi dari slide show ini adalah untuk menampilkan gambar pilihan kita.

Slide show ini berbeda dengan slide show biasanya, karena slide show ini berada diatas postingan blog dan berukuran besar untuk demonya anda bisa melihatnya.

Demo

Berikut adalah caranya 

Mempersiapkan gambar

1. Pertama anda siapkan gambar, atau URL gambar. Untuk mendapatkan URL gambar anda bisa mengklik Disni

2. Untuk saran saya, sebaiknya anda menyiapkan gambar yang besar.

Memasang Slide show

1. Login ke blog

2. Template--> edit html

3. Cari kode berikut

<div id='main-wrapper'>

4. Pastekan kode dibawah ini, letakkan di bawah kode diatas

<!-- Diandiki blogspot 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='http://1.bp.blogspot.com/-cuv5QQkMV-U/UdmRVYPKJDI/AAAAAAAAA5k/gVRUJ5j3bXY/s1600/diandiki+banner.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Diandiki Blogspot</a>
</h3>
<p>
  Diandiki blogspot, blog ilmu pengetahuan, dan turitorial blogger --> http://diandiki.blogspot.com
</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='http://2.bp.blogspot.com/-bov2AF2rFEs/Ud9ikOpQm6I/AAAAAAAAAZc/CfQA9MZfpD0/s461/coollogo_com-23487472.png'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Info kuaci</a>
</h3>
<p>
  Kumpulan artikel, cerdas dan unik ---> http://infokuaci.blogspot.com
</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='http://2.bp.blogspot.com/-UdZsQsRitFU/UZtkF0FbJHI/AAAAAAAAARk/riCP84yyfH0/s400/mesjid+agung.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Masjid agung sawahlunto </a>
</h3>
<p>
Masjid yang dulunya merupakan sebuah PLTU
</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='http://indonesia.travel/public/media/images/upload/poi/sumbar_sawahlunto.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>I love Sawahlunto</a>
</h3>
<p>
Saya cinta kota saya, Sawahlunto
</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='http://static.pulsk.com/images/2013/07/07/80721a32e66cf34c202e0f0686f837bd.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>I love Indonesia</a>
</h3>
<p>
Saya sangat mencintai produk indonesia
</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>

<!-- Diandiki Blogspot Content Slider End -->

4 Ket:

• Warana merah anda ganti dengan URL foto anda
• Warna biru anda ganti dengan judul foto slide show anda
• Warna hijau anda ganti dengan deskripsi foto slide show anda

5. Anda pratinjau terlebih dahulu
6. setalah anda pratinjau , dan cocok dengan keinginan anda , simpan

SELESAI