Membuat Simple Menu

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :

/* Buble Image with jQuery
----------------------------------------------- */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 65px;
height:60px;
}

.bubblewrap li img{
position:absolute;
width: 55px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}
/*CSS for 2 demos on the page*/
#orbs li{
width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */
height:60px; /*height of image container. Should be taller than contained images (before bubbling) */
}

#orbs li img{
width: 55px; /*width of each image before bubbling*/
height: 60px; /*height of each image*/
}

#squares li{
width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */
height:40px; /*height of image container. Must be taller than contained images (before bubbling) */
}

#squares li img{
width: 31px; /*width of each image before bubbling*/
height: 31px; /*height of each image*/
}

8. Selanjutnya simpan java script berikut diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

9. Jika sudah, sekarang simpan kode berikut tepat diatas kode </body> :

<script src='http://kangdadang.googlecode.com/files/imgbubbles.js' type='text/javascript'>
</script>
<script type='text/javascript'>

jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"
$('ul#squares').imgbubbles({factor:2.5}) //add bubbles effect to UL id="squares"
})

</script>

10. Save

11. Cara Pemakaian

Misalkan pada Rancangan, Tambah Gadget, Html/Java Script :

<h4>Contoh 1</h4>
<ul id="orbs" class="bubblewrap">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8wAORyVJszRyDt_6RwsPb7TegHp8FXdpGCvu_DbMDwWibRQAQozgCPg_GgVuLYg5GJ7VS2BcedfjVb17dc4EPi6I2A91SsaB-W3X0BdLKDoUG_6KM6D4-DMLpGesB3fyotvrLSgVtgnI/s1600/stumbleupon.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHlxF1dh1AjbgHAO_4F2ifLU8oJkZ9-6uLzElsRrwi_etkIZ9wIZ-P1SHXIhRlsSgxlC3KKnWp-j9ofNNoQUiYnpnTm9uAHnaNhK6LRoy5NDhloLLFspMiUGVkrJmtGSrOg26QfzQEgKA/s1600/facebook.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8GY7JOXwPUw0iwiRZdFWONb9qlmTfU8TypQg6kJi5ZQNJW2iSHeltDCOCc33MuFMJ9mUVw1GF1WJzcUWcaevpR-rhhI2Tt0F8g4lQQPUc38gz7JKoMDxzZavvcBgbU1U6ntTsHqJKk9o/s1600/digg.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyzF2cQboY4eE8TwCOCPBRughzTqWzWMWb3uZCdjNkiCd44C1A-2M93NBU_wYT4OJ_KUQMBlYtOUQF1SP2VPHszcDnkoGJ4vaNmQ06Gsckz_Od55sS4sNoQ9xvlsmaRHP1Zi04_TYTYO8/s1600/twitter.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO8Mn97pyQbhmCVhGl0RFWKYXmZJrg0uMl9OJlYpyV4Oh0SV_t8jOY85FB3Qcz0bfCb-kH15HzG_bEl7EUphvPL3K478l6B7ETr1uPHX4XXQb_8J6utWqQYQrMtnUn3qZvb0zQTBRAlto/s1600/rss.png" /></a></li>
</ul>

<h4>Contoh 2</h4>
<ul id="squares" class="bubblewrap">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJQN762RkR1Fx16zJQPqkTYQai5X4Ew54RaxogzM_TRfIKidd1Td5FTby8G1uzFcBYex_C3i1NJpx_KoTIsn2T4zhtWY0PnWApSiCrYz0BWRvhQQfXgN7J0EKPyJ1sdBwseb5kSNOdlD8/s1600/facebook1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYxOpcpz3ZBVm96FsSf5NPp0ji5gG7irdzVUIQNnsRyzMFW-1R14BEujiVjFpkGTvRe804U7yZ6xl2V5COHl7-98HiVpoM1gRA4OwK_c05pRNNnX4rvgRCwx6eEjQ2-pU7-_w7zhQihWw/s1600/delicious.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg41Vsql1BsnQt2f_mGYRhvy3zK2zdw1KzrEi_a10rgrrn-hvRleztZ-fsAj-PNcJuQPOJKyETthQZHZ7IP0iFyRkAhBcKhO45sloXHjQBU67jdxwtS_ZYLBiQyeBPGfo6rK9ZO1oRaad8/s1600/digg1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGP_tc6wwjIuHe5d4nWn8ZoPlet1M7NH61RVAUT_617ju9pXW825N35jWzXngPQqc2V4bGtlsxxL1YGpfN7bQDyZuOAtoI2lQXdFretNt0tdrZogirW22qdhCsR0VrAXJ3krreds4mZ_U/s1600/stumbleupon1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmZvVUTpHwwFUZuz66ozCJsPmiBfDbgLQa1grg9H7yETM8U3usljyveaRJUHBb0BMBgdqTxnRvWPE5ZrrtZQ3zL_uENSu70QcpPvqZ5ILCv_oIzf5U1WnZSot4Lnt52mpkwtbFV2-Q_9s/s1600/rss1.png" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwcbgxc_x48p1_INM6F34hefw0dcxsNxCC2ct-kHkHWR-TTVOCvQOhHhx2n-zFZBfXb2Uu_NDltKtm1-pT0Lw66-9L9Vfz8q12w8Bd3yU_o-44KT5euiqpeShGwZKQ0n4QPlXZbPX9bcQ/s1600/twitter1.png" /></a></li>
</ul>

NB:
Sebagai tambahan. jika script http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js ini sudah ada pada template anda, anda tidak perlu lagi menambahkan script tadi pada template yang dipakai