Ehmmm bismilahhirrohmanirronhim. abis iseng - iseng buat caption / keterangan gambar dengan css3 eh ternyata keren juga hasilnya hahahhaha lagi narsis nih, namanya hasil buatan sendiri biarpun jelek pasti terasa keren, gak tau deh kalau bagi masbro dan masmbak semua hehehe nih screenshotnya.
Kenapa saya bilang Keterangan gambar terkeren dengan css3 . . . ? karena keterangan gambar tersebut sangat mudah penggunaanya dan juga simpel banget, pokok'e apik lah hehehhe dari pada
DEMO
Oh iya itu gambar yang di tengah anjing apa kucing ya wkwkwkwkkk, gimana udah di liat belum demonya. . .? ok deh dari pada berlama - lamaan ngomongnya mending langsung praktek
1. Masuk di dasbor blog anda
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Kliik Proceed / Lanjutkan ( editor baru )
5. Cari kode
]]></b:skin>6. Setelah ketemu simpan kode css di bawah ini di atas kode
]]></b:skin>.systemHarga {
margin: 10px 0 0 10px;
padding: 0;
width: 200px;
background: #c4c;
position: relative;
float: left;
border: 3px solid #d00;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.systemHarga img {
width: 200px;
height: 200px;
display: block;
}
.systemHarga::before {
content: attr(title);
position: absolute;
background: #99be00;
background: rgba(204, 255, 0, 0.7);
padding: 5px;
right: 0;
bottom: 0;
color: #000;
left: 0;
text-align: center;
font:normal 11px Arial, sans-serif;
}7. Klik SIMPAN TEMPLATE.
8. Lalu pergi lagi ke Rancangan / Tata Letak.
9. Klik Tambah Gadget
10. Pilih HTML/Javascript
11. Masukan kode di bawah ini di kolom bagian bawah HTHML/Javascript.
<div class='systemHarga' title='Disini Caption Atau Keterangan gambar'> <img src='URL GAMBAR' title='Judul Gambar'/> </div>
12. Silahkan ganti kode HTML nya sesuai petunjuk. Mudah kan gak ribet ini, itu dll. Keterangan / Caption itu juga bisa anda manfaatkan kalau anda misalnya jualan baju Online misalnya anda hanya tinggal nulis Harganya deh disitu, jangan lupa juga ganti judul gambarnya ( untuk SEO pada gambar ), sekian Cara membuat caption / keterangan gambar dengan css3 semoga bermanfaat buat anda para blogger mania dimanapun berada.
