Cara Mudah Membuat Slide Foto Pada Blog

Ingin membuat slide foto sebagai tampilan awal di beranda blog Anda??, dibawah ini ada cara mudah untuk membuat slide foto beserta keterangan di blog sehingga blog anda dapat menampilkan foto atau gambar-gambar yang menarik.

Langkah-langkahnya adalah sebagai berikut :

1. Siapkan beberapa gambar dengan atur ukuran foto sesuai dengan kebutuhan blog anda. 
2. Upload gambar-gambar tersebut di media penyimpanan online (anda dapat menyimpan gambar di blog, facebook, photobucket, picasaweb.google.com,dll). 
3. Catat url link dari masing-masing gambar yang sudah anda upload tersebut. 
4. Masuk / Login ke Blog anda. (Blogger)  
5. Pilih menu "Tata Letak" 
6. >> Klik "Tata Letak" >> Klik "Tambahkan Widget" >> pilih "HTML / JAVASCRIPT". 
7. Masukkan kode script berikut kedalam bidang widget "HTML / Javascript" tersebut.

Kode script 

<!-- Featured Content 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/AVvXsEhET2ivP4LVup_58cCbwmtk_B_0SlVyXvu8rzwiezvxG0_wNn-HFnaoieq-O2PGJnE6ghjFKNjhP0wTPC1Jx2pRlBgjJ6xmigY87TzkN5SqjhRTdR6vJDTSpSqzAJlg0am-nAWdQHdYXAo/s1600/292550_2845517498775_2140768726_n.jpg'/></a> </div> <div class='fp-content-wrap'> <div class='fp-content'> <h3 class='fp-title'> <a href='#'>KETERANGAN FOTO</a> </h3> <p> SUB KETERANGAN FOTO </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/AVvXsEiA14v36ZqJ-o1AbhA6sTe2MP6PF4Kf8tj94GwOgBgcQnBS4J4Joc8g5jO8FezL4L-fO7476RlKcQG3qoLFX9bkcgnqgZkkhwG0koTV8aLzcaHOZr6ecZyE_pAxwg78Ey4SL0TNWWPFUpPf/s320/ASM1.jpg'/></a> </div> <div class='fp-content-wrap'> <div class='fp-content'> <h3 class='fp-title'> <a href='#'>KETERANGAN FOTO</a> </h3> <p> SUB KETERANGAN FOTO </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/AVvXsEis9I7DhpsuCcImenE986mnuCTf30o7OgPKFqiSXDqXIxjPySfIMubbcA2vXXMOFHMUHHknCoC6mitznYRgx3Gbj-ITUI35MH4psd8dMUYhlY2BUqV-rBHI8szgN0V27V_5YXVOK6naLD_L/s320/ASM3.jpg'/></a> </div> <div class='fp-content-wrap'> <div class='fp-content'> <h3 class='fp-title'> <a href='#'>KETERANGAN FOTO</a> </h3> <p> SUB KETERANGAN FOTO </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 --> </div> <div class='fp-nav'> <span class='fp-pager'/> </div> </div> </div> <div style='clear:both;'/> </b:if></b:if> <!-- Featured Content Slider End -->

Keterangan : 

 - Untuk kode Url link Foto/gambar bisa diganti dengan  kode url masing-masing foto/gambar anda yang sudah anda simpan di media penyimpanan online tadi.
  - Untuk Keterangan atau Anak Keterangan Foto/ gambar bisa ditulis dengan keterangan anda sendiri yang sesuai dengan foto/gambar anda.