Tutorial | Cara Memasang Highslide Javascript Image

 

Tutorial blog kali ini adalah kesinambungan dari entri lepas iaitu Highslide Javascript Untuk Blogspot .Sila baca dahulu entri berkenaan untuk lebih memahami tentang tutorial ini.

Seperti yang aku katakan pada entri  lepas,aku masih mencuba untuk mengubah dan mengkaji sedikit lagi CSS coding yang berkaitan dengan Highslide Javascript Image Viewer ini.

Antara kelemahan dan kelebihan Highslide Javascript

Kelebihan:

• Memudahkan pembaca untuk melihat gambar yang dipaparkan pada entri dengan lebih mudah.(hanya dengan satu klik)
• Boleh dijadikan seperti slide pada entri yang melibatkan banyak penggunaan gambar.(menggunakan button arrow pada keyboard)
• Gambar dalam saiz yang besar boleh dimuatkan tanpa memakan ruang page yang banyak.

Kelemahan:

• Hanya menyokong gambar berformat JPG sahaja.

note 1: Untuk pengetahuan korang,penggunaan gambar atau image berformat JPG yang berlebihan boleh menyebabkan masalah pada loading page.(blog jadi berat)

note 2:Gambar berformat png,gif dan lain2 masih boleh digunakan,tetapi perlu ada pengubahsuaian pada kod yang mana aku masih belum berjaya nak buat code tu.

• Sekiranya korang menggunakan Window Live Writer  kebanyakkan gambar akan mengalami masalah loading pada permulaan.Masalah ini masih boleh diatasi dengan memasukkan kembali gambar itu menggunakan blogger editor.
• Gambar berformat JPG pada entri lama korang mungkin mengalami masalah sekiranya gambar pada entri lama itu kurang berkualiti.

Di bawah ini adalah beberapa lagi contoh gambar yang menggunakan Highslide Javascript.

*Klik untuk besarkan gambar.

*Gunakan arrow pada keyboard untuk melihat gambar sebelum dan selepas.

Langkah-langkah dan cara memasang highslide javascript

Note: Back up template script anda terlebih dahulu sebelum mencuba tutorial ini.

Langkah 1:

• Pergi pada dashboard >> klik pada layout/design >> klik pada edit HTML.
• Tandakan pada kotak ‘Expand Widget Templates’

Langkah 2:

• Copy semua kod yang ade pada kotak bawah ini.
  

Langkah 3:

• Cari kod </head>

Tips untuk newbie – Tekan Ctrl + F serentak dan isi </head> pada ruangan find.(Atas sebelah kanan pada google chrome,bawah sebelah kiri pada mozilla firefox)

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

Paste kan code yang telah di copy tadi di atas atau sebelum </head> tag.

Klik priview dan sekiranya tiada error, klik save dan view blog.

Semoga berjaya!

 

PS: Aku taip entri ni dalam keadaan ‘jiwa kacau’ Sorry la kalau gaya penulisan aku agak berterabur,Hohoho :D

Semua gambar diambil dari   http://www.boston.com/

like tak?

Sekiranya korang rasa artikel ini berguna,Sudi2 kan lah share dengan kawan-kawan yang lain. :-)

Tweet

Share