Cara membuat image Zoom Dengan Tambahan Tekt

Tidak ada komentar

Silahkan Login dan masuk di akun blogger anda

lalu klik Rancangan dan klik Edit HTML
Centang Expand Template Widget
Untuk mempermudah pencarian kode HTML nya anda tekan aja ( CTRL + F )
Cari kode </head> dan kalau sudah ketemu
Lalu silahkan Tambahkan kode dibawah ini tepatnya diatas kode </head>

<script type="text/javascript">
// for free JavaScript tutorials and scripts
// This notice must stay intact for use
var popbackground="lightskyblue" //specify backcolor or background image for pop window
var windowtitle="Image Window" //pop window title
function detectexist(obj){
return (typeof obj !="undefined")
}
function jkpopimage(imgpath, popwidth, popheight, textdescription)
{
function getpos(){
leftpos=(detectexist(window.screenLeft))? screenLeft+document.body.clientWidth/2-popwidth/2 : detectexist(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
toppos=(detectexist(window.screenTop))? screenTop+document.body.clientHeight/2-popheight/2 : detectexist(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
leftpos-=screenLeft
toppos-=screenTop
}
}
getpos()
var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,left='+leftpos+',top='+toppos
var bodyattribute=(popbackground.indexOf(".")!=-1)? 'background="'+popbackground+'"' : 'bgcolor="'+popbackground+'"'
if (typeof jkpopwin=="undefined" || jkpopwin.closed)
jkpopwin=window.open("","",winattributes)
else{
//getpos() //uncomment these 2 lines if you wish subsequent popups to be centered too
//jkpopwin.moveTo(leftpos, toppos)
jkpopwin.resizeTo(popwidth, popheight+30)
}
jkpopwin.document.open()
jkpopwin.document.write('<html><title>'+windowtitle+'</title><body '+bodyattribute+'><img src="'+imgpath+'" style="margin-bottom: 0.5em"><br />'+textdescription+'</body></html>')
jkpopwin.document.close()
jkpopwin.focus()
}

</script>

Dan simpan code di bwah ini di body atau di html kamu ( Lihat gambar )

<a href="#" onClick="jkpopimage('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5PJFvqm8mkoeKIgyK_HG8ywzWmkOweVBMBimfiOwWNKLjy7fww6F4t5jEb9hCSvHQuZAIFawc-rftE5yJkaxjmZFkDqakSrHx30XDysURWu3Lv7gT57n8RopVf2AYYq1UvbcsMr_tDwmj/', 325, 445, 'Hasil contoh'); return false">Clik di sini</a>

Note:

# = Link Url Tujuan

Ganti tulisan warna biru dengan url gambarmu

325, 445 = tinggi dan lebar

Ganti Tulisan warna merah sesuai kebutuhan

Jika Kurang Mengerti Silahkan Hubungi Kami

Contoh:

Clik Di sini

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )