Menampilkan Image dalam Efek Zoom Image(refisi)

Diposting trik blogger terdahulu banditz telah menulis tentang Menampilkan Image dalam Efek Zoom Image. Dimana pengkodeannya menggunakan CSS .Selanjutnya tinggal bagaimana trik menambahkan kode css dalam kode tersebut. Betulkan... Seandainya banditz jeli mengamati kode Image dalam Efek Zoom Image tersebut, mungkin ini tidak akan menjadi sebuah posting. Ternyata ada hikmahnya juga, karena faktor ketidaktelitian tersebut he..he..he.. Banyak sekali yang meneror saya via hp "mas kenapa kalau image zoom ya di klik kok masuk blogger login" ..... tus datang lagi aan20" Mas kok bisa gini sehh" wahh akhirnya banditz menuju ruang beda operasi dan melakukan bedah heheheheh all hasil harus ada pembedahan genetik ulang dan hasilnya




Cara membuatnya adalah sebagai berikut :
1. Login keBlogger dengan account anda.
2. 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.

untuk gambar :

• 
  • 

codenya

<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 :

• jhon badnitz

  • 

kodenya :

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

• 
  •