Pada hari
ini Lenux 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.
Berikut adalah caranya
Mempersiapkan gambar
1. Pertama anda siapkan gambar, atau
URL gambar. Untuk mendapatkan URL gambar anda bisa mengklik
Disni2. Untuk saran saya, sebaiknya anda menyiapkan gambar yang besar.
Memasang Slide show
1. Login ke blog
2. Template--> edit html
3. Cari kode berikut
4. Pastekan kode dibawah ini, letakkan di bawah kode diatas
<!-- Diandiki blogspot Slider Started -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidMeX9j7zSbDntWocnqknE0ukgm6Drb-lP646GdUDqhb6ENjiI43LcYv5LYka5Sdt1xdkU7WusBUkr-ZMMRmEvDQXWnTa-EfWUUVNTWcRuSA246TuvI6ccuU8D68LYHpmVz86WJkHly1_p/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnsvgCBPvYABkkaILEcZKvuQj1Rjoy3h3ZpR9udjDgDGrwqa94jvUdfiKmoo5SymgpiuCsjiIHhgTozeAGMkqRxkn3v1KzI08zg0j7AsGS8WYAmQHTnGGLueCxp6qKSdaRqXITamUn88L9/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUp_ZSHGdYozX4g5Kpg22VctsY9Satjq9J0ZNy7Zeop0MVGbnf0sJ9wzBo_y4J95H1yD9F8gizVyqlWgnZsamYYboZQlvoPojMMdpWTIgnf7Hc8R9H59e7gJFIf9pK51wnkR5b-Kr1U_uJ/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
SemogaBermanfaat!^o