Membina fungsi Highslide pada image

Highslide adalah suatu fungsi dimana ianya akan memaparkan imej gambar yang bersaiz kecil kepada saiz yang lebih besar tanpa perlu ke file host imej tersebut ataupun membuka page yang baru. Imej akan dipaparkan pada blog. Anda boleh melihat contoh di blog sdr Izanuddin. Imej juga boleh di drag di atas paparan blog.

Untuk membina fungsi highslide ini, ikut beberapa langkah yang ditunjukkan di bawah:

p/s: Sila save dahulu script template sebelum membuat editting.

Langkah 1

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

Langkah 2

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

Langkah 3

Salin kod berwarna biru di bawah dan pastekan di bawah kod <Head> (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.registerOverlay({
    html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
    position: 'top right',
    fade: 2
});
hs.isUnobtrusiveAnchor = function(el) {
    if (el.href && /\.jpg$/.test(el.href)) {
        el.className = 'highslide';
        return 'image';
    }
}
//]]>
</script>

Langkah 4

Seterusnya klik Preview dan jika tiada mesej Error yang keluar, klik saja save.

Langkah 5

Salin kod berwarna merah 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.expand(this)"><img border="0" height="130" src="masukkan url image" title="Klik untuk 'resize'" width="100" /></a>

Contoh:

<a class="highslide" href="http://3.bp.blogspot.com/_LZtXSNcp76A/Stsj8pqTJkI/AAAAAAAAAcg/6Idkf_TH2mA/s320/nescafe+ais.jpg" onclick="return hs.expand(this)"><img border="0" height="130" src="http://3.bp.blogspot.com/_LZtXSNcp76A/Stsj8pqTJkI/AAAAAAAAAcg/6Idkf_TH2mA/s320/nescafe+ais.jpg" title="Klik untuk 'resize'" width="100" /></a>


p/s: 1.Canggih bukan? Gua tak tau apa faedahnya gambar boleh di drag kat atas blog.
2. Gua belum cuba lagi pada template classic. Siapa-siapa yang dah cuba, sila respon kat gua yer.
3. Tutorial ni gua buat khas untuk Sdr Izanuddin. Beliau request tutorial ni semenjak zaman Renaissance lagi.  Beliau juga selalu cakap, yang gua nih Double Standard. Gua lebihkan makwe-makwe.Haha.

Adakah gua double standard lagi?
Membina fungsi Highslide pada image

faedahnyer xde la besa sgt..
tp nmpak cggih la ckit..
n puas hati la..ngeh3~
sila smbung ye entry ni..;))

To si putih:

~ Lu punya pasal, gua sambung balik post ni, walaupun kenyataannya, gua nak sambung post ni bila sampai tahun depan.

nescafe...neway....tq r sbb ko kasi tutorial wat ne...
aku really appreciate..hehe..

jap2...ko da kurang r double standard..haha..
entri bagu aku nak cube wat bnda ne..
he..makasih nescafe~~

To izanuddin:

~ Gua cuma risau bandwith file habis. Kalau tiba-tiba tak berfungsi, maknanya bandwith dah abis lah. Maklumlah, free hosting.

p/s: Ada sesiapa yang baik hati nak sedekahkan hosting utk file js gua. Gua amat-amat menghargainya. Haha.

no probs r.
aku just test satu entri je..da publish da pown..
try r tgok...
pasni xda kot..hehe..~~
saje ske test2..
neway..tq r wei..
he..

saya suka tuto nie . selamat maju jaya nescafe ais

Salam..saya ada satu masalah...sejak 28/5/2012, blogspot saya tak boleh buka dah...bila cuba buka, keluar page www.fileave.com..dah cuba berulang kali tapi masih tak boleh..apa punca dan macam mana nak atasi masalah nie ye? ada cadangan?..kalau sudi bantu,emailkan pada saya di alamat email usana79@gmail.com.... kalau nak tenguk masalah blog saya, cuba la = http://inspirasilensa.blogspot.com
kalau anda sudi bantu,alhamdulillah syukur..