Cara Membuat Tulisan Pada Gambar | Keterangan Pada sebuah Gambar yang di upload ke Blog akan sangat berguna bagi para pengunjung untuk mengetahui penjelasan tentang Gambar tersebut. Nah
Sekarang SIMPANGblogger akan mencoba share Cara Membuat Keterangan Pada Gambar Dengan Css, Dimana kita akan mencoba menampilkan Keterangan Pada Gambar dengan gaya hover saat pointer mouse berada pada Gambar tersebut.
Tampilan Gambar pun akan semakin menarik karena Keterangan Gambar akan muncul apabila Pointer Mouse berada pada Area Gambar tersebut. Efek hover yang di berikan pun cukup cantik untuk dilihat karena efek hover ini akan bergerak dari bawah keatas.
Sahabat SIMPANGblogger ingin memasang nya silahkan ikuti langkah nya dibawah ini.
2. Untuk membuat caranya mudah tinggal pilih Rancangan >> Edit HTML
3. Lalu cari kode ]]></b:skin> dan copykan kode CSS dibawah ini diatas nya.
#gambar {
float: left;
margin: 10px;
overflow: hidden;
position: relative;
}
.ket {
width: 80%;
height: auto;
text-align: left;
padding: 5px 10px;
background: #000;
opacity: 0.6;
color: #fff;
line-height: 18px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
-webkit-border-radius: 0x 25px 0px 0px;
-moz-border-radius: 0px 25px 0px 0px;
-o-border-radius: 0px 25px 0px 0px;
border-radius: 0px 25px 0px 0px;
}
#gambar .ket {
position: absolute;
bottom: 0;
left: 0;
margin-bottom: -300px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#gambar:hover {
-webkit-box-shadow:0px 0px 25px #000000;
-moz-box-shadow:0px 0px 25px #000000;
-o-box-shadow:0px 0px 25px #000000;
box-shadow:0px 0px 25px #000000;
}
#gambar:hover .ket {
margin-bottom: 0px;
}
4.Silahkan Pratinjau dulu sebelum disimpan/save ,Kalau tidak ada masalah lalu simpan tempelat/savefloat: left;
margin: 10px;
overflow: hidden;
position: relative;
}
.ket {
width: 80%;
height: auto;
text-align: left;
padding: 5px 10px;
background: #000;
opacity: 0.6;
color: #fff;
line-height: 18px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
-webkit-border-radius: 0x 25px 0px 0px;
-moz-border-radius: 0px 25px 0px 0px;
-o-border-radius: 0px 25px 0px 0px;
border-radius: 0px 25px 0px 0px;
}
#gambar .ket {
position: absolute;
bottom: 0;
left: 0;
margin-bottom: -300px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#gambar:hover {
-webkit-box-shadow:0px 0px 25px #000000;
-moz-box-shadow:0px 0px 25px #000000;
-o-box-shadow:0px 0px 25px #000000;
box-shadow:0px 0px 25px #000000;
}
#gambar:hover .ket {
margin-bottom: 0px;
}
6. Untuk bisa menampilkannya pada Gambar sahabat harus membuat postingan baru lalu masukan kode dibawah ini didalam isi postingan yang akan dimasukan Gambar Lihat Script dibawah ini.
<div id="gambar">
<img src="url Gambar" />
<div class="ket">
<b>JUDUL</b><br />
Isi dari keterangan Gambar Disini
</div>
</div>
<img src="url Gambar" />
<div class="ket">
<b>JUDUL</b><br />
Isi dari keterangan Gambar Disini
</div>
</div>
7. Ganti Url Gambar dengan Url Gambar milik sahabat, Ganti JUDUL dengan Judul Gambar, Ganti Isi dari keterangan Gambar Disini dengan Keterangan Gambar
8. Save dan lihatlah hasilnya
Nah itulah Cara Membuat Keterangan Pada Gambar Dengan Css yang dapat SIMPANGblogger share Cara ini sedang hit di Google Plus, semoga dapat bermanfaat, kurang lebihya mohon untuk dimaklumi. sekian dan terimakasih.
klo membuat keterangannya langsung lewat postingan gimana caranya sob..
BalasHapusthank sebelumnya.
Kalau mau membuat keterangan digambar lewat posting banyak caranya salah satunya klik gambar lalu klik Add caption tinggal ganti deh selesai terimakasih kinjungan nya
HapusMantaf gan, hasilnya bagus dan profesional kelihatannya.. hanya masih perlu belajar atus postingan lewat HTML, soalnya biasanya di Compose, tapi lama-lama bisa jua insyaAllah.. trimakasih banyak...
BalasHapusOk Berarti sobat sudah bisa memperaktekan nya diblog sobat Alhamdulilah salam kenal saja ...
BalasHapusmakasih infonya :)
BalasHapusSama sama semoga bermanfaat salam kenal..
BalasHapusketerangan tanpa gambar, ibarat sayur tanpa garam, iya gak gan? hehhe...
BalasHapusmakasih tutorialnya
Kalau biar gambarnya bisa di letakan banyak dan bersebelahan gimana yaa gan? Mohon bantuannya
BalasHapuskalau cara agar caption nya itu ada di dalam gambar gimana caranya? tapi captionnya itu berupa link jadi gambarnya gak secara keseluruhan berupa link kaya tampilan hipwee sekarang yang artikel2 baru
BalasHapusKalau mau nampilin tanpa disentuh coursor gimana?
BalasHapusSoalnya saya mau munculin Size file, untuk blog download?