JODY WORLD | TUTORIAL BLOG
 |
| http://jodyworld.id-fb.com/ |
Karena banyak yang request ke saya, jadi postingan kali ini untuk menjawab pertanyaan tersebut.
Udah pada tau kan slider/ slide show itu? itu loh yang kaya saya punya di
HomePage Blog Ini.
yang ada kata-katanya itu loh ssama gambar. noh yang backgroundnya gambar diatas :) .
Mau?
gampang kok.
1. Seperti Biasa pergi ke
tata letak > Tambah gadget (diatas "Post")> Html/JavaScript.
2. Copy Script dibawah ini :
<!-- Featured Content Slider Started -->
<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/AVvXsEgf1XJ8FxA13ecmkCADoZUnh3U8R4ty-QCgjv_FE5vCjDKxYnel2zULmm9bPDCZ8gzB2XBmuJuoak7aDGT1O6mKqQMQZjW-9iUd7dGNwOGcXmGZVC6oz-E_nRVMtuS2Qp390ppgziRFsjZu/s1600/1.jpg
"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Ini Bagian Judul ..ganti dengan judul anda :) # By JFS 1 title</a>
</h3>
<p>
Masukan Kata-kata anda disini #Membuat SlideShow by JodyWorld
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</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/AVvXsEjuYdbjoh1R8G8J_-UFkm7cdfWcTGqGyJPiVI1MAuddK0aLZ9HxJiF-KuhP-qdEDPaDjOS5lmzMRXCTg7NnryuoLsrfNWY-C1gVBLCO3ateSJf4h_7GZVmldm8ccEmI1puQc61-CGqrui4J/s1600/2.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Ini Bagian Judul ..ganti dengan judul anda :) # By JFS 2 title</a>
</h3>
<p>
Masukan Kata-kata anda disini #Membuat SlideShow by JodyWorld
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</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/AVvXsEhdm-bFPRdU4fDtkeIsM4yl56kPPIx55-B_vnD2lo4IqPIMKmAOryVTPd60ez20YiTU_-aRYqqbjD5ELvOC9DHAzgdQhK5cNW4bPKiu88Om8AsHhcBUN0Y_JBThpmHLwX61yj9lUtPk3VQ1/s1600/3.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Ini Bagian Judul ..ganti dengan judul anda :) # By JFS 3 title</a>
</h3>
<p>
Masukan Kata-kata anda disini #Membuat SlideShow by JodyWorld
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 3 Code End -->
<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6B4KLji2K2NFHoUKEiWPcrwA704WdRGhJTkxPOiDPCTBqFtXFXqFm3kd5gEQj7VQ4KpRzSUAwK-vqDdWEKbNNRwkiaC43vCga1cuJeJAOPJR7jX8MVVK26m4tXiHgDRRHZs-rigcveC9l/s1600/4.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Ini Bagian Judul ..ganti dengan judul anda :) # By JFS 4 title</a>
</h3>
<p>
Masukan Kata-kata anda disini #Membuat SlideShow by JodyWorld
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 4 Code End -->
<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjJTbhBQJEHLOPNPw1Loj86oLSo-nrmrtYrQ_hJGFtLJQ78l50RpdYLJIKQrkVQYwFq8xwRJRb3oR3LMYFGX1gfFjCaGKWftrm53ZXu3t4RATDiDMhvkm95jW-ricXcoJtgmevbAJW0Op/s1600/5.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Ini Bagian Judul ..ganti dengan judul anda :) # By JFS 5 title</a>
</h3>
<p>
Masukan Kata-kata anda disini #Membuat SlideShow by JodyWorld
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 5 Code End -->
</div>
<div class='fp-nav'>
<span class='fp-pager'/>
</span></div>
</div>
</div>
<div style='clear:both;'/>
<!-- Featured Content Slider End --></div>
Note : Ganti kata yang berwarna merah dengan kata-kata anda sendiri :)
3. Simpan dan lihat hasilnya :)
Semoga bekerja :D Kalo belom keluar tanya aja mas Jody
Title : Membuat Slider / Slide Show di Blog
Description : JODY WORLD | TUTORIAL BLOG http://jodyworld.id-fb.com/ Karena banyak yang request ke saya, jadi postingan kali ini untuk menjawab pert...