tutorial klik image dan pop-up menggunakan hSlide

Anda ingin blog anda nampak lebih advance? ingin nampak lebih bergaya dan professional? serta didalam masa yang sama tidak membebankan pembaca blog anda? kali ini, eddytech bersedia untuk berkongsi dengan anda satu tutorial hSlide. satu javaScript yang agak advance dalam image viewing dan photo album. tanpe buang tenaga dan karan. jom, ikuti step-step yang disediakan.

1) masuk ke tab design dan pilih edit HTML. tidak perlu klik expand widget HTML.. hanya menyukarkan kerja anda.

2) copy script ini  
<script src='https://sites.google.com/site/eddytech03/highslide.packed.js' type='text/javascript'/>
<script type='text/javascript'>
    hs.graphicsDir = null;
    hs.outlineType = null;
    hs.wrapperClassName = null;
</script>
dan paste dibawah tag <title><data:blog.pageTitle/></title>.kemudian click save template

3) okeh, kemudian, klik edit post, dan pilih post yang mempunyai gambar, kemudian, kemudian click Edit HTML. kemudian paste code ini didalam code URL image anda. sebagai contoh. cuba anda contoh code dibawah.
CONTOH 1 : 
<a class="highslide" id="thumb1" onclick="return hs.expand(this)" href="http://3.bp.blogspot.com/-Yt9narbwx3M/Td-OIZq7FtI/AAAAAAAAA64/z0nvrH7wTC4/s1600/google.jpg" imageanchor="1"  style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="79" src="http://3.bp.blogspot.com/-Yt9narbwx3M/Td-OIZq7FtI/AAAAAAAAA64/z0nvrH7wTC4/s200/google.jpg" width="200" /></a>

CONTOH 2 :
<a  class="highslide"  id="thumb1" onclick="return hs.expand(this)" href="URL IMAGE ANDA"> <img src="URL IMAGE ANDA" width="200px" height="200px"></a>

tulisan yang berwarna merah adalah code yang anda perlu tambah disetiap image anda. kalau anda ada 10 image, jadi 10 image tersebut perlu mempunyai code diatas. cara yang paling mudah. anda try create satu post baru. dan upload image kedalam post. dan masukkan code diatas.perlu diingatkan, code diatas perlu diletakkan ke image sekiranya anda ingin image tersebut dibaca oleh script hSlide tadi.

publish post anda dan anda akan menyaksikan kelainan didalam blog anda :).

------------------------------------------------------------------

Sekiranya anda ingin kecilkan tulisan "powered by hslide", stepnya seperti ini,

klik design, kemudian edit HTML. paste code ini 

a.highslide-credits,a.highslide-credits i {padding: 2px;color: silver;text-decoration: none;font-size: 1px;}

sebelum code ini ]]></b:skin>

-----------------------------------------------------------------