Toogle Picture

akhir2 ini kok BLOGGOA rajin amat ngeposting tentang picture setelah sebelumnya memposting tentang effect thumbnail pada picture...kali ini BLOGGOA mencoba berbagi tips dengan menampilkan gambar dengan toogle picture......bingung juga mau nulis judulnya apa....yang jelas maksudnya ketika mouse kita menyentuh gambar kecil (icon thumbnail) maka tabel disamping akan menghasilkan efeect gambar menjadi besar....tujuannya sieh untuk mempercantik blog...biar kelihatan interactive.......

tips ini sebenarnya cocok buat para bloger yang ingin menampilkan preview templatenya....tapi buat teman2 yang kurang kerjaan ngepost picture kaya BLOGGOA....silahkan mengikuti tutorial yang sedikit aneh ini..........

untuk ilustrasinya silahkan lihat gambar dibawah ini.........dan gerakkan mouse anda pada bagian thumbnailnya.........

Hal. Depan Hal. Posting 1 Hal. Posting 2

kalo anda berminat ingin membuat effect seperti itu....caranya cukup mudah

masuk ke edit html masukkan kemudian copy script ini dan masukkan Setelah code   ]]></b:skin> 

<script language="JavaScript" src="http://sites.google.com/site/toejoeh124/toogle.js">
</script>

save template anda dan beralih lah kehalaman posting

pada saat memposting jangan lupa untuk membuat tabel...biar tampak profesional (silahkan klik ini untuk cara membuat tabel).

kalau anda malas untuk membuka artikel tersebut...ini cara mempostingnya.....
masuk kelahalamn posting...kemudian pilih yang edit html kemudian copas code berikut dihalaman postingan anda..............
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr><td valign="top">
<div align="center" style="margin:15px;">
<table width="550" border="0" cellspacing="0" cellpadding="0">
<tr> <td width="425"><img src="alamat gambar 1" name="BLOGGOA" /></td> <td width="125"><table width="125" border="0" cellspacing="10" cellpadding="0">
<tr> <td width="25"><img src="http://www.smiletemplates.com/img/sel.gif" name="sel1" width="14" height="55" /></td> <td width="100" align="center"><a href="#" onmouseover="MM_swapImage('BLOGGOA','','alamat gambar 1',1),MM_swapImage('sel1','','http://www.smiletemplates.com/img/sel.gif',1),MM_swapImage('sel2','','http://www.smiletemplates.com/img/s.gif',1),MM_swapImage('sel3','','http://www.smiletemplates.com/img/s.gif',1)"><img src="alamat gambar 1"  width="80" height="150" border="0" id="BLOGGOA" />
Hal. Depan</a></td> </tr>
<tr> <td><img src="http://www.smiletemplates.com/img/s.gif" name="sel2" width="14" height="55" /></td> <td align="center"><a href="#" onmouseover="MM_swapImage('BLOGGOA','','alamat gambar 2',1),MM_swapImage('sel1','','/img/s.gif',1),MM_swapImage('sel2','','/img/sel.gif',1),MM_swapImage('sel3','','/img/s.gif',1)"><img src="alamat gambar 2"  width="80" height="150" border="0" id="BLOGGOA" />
Hal. Posting 1</a></td> </tr>
<tr> <td><img src="http://www.smiletemplates.com/img/s.gif" name="sel3" width="14" height="55" /></td> <td align="center"><a href="#" onmouseover="MM_swapImage('BLOGGOA','','alamat gambar 3',1),MM_swapImage('sel1','','http://www.smiletemplates.com/img/s.gif',1),MM_swapImage('sel2','','http://www.smiletemplates.com/img/s.gif',1),MM_swapImage('sel3','','http://www.smiletemplates.com//img/sel.gif',1)"><img src="alamat gambar 3" width="80" height="150" border="0" id="BLOGGOA" />
Hal. Posting 2</a></td> </tr>
</div>
</table>
</table>
</table>



yang harus anda perhatikan adalah
ganti tulisan yang di cetak tebal.....pada code diatas dengan code gambar anda
tulisan yang berwarna merah   dengan id gambar anda......sedangakan tulisan yang berwarna orange   merupakan tulisan yang adah di bawah gambar (keterangan gambar)

demikian tehnik toogle picture pada postingan kali ini kalian bisa melayangkan komentar jika ada yang belum dipahami atau contact aku lewat ym jika aku sedang online.

dan jika tidak keberatan tolong dukung saya dalam Kontes Launching Be-Blog dengan memasang code dibawah ini di BLOG anda

<a href="http://toejoeh124.blogspot.com/2009/10/launching-be-blog.html">Launching Be-Blog</a>

thanks....and HAPPY BLOGING................