Navigasi Menu Blogbego Gaya Punya

Navigasi Menu Blogbego Gaya Punya yang saya maksud disini fungsinya sama dengan Navigasi Menu yang lainnya, :O cuma yang akan saya share-kan dengan kawan sekarang Navigasi Menu yang ada kreasinya biar kelihatan sedikit aksi :r  :s  dan proporsional :z  untuk Demonya kawan bisa lihat » disini
Bagaimana, keren  kan ?!
Aksi yang saya maksud disini adalah kalau mouse di dekatkan diatas image, maka image akan membesar dengan sendirinya dan akan mengecil setelah mouse dipindahkan :#
Okey mari kita langsung saja ke cara pembuatannya :

• Masuk ke Account Blogger dengan ID kawan
• Pada Design/Perancang Template pilih Edit HTML
• Copas script berikut dibawah  ]]></b:skin> atau diatas </head> 

<style type='text/css'>

.bego{

list-style-type:none;

margin:0;

padding:0;

}

.bego li{

display:inline;

width: 55px;

height:60px;

}

.bego li img{

width: 55px; /* width of each image.*/

height: 60px; /* height of each image.*/

border:0;

margin-right: 12px; /*spacing between each image*/

-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */

-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */

}

.bego li img:hover{

-moz-transform:scale(1.8); /*scale up image 1.8x*/

-webkit-transform:scale(1.8);

-o-transform:scale(1.8);

}

</style>

• Simpan Template kawan 
• Pada Design / Perancang Template pilih Tambah Gadget - HTML / JavaScript
• Copas HTML berikut kedalamnya :

<ul class="bego">
<li><a href='http://tips-blogbego.blogspot.com'  title="Beranda">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEq3f6KZEioGjGzW2VDsevcWhJ0DkmNsaah7t5TswdMAE8_2SQ96QsJPib6NrNNeIT3ClZ4VbmVwMFhqTiOj7gUE0E_H3Mp3hsIc_LyIhqOtCWljiL9FIH7tyfJUzqwKfowfMJbdsNUjne/s1600/Home-.png" /></a></li>

<li><a href='http://tips-blogbego.blogspot.com/2010/05/siapa-saya.html'  target="_blank" title="Siapa Saya">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOgz2TSJPzQQG9g6YwxgWGWiebFq2mOljmzPo9b8ieQb8Cu6Ck-aGdf2m051BenEbQyMM4_R0KWbM9hoedTdBTgTMZJIfCV-_9mpvMKOYP5SoFiuAzswghjTexmlKMyR0xaeZCo2wndyKV/s1600/Profil.png" /></a></li>

<li><a href='http://info-blogbego.blogspot.com' target="_blank" title="blog & Computing Info">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVDvrY1xilPBG8Dzq9UG9hXYdcYyBdU6bYFgdkDDJMRA5apvf-rFrtBGGMmffBXSAjL_4JmUoEsTJglsV6LO-nzhtG1Q1pzSqkBNITh5_3JeelYXzdMveWKlqP_Wx7YqtFd3tyqgBCI6pj/s1600/info.png" /></a></li>

<li><a href='http://www.facebook.com/kastaone' target="_blank" title="Ikuti saya di Face Book">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqUlI0S6vqAcPYVjN_K-hwJ59Qf55FvE7yz4mM95iFFyJAT-4Nz26982UAxyYWN5IIC3yUgKVHgSK75WCWrwVh2cQuGWyGQLpH1QVwH-l4FX6nDYUHQIzGZabFkTdMz9eqrbshI7lhOsnh/s1600/facebook.png" /></a></li>

<li><a href='http://www.twitter.com/kastaone' target="_blank" title="Ikuti saya di Twitter">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh7V_rtQZg6BNs7kvK99PzQmS67c3LLb93YqELBoJ02qzQ5cz0ur1HMW0FcNAnNCTSri4m8RLAGWi-42V0di1DppzUuUsU8NDyy_oWEwr_PiHQAwYs1pXu-Ylrnz3m9UByxgDHGXl4VSRE/s1600/twitter.png" /></a></li>
</ul>

• Ganti URL/Link saya dengan URL kawan  :D
• Simpan Template Kawan dan lihat hasilnya seperti dibawah [cuma yang ini tak bisa membesar karena cuma sample]

 

contoh image background dan Linknya

<img border="0" src="http://2.bp.blogspot.com/-05bbnW6zDSg/TiFsX8c8ZBI/ AAAAAAAAB6Y/GjuSMmSUe_Q/s1600/Kolom.png"/>

Pengaturan :

• Apabila dipojok kiri atas Blog kawan ada kelihatan tanda panah [-->], script yang ditaruh  diatas  ]]></b:skin>   dipindahkan menjadi dibawah  ]]></b:skin>  atau diatas </head> 
• Silahkan kawan berkreasi kalau menginginkan menu lebih banyak atau dengan background image tampilan yang lain, caranya kawan cukup mengganti link atau url  image dengan milik kawan dan terakhir selamat berkarya :@