Membuat Sidebar Blog Dengan Javascript

28 Jan 2011

Hallo semuannya, maaf lama gak posting, hehe, maklum udah kelas 3, udah sibuk pengayaan, project work dan kawan - kawan, yaa, kan bentar lagi gw bakalan menghadapi UN yang kian tahun makin menjengkelkan,, hehe,, anyway, kali ini gw kembali dengan artikel yang sebenernya gak niat gw posting tapi akhirnya gw memutuskan mempostingnya karena mulai banyak yang nanya dan gw males menjelaskan mereka satu persatu, jadi mereka nanti gw suruh baca aja, hehe,,

Postingan gw kali ini mau ngebahas mengenai sidebar yang ada disamping Blog gw, itu sidebar buatan, bukan widget dari mana - mana, tapi asli buatan gw. Gw yang desain sampe codingnya,, sebenarnya codingnya gak ribet, simpel banget malahan. cuma dasar javascript aja. hehe kuncinya hanya di event handler onMouseOver sama onMouseOut, udah itu aja.. sekarang kita mulai buat aja yaa…

Sebelum kalian membuat sidebar, sekarang tentuin gambarnya. kalian buat desainnya dulu.. Kalo gw pake photoshop, pake proses slicing.. jadi gambarnya tadi utuh terus di slice, setelah itu di save for web (File > Save for web), kalian simpen, tapi typenya *Image only. gak usah full page sama HTMLnya. setelah itu kalian buat lagi gambar yang sama tapi di bedain dikit, terus di slice disimpen lagi. Jadi sebenernya kalian buat 2 gambar. Gambar pertama sebelum di sentuh kursor dan gambar 2 pas di sentuh kursor. udah paham sampe sini. ? oh ya pastikan kalian membuat gambar dengan ukuran yang sesuai. kalau lebar maksimal sidebar di blog kalian 200px ya, jangan buat lebih dari 200px. kalo bisa di kurangi 50px atau minimal 20px, biar layout blog kalian gak berantakan… ya siapin gambar seperti ini dehhh…

Siapkan 2 Gambar

Gambar pertama (sebelum di sentuh kursor)

Gambar pertama (ketika di sentuh kursor)

Oke.. sekarang kita akan buat scriptnya.. inget kuncinya di onMouseOver dan onMouseOut,, jadi gini penjelasannya. onMouseOver adalah ketika gambar tersentuh kursor dan onMouseOut adalah ketika kursor lepas dari gambar. Nahh sekarang masukin event handler ke link gambar. jadinya kayak gini.


<a href="URL tujuan"><img src="URL gambar 1" name="a" onMouseover="document.a.src=’URL gambar 2‘;" onMouseOut="document.a.src=’URL gambar 1‘;"></a>

Gini penjelasannya.. hehe. <a href="URL Tujuan"> </a> ini buat link ke halaman yang dituju, kalian udah tau kan kalo yang ini. sekarang Javascriptnya. document.a.src=’URL gambar’, nahh disitu kan ada "a", sebenernya itu name dari gambarnya. jadi setiap gambar disentuh maka gambar itu Source (SRC) gambar itu akan di gantikan dengan gambar 2 secara otomatis. nahh kalo kursor dilepas maka gambar akan di kembalikan ke source gambar asli. Dari sinilah terlihat efek gerak. padahal itu 2 gambar yang berbeda. yaa seperti itu lah.. nahh gw anggap lo udah ngerti HTML, kalo nyusun gambarnya dalam tabel gw yakin kalian tau.. jadi biar rapih kalian susun dalam sebuah tabel, kalo udah jadi silahkan kalian masukan ke widget HTML di setiap blog kalian yaa,, atur posisinya di sidebar.. .. Hehe.. nahh karena gw orangnya baik (hahahaa) gw kasih liat source code sidebar gw dehh.. hehe


<table width="135" cellpadding="0" cellspacing="0" border="0">

<tr>

<td><img src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs1360.snc4/163217_1509341055794_1302366334_31145010_1363729_n.jpg" width="135" height="78"></td>

</tr>

<tr>

<td><img onclick="location.href=’http://amri166.blogdetik.com/category/artikel-bebas/’;" onMouseOver="document.a.src=’http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs067.snc6/167701_1509341175797_1302366334_31145011_2843913_n.jpg’;" onMouseOut="document.a.src=’http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs1334.snc4/162663_1509341575807_1302366334_31145018_6043113_n.jpg’;" src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs1334.snc4/162663_1509341575807_1302366334_31145018_6043113_n.jpg" name="a" width="135" height="67" border="0"></td>

</tr>

<tr>

<td><img onclick="location.href=’http://amri166.blogdetik.com/category/my-diary/’;" onMouseOver="document.b.src=’http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs052.snc6/168204_1509341215798_1302366334_31145012_2248476_n.jpg’;" onMouseOut="document.b.src=’http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs071.snc6/168173_1509341655809_1302366334_31145019_5752625_n.jpg’;" src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs071.snc6/168173_1509341655809_1302366334_31145019_5752625_n.jpg" name="b" width="135" height="73" border="0"></td>

</tr>

<tr>

<td><img onclick="location.href=’http://amri166.blogdetik.com/category/javascript/’;" onMouseOver="document.c.src=’http://sphotos.ak.fbcdn.net/hphotos-ak-ash1/hs790.ash1/168032_1509341735811_1302366334_31145020_1746005_n.jpg’;" onMouseOut="document.c.src=’http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs046.snc6/167612_1509341255799_1302366334_31145013_4698031_n.jpg’;" src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs046.snc6/167612_1509341255799_1302366334_31145013_4698031_n.jpg" name="c" width="135" height="43" border="0"></td>

</tr>

<tr>

<td><img onclick="location.href=’http://amri166.blogdetik.com/category/script-php/’;" onMouseOver="document.d.src=’http://sphotos.ak.fbcdn.net/hphotos-ak-ash1/hs745.ash1/163741_1509341295800_1302366334_31145014_4700572_n.jpg’;" onMouseOut="document.d.src=’http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs003.snc6/165297_1509341775812_1302366334_31145021_4460114_n.jpg’;" src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs003.snc6/165297_1509341775812_1302366334_31145021_4460114_n.jpg" name="d" width="135" height="48" border="0"></td>

</tr>

<tr>

<td><img onclick="location.href=’http://amri166.blogdetik.com/category/video-dan-photo/’;" onMouseOver="document.e.src=’http://sphotos.ak.fbcdn.net/hphotos-ak-ash1/hs773.ash1/166346_1509341335801_1302366334_31145015_4591143_n.jpg’;" onMouseOut="document.e.src=’http://sphotos.ak.fbcdn.net/hphotos-ak-ash1/hs798.ash1/168831_1509341815813_1302366334_31145022_6460454_n.jpg’;" src="http://sphotos.ak.fbcdn.net/hphotos-ak-ash1/hs798.ash1/168831_1509341815813_1302366334_31145022_6460454_n.jpg" name="e" width="135" height="93" border="0"></td>

</tr>

<tr>

<td><img onclick="location.href=’http://amri166.blogdetik.com/category/desain-grafis/’;" onMouseOver="document.f.src=’http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs1358.snc4/163062_1509341415803_1302366334_31145016_1726452_n.jpg’;" onMouseOut="document.f.src=’http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs002.snc6/165289_1509341855814_1302366334_31145023_1425268_n.jpg’;" src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs002.snc6/165289_1509341855814_1302366334_31145023_1425268_n.jpg" name="f" width="135" height="98" border="0"></td>

</tr>

</table>


Gimana,. sekarang kalian udah faham ?, kalo belom tanya aja. karena sebenernya gw udah ngantuk nihhh, makanya gw ngaco banget kan postingannya kali ini.. hehehe okk dehhh Keep Moving On and Keep On Writting !



TAGS Detikcom anniversary programming tutorial javascript internet pengguna internet teknologi internet Multimedia javascript untuk blog javascript untuk sidebar sidebar menggunakan javascript widget sendiri untuk blog membuat widget dengan javascript sidebar blog dengan javascript


-

Author

Follow Me