langsung aja ke pembahasannya Membuat Gambar Thumbnails Dengan CSS
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
"
Written by risky
We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.
0 komentar:
Posting Komentar