Highslide pada gambar

Highslide adalah apabila imej gambar yang bersaiz kecil bertukar menjadi saiz yang lebih besar tanpa perlu ke file host imej tersebut ataupun membuka page yang baru. Imej akan dipaparkan pada blog.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML. Seterusnya (/) pada kotak Expand Widget Templates.

Langkah 2

Pada keyboard, tekan Ctrl+F dan taipkan kod pada ruang Find dan tekan Enter.

Langkah 3

Salin kod berwarna kuning di bawah dan pastekan di bawah kod (lihat langkah 2).

<script src='http://nescafeais.fileave.com/highslide.js' type='text/javascript'></script>
<link href='http://nescafeais.fileave.com/highslide.css' rel='stylesheet' type='text/css'/>
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://nescafeais.fileave.com/highslide-ie6.css" /> <![endif]-->
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://nescafeais.fileave.com/grafik/';
hs.wrapperClassName = 'borderless';
hs.allowSizeReduction = false;
hs.showCredits = false;
hs.registerOverlayundefined{
html: '<div class="closebutton" onclick="return hs.closeundefinedthis)" title="Close"></div>',
position: 'top right',
fade: 2
});
hs.isUnobtrusiveAnchor = functionundefinedel) {
if undefinedel.href && /\.jpg$/.testundefinedel.href)) {
el.className = 'highslide';
return 'image';
}
}
//]]>
</script>

Langkah 4

Seterusnya klik save . Nak check klik preview dulu k... kalau takder error.. ok la tue

Langkah 5

Salin kod berwarna biru dibawah dan pastekan pada post. Gantikan pada perkataan masukkan url image pada kod tersebut kepada url image anda.

<a class="highslide" href="masukkan url image" onclick="return hs.expandundefinedthis)"><img border="0" height="130" src="masukkan url image" title="Klik untuk 'resize'" width="100" /></a>

p/s: sumber dari maribinablog.blogspot.com