Tutorial Gambar Di Zoom Apabila Di Klik
Dah lama tak buat tutorial dan kesempatan ni D'ya minta maaf sangat-sangat kalau D'ya ada terlepas tutorial yang direquest sebab terlalu banyak sangat dan jalan penyelesaian yang paling mudah ialah dengan search je tutorial di Google. Tutorial kali ini ialah tutorial gambar di zoom apabila di klik.Tutorial ni bagus sangat untuk blogger dan yang paling penting memudahkan orang lain klik gambar tanpa membuka new tab dan menunggu loading yang lama untuk melihat gambar.Untuk lebih paham lagi, sila klik gambar di bawah.
Mudah sahaja tutorial ni,jom ikut :)
(1) Pergi ke dashboard >> design >> edit HTML
(2) Cari code di bawah ini.Sila picit ctrl+f untuk search code berikut.
</head>(3) Copy code di bawah dan pastekan di ATAS code </head>
<script src='http://highslide.com/highslide/highslide-full.js' type='text/javascript'/>
<link href='http://highslide.com/highslide/megik.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.allowSizeReduction = false;
hs.showCredits = false;
hs.isUnobtrusiveAnchor = function(el) {
if (el.href && /\.jpg$/.test(el.href)) {
el.className = 'highslide';
return 'image';
}
//insert the if condition code for other extensions like .jpeg, .gif, .png etc.
}
function fixBloggerImages(searchFor, replaceWith) {
var href;
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++) {
href = anchors[i].href;
if(href.indexOf(searchFor) != -1) {
anchors[i].href = href.replace(searchFor, replaceWith);
anchors[i].setAttribute("onclick", "return hs.expand(this)");
anchors[i].setAttribute("class", "highslide");
anchors[i].setAttribute("title", "Click to enlarge");
}
}
}
//]]>
</script>
(4) Yang terakhir previes dan save! Mudah sahaja kan?
9 marshmallow komen