SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




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 :@




15 komentar pada “Navigasi Menu Blogbego Gaya Punya”

  1. Memang menu ini amat amat keren.. tapi sepertinya diblog saya kurang cocok, jadi saya Bookmark dulu OM

    BalasHapus
  2. ane coba dulu, kalo keliru mohon bimbinganny yah hehe
    dan hasilnya SUKSES THANKS GAN :D visitback dan comment2

    BalasHapus
  3. @Beben Koben ya mas sambil belajar, nanti kreasikan lagi :#

    BalasHapus
  4. nongkrong k blogbego haha, visitback dan komen ke komentar blog Cek Info yah, hehe sy ini Musicandnews.co.cc baru ganti domain ;)

    BalasHapus
  5. SUMPAH KEREN ABIES MAS...
    tapii kira2 yg pas ditaro dimana ya mas... mau pasang ini tapi bingung euy...
    :t

    BalasHapus
  6. iya mas.. hehe
    nyari2 warna yg pas..
    pasti saya hajar kreasi berikutnya... hihihi
    kalah dah kang rohman ama sttt beben... xixixi
    viss beeennn

    BalasHapus
  7. hey bego..., nice inpoh gan wkwkwkk :r

    BalasHapus
  8. nice inpoh gan...,
    follow back gan...
    abis mmasang widget follow hehee

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger