Rabu, 05 Juni 2013

Cara membuat zoom Image yang melayang saat gambar disentuh mouse


Scholovers Blogger | Cara membuat zoom Image yang melayang saat gambar disentuh mouse,  yaitu dengan masuk ke Edit HTML/rancangan HTML,  cari kode </head> letakkan kode di bawah ini di atas kode </head> lalu save:
<script src='http://semipedia.googlecode.com/files/semipedia-overview-zoomimage.js'type='text/javascript'/>
<script src=' http://semipedia.googlecode.com/files/ZoomimagePreview.js' type='text/javascript'/>
<style type='text/css'>
#preview{
  position:absolute;
  border:2px solid #fff;
  background:# 959595;
  padding:11px;
  display:block;
  color:#000;
  font-weight:bold;
  text-align:center;
}
</style>
Setelah selesai masukkan gambar pada postingan anda masukkan kode HTML di Bawah ini di post HTML

 
<div dir="ltr" style="text-align: left;" trbidi="on">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a class="preview" href="http://www.blooger.co.id"><p><img src="http://s22.postimg.org/brou1od1t/Scholovers_Logo.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;" title="black green"><img alt="black green" border="0" height="320" src="http://www.blooger.co.id"><p><img src="http://s22.postimg.org/brou1od1t/Scholovers_Logo.png" width="212" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br />
Black Green</td></tr>
</tbody></table>
Ganti warna merah dengan URL gambar anda, dan ganti warna biru dengan title gambar tersebut. hasilnya akan seperti gambar di bawah di atas. Semoga berhasil.


Berkomentarlah dengan sopan dan tidak menggunakan Link aktif. EmoticonEmoticon

Diberdayakan oleh Blogger.