Menu Navigasi dengan Image Hover

Unknown - Rabu, 27 November 2013 - 06:00 wita
Sudah banyak postingan saya tentang Navigasi maupun Navbar ada yang menggulung atau menggelinding alias berputar begitu juga dengan yang saya beri nama Navbar Auto Hidden disisi kanan :q; yang merupakan kreasi untuk membuat Blog Tampil Beda :z;
Sekarang saya akan berbagi lagi dengan kawan Cara Membuat Menu Navigasi dengan Image, yang kalau di-Klik akan berubah warnanya seperti hover 

Tampilan Menu Navigasi

Seperti Judul Artikel ini Menu Navigasi sedangkan pada Demo hanya Navigasi Sosial itu hanyalah contoh saja, kalau kawan ingin untuk Menu, caranya sangat gampang, cukup siapkan image seperti berikut. :y;


Coba kawan perhatikan image tersebut, yang atas sedikit agak gelap, sedangkan yang bawahnya agak terang :r;
Oke kawan langsung ke Cara Membuatnya :
  • Siapkan Image sesuai kebutuhan
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML 
  • Copas kode berikut diatas ]]></b:skin>
ul#bbc{width: 180px; margin: 0px auto 0px auto;list-style: none;padding-bottom:30px}
* html ul#bbc{width: 185px;list-style: none;padding-left:10px;padding-bottom:0px;margin:0;}
ul#bbc li {display: inline;}
ul#bbc li a {display: block;float: left;  height: 30px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKO2bxauErE5x3CiKuVQ-aqBqoBOxNmUk5yvOflkL8KKmhxRbu2EphThWSUWt4QtvHVT7KNj_YTWGLNt-ARVO06T_VCsgNiTSArN_TNO31YFWjIG6pfc9gqddwXasdhPmvRZUvgE99PD4J/s1600/sprite_thumb.png'); text-indent: -9999px;}
ul#bbc li a.facebook {width:30px;background-position:0 0;}
ul#bbc li a.twitter {width:30px; background-position: -34px 0;}
ul#bbc li a.gplus {width:30px;background-position: -68px 0;}
ul#bbc li a.email {width:30px;background-position: -102px 0;}
ul#bbc li a.rss {width:30px;background-position: -136px 0;}
ul#bbc li a.facebook:hover,ul#bbc li a.facebook:focus {background-position: 0 -30px;}
ul#bbc li a.twitter:hover,ul#bbc li a.twitter:focus{background-position:-34px -30px;}
ul#bbc li a.gplus:hover, ul#bbc li a.gplus:focus {background-position: -68px -30px;}
ul#bbc li a.email:hover, ul#bbc li a.email:focus {background-position: -102px -30px;}
ul#bbc li a.rss:hover, ul#bbc li a.rss:focus {background-position: -136px -30px;}
Teks yang saya beri warna merah [180px dan 185px] untuk lebar image, silahkan disesuaikan kalau kawan ingin menambah atau menguranginya, sedangkan teks yang berwarna merah berikutnya untuk nama dan Link yang ditampilkan, nilainya silahkan dihitung sendiri 
  • Selanjutnya Copas script berikut dan simpan sesuai keinginan kawan masih pada Template atau bisa disimpan pada gadget untuk pemanggilan
<ul id='bbc'><li><a class='facebook' href='http://www.facebook.com/pages/KASTAONE/19292868552' title='facebook'>Facebook</a></li><li><a class='twitter' href='https://twitter.com/BLOGBEGO' title='Twitter'>Twitter</a></li><li><a class='gplus' href='https://plus.google.com/101141011579420362463' title='GPlus'>GPlus</a></li><li><a class='email' href='http://feedburner.google.com/fb/a/mailverify?uri=blogbegocreation' title='Email'>Email</a></li><li><a class='rss' href='http://feeds.feedburner.com/blogbegocreation' title='RSS'>RSS</a></li></ul>
  • Silahkan kawan ganti Link-link saya tersebut dengan Link kawan 
  • Simpan Template / Blog kawan



Berbagi Artikel :

Menu Navigasi dengan Image Hover
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Menu Navigasi dengan Image Hover
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

3 Komentar pada : “Menu Navigasi dengan Image Hover”

  1. terima kasih atas tutorial nya gan, ditunggu kunjungan baliknya...

    BalasHapus
    Balasan
    1. trims kawan sudah berkunjung, :q; kunjungan balik sudah pasti :x;

      Hapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan





BANNER [300x250]
© 2013 - BLOGBEGO CREATION | Powered by Blogger
Design Template by : Blogger Edan