Contoh dari CSS ini menunjukan bagaimana sebuah animasi panel deskripsi/penjelasan gambar yang dapat bergeser ketika mouse atau krusor diarahkan ke gambar. Gambar ini murni menggunakan CSS3 transisi.
Dengan gambar yang dikemas sedemikian rapih dalam sebuah wadah yang didalamnya disimpan deskripsi dari gambar tersebut.
- Kemudian klik Template -> Edit HTML
- Cari tag / kode ]]></b:skin> tekan CTRL+F untuk memudahkan proses pencarian
- Selanjutnya pastekan kode CSS berikut tepat diatas kode ]]></b:skin>
- Klik Kode CSS di bawah ini:
KODE HTML
- Tambahkan kode HTML berikut didalam postingan (HTML bukan compose) atau anda bisa meletaknnya di gadget HTML/Javascript
- Klik Tata letak -> Tambahkan gadget -> masukan kode didalamnya -> Simpan gadget.
<div class="imagepluscontainer" style="height: 199px; width: 263px; z-index: 2;">
<img src="http://i1087.photobucket.com/albums/j479/jalupangna/kanjengratu2.jpg" />
<br />
<div class="desc">
Menurut cerita Pantun Bogor,Palabuhan Ratu didirikan oleh Nyai Ratu Pu'un Purnama Sari.atau nyai Ratu Purnama Sari/Nyi Roro kidul <a href="http://jalu-pangna.blogspot.com/2012/12/legenda-nyi-mas-ratu-raras-tembang-sakti.html">Nyi Roro kidul</a> Putri Pertama Prabu Sedah Siliwangi dari Istrinya yang ke tujuh, yang saat itu Prabu Sedah Nusia Mulya bertahta di Pakuan Pajajaran Tengah.
</div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; left: 350px; width: 263px;">
<img src="http://i1087.photobucket.com/albums/j479/jalupangna/kanjengratu2.jpg" />
<br />
<div class="desc rightslide">
Menurut cerita Pantun Bogor,Palabuhan Ratu didirikan oleh Nyai Ratu Pu'un Purnama Sari.atau nyai Ratu Purnama Sari/Nyi Roro kidul <a href="http://jalu-pangna.blogspot.com/2012/12/legenda-nyi-mas-ratu-raras-tembang-sakti.html">Nyi Roro kidul</a> Putri Pertama Prabu Sedah Siliwangi dari Istrinya yang ke tujuh, yang saat itu Prabu Sedah Nusia Mulya bertahta di Pakuan Pajajaran Tengah.
</div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; width: 263px;">
<img src="http://i1087.photobucket.com/albums/j479/jalupangna/kanjengratu2.jpg" />
<br />
<div class="desc upslide">
Menurut cerita Pantun Bogor,Palabuhan Ratu didirikan oleh Nyai Ratu Pu'un Purnama Sari.atau nyai Ratu Purnama Sari/Nyi Roro kidul <a href="http://jalu-pangna.blogspot.com/2012/12/legenda-nyi-mas-ratu-raras-tembang-sakti.html">Nyi Roro kidul</a> Putri Pertama Prabu Sedah Siliwangi dari Istrinya yang ke tujuh, yang saat itu Prabu Sedah Nusia Mulya bertahta di Pakuan Pajajaran Tengah.
</div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; left: 350px; width: 263px;">
<img src="http://i1087.photobucket.com/albums/j479/jalupangna/kanjengratu2.jpg" />
<br />
<div class="desc leftslide">
Menurut cerita Pantun Bogor,Palabuhan Ratu didirikan oleh Nyai Ratu Pu'un Purnama Sari.atau nyai Ratu Purnama Sari/Nyi Roro kidul <a href="http://jalu-pangna.blogspot.com/2012/12/legenda-nyi-mas-ratu-raras-tembang-sakti.html">Nyi Roro kidul</a> Putri Pertama Prabu Sedah Siliwangi dari Istrinya yang ke tujuh, yang saat itu Prabu Sedah Nusia Mulya bertahta di Pakuan Pajajaran Tengah.
</div>
</div>
KETERANGAN:
- Ganti warna kuning pada script diatas dengan URL/Link Gambar anda
- Ganti warna merah muda pada script diatas dengan deskripsi (penjelasan) gambar anda
- Anda bisa memilih salah satu dari 4 posisi panel deskripsi gambar sesuai dengan selera anda. Kalau mau salah satunya saja anda cukup menambahkan dari kode/tag <div class...sampai tag </div>
- Ukuran gambar yang akan di deskripsikan adalah tidak lebih dari 263x199 pixel
Happy Blogging...!
keren nihh buat mempercantik blog...
BalasHapusJangan Lupa Mampir ke Blog Sederhana saya..
Salam Blogwalking.. :D
Terima kasih banyak atas apresiasinya, saya masih tahap belajar mas, belum profesional. Insya Allah nanti saya blogwalking ke blog anda. Salam kenal.. :)
Hapusapa kita tidak bisa membuat kode css nya sendiri?
BalasHapusBisa saja sob, kita buat script code CSS nya. Akan tetapi jujur saya masih dalam tahap pembelajaran mengenai hal itu karena basicly saya bukan profesional di bidang programmer atau IT. Terima kasih atas kunjungannya.. :)
Hapus