• Natlie Imbruglia

    Doesn`t she look very cool?

  • Thousands of Years

    Earth has lived thousands of years...

  • Fruits

    Fruits are vital for health and their nutrients...

  • The Lonely Road

    The Lonely Road reminds Me with You...

  • Twister

    Here are some twisting graphics for you...

Sunday, October 18, 2009

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixF6itC9gLBcVLlqrsPGdzzX8pv3KYbLptSLzL14PQhle5w3I9GES2_tVM778OEMiQhsRl7bsiPzMqwAH73b1MbSZUpTQq2Eln195NaDWx_zjAbtcs_CnN5r_CgPL1YFAQkhZ9ZBU4AEG7/s320/nescafe+ais.jpg" onclick="return hs.expand(this)"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixF6itC9gLBcVLlqrsPGdzzX8pv3KYbLptSLzL14PQhle5w3I9GES2_tVM778OEMiQhsRl7bsiPzMqwAH73b1MbSZUpTQq2Eln195NaDWx_zjAbtcs_CnN5r_CgPL1YFAQkhZ9ZBU4AEG7/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?
Posted by at
Labels:

6 comments:

  1. ::[si putihpurple]::October 18, 2009 at 11:01 PM

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

    ReplyDelete
  2. Nescafe aisOctober 18, 2009 at 11:56 PM

    To si putih:

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

    ReplyDelete
  3. izanuddinOctober 19, 2009 at 5:20 AM

    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~~

    ReplyDelete
  4. Nescafe aisOctober 19, 2009 at 7:26 AM

    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.

    ReplyDelete
  5. izanuddinOctober 19, 2009 at 9:54 AM

    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..

    ReplyDelete
  6. mIdI & sUeNovember 30, 2009 at 5:21 PM

    saya suka tuto nie . selamat maju jaya nescafe ais

    ReplyDelete

Subscribe to: Post Comments (Atom)