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/AVvXsEi4Uzk-ltdb9BjlTKpHaHE8uFVjPKy_PuZK2ZjiAkPeNbEHdFvl_7ar8G6xwCruEuGEKDtyHSF2KYYlUiCs9nRF-12YBU0agkcw6oVldssCCfJZ4eYuQweabOay4aHYEK6GNWAZ_OCO2x-e/s320/nescafe+ais.jpg" onclick="return hs.expand(this)"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Uzk-ltdb9BjlTKpHaHE8uFVjPKy_PuZK2ZjiAkPeNbEHdFvl_7ar8G6xwCruEuGEKDtyHSF2KYYlUiCs9nRF-12YBU0agkcw6oVldssCCfJZ4eYuQweabOay4aHYEK6GNWAZ_OCO2x-e/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.
0 comments:
Post a Comment