Siang ini saya akan memberikan suatu Trik and Tip yang sangat sederhana meskipun cuacanya agak panas. tapi semangat untuk berbagi kesahabat blogger tetap berjalan sebagaimana mestinya.
Nah Trik kali ini Cara Membuat Galeri Foto dengan CSS, Mungkin ada sahabat yang masih belum tau bagaimana cara membuatnya. Santai...Santai....Santai (Kata Bung Rhoma) Lora Malunk Akan memberikan Trik dan Tipnya.
Lihat Dulu dan di teliti Cewek-cewek dibawah ini. ada yang menarik. Silahkan Diklik Fotonya.
Kalau Sudah Melihat DEMONYA, Langsung saja :
Langkah 1
Copy Paste Kode dibawah ini ke Gadget (HTML/JavaScript), Bisa juga di pasang ke dalam Postingan.
<html>
<head>
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="Lora-malunk_big.htm">
<img src="klematis_small.jpg" alt="loramalunkblog" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="Lora-malunk_big.htm">
<img src="klematis2_small.jpg" alt="loramalunkblog" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="Lora-malunk_big.htm">
<img src="klematis3_small.jpg" alt="loramalunkblog" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="Lora-malunk_big.htm">
<img src="klematis4_small.jpg" alt="loramalunkblog" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
Langkah 2
Ingat...! Jangan asal Copy Paste dibaca dan diteliti dulu sebelum anda melakukan Trik ini.
Langkah 3
Tulisan yang saya cetak TEBAL anda ganti
1. Yang Berwarna Hitam : Ganti dengan URL Iklan/Postingan anda
2. Yang Berwarna Biru : Ganti dengan URL Gambar
3. Yang Berwarna Merah : Ganti description sesuka anda
+ komentar + 4 komentar
keren bngt sobat galeri css ini, jadi kepengen pasang juga di blog sobat,,,
Terimakasih Unknown atas Komentarnya di Membuat Galeri Foto Dengan CSSMantab kali kawan tipsnya !
Terimakasih Prapatan Kertek atas Komentarnya di Membuat Galeri Foto Dengan CSSKalau mau mengatur jarak (tampilan) antar gadget yg kita gunakan dalam template? Thx
Terimakasih Ririe Khayan atas Komentarnya di Membuat Galeri Foto Dengan CSStukar link sobat
Terimakasih Unknown atas Komentarnya di Membuat Galeri Foto Dengan CSSPosting Komentar
Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :
» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi
Terima Kasih .... Lora Malunk Blog