Membuat Gambar Thumbnails Dengan CSS

Membuat Gambar Thumbnails Dengan CSS

Membuat Gambar Thumbnails dengan CSS. HAPIA Mesir bingung ingin memberikan judul yang pas seperti apa. ini hanya perkembangan dari tutorial sebelumnya yaitu Membuat Artikel Translate dengan CSS. akan tetapi sekarang HAPIA Mesir kembangkan untuk digunakan pada gambar atau foto.

Contoh gambar thumbnails dengan CSS adalah gambar berikut :

• 
  • 

Atau :

• Acara Peresmian HAPIA Mesir
  
  • 

Cara membuatnya adalah sebagai berikut :

- Login keBlogger dengan account anda.
- Masuk ke "Tata Letak - Edit HTML" kemudian copy paste code CSS berikut diatas ]]></b:skin> :

#showpic ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#showpic li {
list-style: none;
margin: 0;
padding: 0;
}
#showpic li img, #showpic li img:visited {
color: #333;
display: block;
margin: 0;
width:300px;
background:transparent;
font: bold 13px tahoma, Times New Roman;
}
#showpic li p, #showpic li p:visited {
color: #333;
display: block;
margin: 0;
width:300px;
background:transparent;
font: bold 13px tahoma, Times New Roman;
}
#showpic li li img,#showpic li li img:visited {
background:transparent;
color: #fff;
float: left;
margin: -250px 0 0 100px;
padding: 5px;
border: 1px solid #f0f0f0;
}

#showpic li ul {
z-index: 9999;
position: absolute;
height: auto;
left: -999em;
margin: 0;
padding: 0;
}
#showpic li:hover ul ul,#showpic li.sfhover ul ul, {
left: -999em;
}
#showpic li:hover ul, #showpic li li:hover ul, #showpic li.sfhover ul,#showpic li li.sfhover ul{
left: auto;
}

- Simpan Template.

- Pada kata-kata dalam postingan yang ingin anda translate gunakanlah format berikut :

<ul id="showpic"><li><img style="width: 100px; height: 70px;" src="Link Gambar/Foto yang Nampak pada Posting" border="0" alt="" /><ul><li><img style="width: 400px; height: 300px;" src="Link Gambar/Foto" border="0" alt="" /></li></ul></li></ul>

Atau untuk tulisan yang nampak pada postingan gunakan code berikut :

<ul id="showpic"><li><p>Acara Peresmian HAPIA Mesir</p><ul><li><img style="width: 400px; height: 300px;" src="Link Gambar/Foto" border="0" alt="" /></li></ul></li></ul>

Selamat mencoba dan happy blogging.

salam wigas koplak