Membuat Gallery Foto Slide Show ~ Focus

Membuat Gallery Foto Slide Show

Pada pertemuan yang ke sekian kalinya saya akan berbagi sebuah trik cara membuat gallery foto dengan effects slide show. artinya tampilan gallery foto ini nantinya akan tampil bergerak atau bergeser tampil ke samping, begitu kurang lebihnya tutorial yang akan saya bagikan pada pertemuan ini. Jika anda berminat memasang pada blog gallery foto slide show ini. silahkan simak cara pemasanganya di bawah ini.

Di bawah ini demo tampilan Gallery foto nya :

Yang menginginkan Gallery foto seperti pada halaman ini. silahkan ccopy kode di bawah ini pada artikel baru. Jangan lupa ganti URL foto dan ganti juga nama alt juga nama figaptionya. Di bawah ini kodenya :

<link href="https://googledrive.com/host/0ByCt4ImHojRLNFVoQVREcEhBNmM" rel="stylesheet" type="text/css"/>
<div class="ia-container">
<figure>
<img alt="Focus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidH2Qn9hPWTRkVcpefyAab1wbGmb74UJ6hEqdE3hubEGVQcsvpcjvkGAxLsP4hhXD1InyvyvXaVuafMV9GQE9mmmuWR_Fflv4LCMUa_Mh2dEx2tU4o89Fe3d1pt8z-zku4NhBIvvqIdlwZ/s1600/focus1.jpg" />
<input checked="checked" name="radio-set" type="radio" />
<figcaption>Hijab 1</figcaption>
<figure>
<img alt="Focus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6BPde4b2vURAq1rM7Op_Rfnfu1ElDXrVAPZ-l9pWH-OdrhE8azuodt7cmYE3JwDcUj3eozhTgDE1b20B2NadJv-a7GxHJSNkuaQPIsEIOunnbhNk2E6O0yGUyIDi0HW-RBbuRuCVavLhO/s1600/focus2.jpg" />
<input name="radio-set" type="radio" />
<figcaption>Hijab 2</figcaption>
<figure>
<img alt="Focus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt5sJnKiRuactSf1-ClnYIhlJZ6KJ28aaZf9PFTKKvFEfWz2q8-8BZCxvOCYa2xCrAbFBMsD0j6e0HUG9hpeM1n7EXXE5xQ6GQmNUpsf4kYXSpAN8KEew5Ep5VsECzk9M5XH4XC_cOqM2i/s1600/focus3.jpg" />
<input name="radio-set" type="radio" />
<figcaption>Hijab 3</figcaption>
<figure>
<img alt="Focus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhrMu3RH9NDl0fN9EhgUnBhJkJaJbcZE2EktKqAAAUCjNynJI356GB2EUHj0Vp_B-EnGUvS-5DPatWKKfM3GwHyEeSMNaEAVeLFRLgkz9xToQvsPQMV5JjvOh4GxysZjHczY3tYvjih_l/s1600/focus4.jpg" />
<input name="radio-set" type="radio" />
<figcaption>Hijab 4</figcaption>
<figure>
<img alt="Focus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzpBqNC7ljVxdX3M2XkSZKGTBOlFJWRCn8JAOtZbtPE39zYi_nBOxHCniS30dsoEcJuOpp7qllpBciUFC-dvPlRRKlhsmyAtOXVbE3N1Oaj4qYqm_2JAZ6KKLg6TVRfcZkdMSIJc12KET8/s1600/focus5.jpg" />
<input name="radio-set" type="radio" />
<figcaption>Hijab 5</figcaption>
<figure>
<img alt="Focus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5z1KTvLtfo9te61StL-AmtemHxXGDBlUvoihAR45aBggYfFjXnC-tA5kP02I4mSP42ZvfKcmGzexhgp5usTDDIQRWJmf3ku1EF73bCsVt_bcFa4vT2n0G7jI85SPefzHhKBuCWr1p7MRm/s1600/focus6.jpg" />
<input name="radio-set" type="radio" />
<figcaption>Hijab 6</figcaption></figure>
</figure>
</figure>
</figure>
</figure>
</figure></div>

Setelah kodenya juga URL foto atau gambar dan alt/figcaption. Terpasang sesuai dengan petunjuk tutorial diatas. lalu klik publikasikan artikel baru anda dan coba lihat hasilnya. Jika belum berhasil silahkan baca ulang tulisan post diatas.