Cara Membuat Menu Bar Horizontal Keren Menggunakan CSS

  • dunia hitam
  • kata
    • kata lucu
    • kata bijak
    • kata mutiara
    • kata cinta
    • kata gokil
  • lucu
    • gambar lucu
    • pantun lucu
    • tebakan lucu
    • kata lucu
    • cerita lucu
  • berita
    • berita unik
    • berita politik
    • berita artis
    • berita aneh
  • kesehatan
    • asam urat
    • kanker
    • jantung
    • hepatitis
    • ginjal
    • asma
    • lambung
  • gambar
    • gambar unik
    • gambar lucu
    • gambar aneh
    • gambar animasi
    • video lucu
  • hoby
    • burung
    • ikan
    • piaraan
  • contoh
    • surat lamaran
    • recount text
    • descriptive text
    • curriculum vitae
    • deskripsi
  • video
    • video lucu
    • video hantu
    • video polisi
    • video totorial
    • video panas
    • video lagu
  • blog
    • SEO
    • template
    • script
    • widget
    • backlink
    • imacros
  • komputer
    • excel
    • macro excel
Home » blogging » Tips dan Trik » Cara Membuat Menu Bar Horizontal Keren Menggunakan CSS

Cara Membuat Menu Bar Horizontal Keren Menggunakan CSS

Menu bar keren

Menu Bar, itulah yang akan Bangiz bahas kali ini. Setelah sebelumnya saya share tentang Cara Membuat Kotak Berlangganan Feedburner Subscribe dan Sosial Media dan Cara Membuat Sosial Media Animasi Berputar. Kali ini tentunya masih berhubungan dengan cara mempercantik blog. Oke tanpa basa-basi lagi saya langsung saja beri kode scriptnya berikut ini. Kalau sudah diberi kode masih bingung, saran saya baca dulu di sini.
<style>
     /*-----Horizontal navigation menu from bangiz.blogspot.com------*/
     #nav_hr1 {
     width:100%
     }
     #nav_hr1 ul {
     list-style:none;
     margin:0;
     padding:0;
     overflow:none;/*Hide the overflow */
     }
     #nav_hr1 ul li {
     float:left;
     }
     #nav_hr1 ul li a:link,#nav_hr1 ul li a:visited {
     display:block;
     width:120px;
     font-weight:bold;
     color:#8db600;
     background:#981b1e;
     text-align:center;
     text-decoration:none;
     text-transform:capitalize;
     padding:6px 0px;
     }
     #nav_hr1 ul li a:hover,#nav_hr1 ul li a:active {
     background:#a609a9;
     -webkit-transition:background .2s ease-in ;
     -moz-transition:background .2s ease-in ;
     transition:background .2s ease-in ;
     }
     #nav_hr1 ul li a:hover{
     -moz-opacity:0.90;
     -khtml-opacity:0.90;
     filter:alpha(opacity=90%);
     opacity:0.90;
     }
     #nav_hr1 ul li a:active {
     -webkit-box-shadow:inset 1px 1px 1px 1px #188989;
     -moz-box-shadow:inset 1px 1px 1px 1px #188989;
     box-shadow:inset 1px 1px 1px 1px #188989;
     color:#FF3300;
     opacity:0.85;
     -moz-opacity:0.85;
     -khtml-opacity:0.85;
     filter:alpha(opacity=85%);
     -webkit-transition:all .2s cubic-bezier .1s;
     -moz-transition:all .2s cubic-bezier .1s;
     transition:all .2s cubic-bezier .1s;
     top:12px;
     }
     </style>
     <div id="nav_hr1">
     <ul>
     <li><a href="#" >Beranda</a></li>
     <li><a href="#" >Produk</a></li>
     <li><a href="#" >Pelayanan</a></li>
     <li><a href="#" >Harga</a></li>
     <li><a href="#" >Blog</a></li>
     <li><a href="#" >Kontak</a></li>
     </ul>
    </div>

 Hasilnya akan seperti ini:


Keterangan:
# ganti dengan alamat URL yang Anda inginkan beserta nama menu bar-nya
Anda juga bisa menyesuaikan lebar
Begitu juga dengan warnanya, lihat di sini untuk melihat kode warna
Ditulis oleh Unknown, Kamis, 09 Mei 2013 03.53- Rating: 4.5

Judul : Cara Membuat Menu Bar Horizontal Keren Menggunakan CSS

Deskripsi : Menu Bar, itulah yang akan Bangiz bahas kali ini. Setelah sebelumnya saya share tentang Cara Membuat Kotak Berlangganan Feedburner S...
keyword :Cara Membuat Menu Bar Horizontal Keren Menggunakan CSS, blogging, Tips dan Trik
Posting Lebih Baru
Posting Lama
Beranda
Postingan Populer
  • Foto-Foto Novi Amalia Terbaru Juli 2013
    Foto-Foto Hot Novi Amalia Terbaru | Update Foto-Foto Hot Novi Amalia Terbaru Juli 2013 .- Akhir-akhir ini masyarakat di hebohkan dengan ti...
  • Apa Yang Akan Terjadi Pada Mayat Ketika di Dalam Kubur
    Taukah kamu apa yang akan terjadi pada mayat manusia ketika susdah berada di dalam kubur ? Mayat manusia yang sudah di kuburkan akan melewat...
  • Wallpaper Lucu HD Terbaru
    Setelah sebelumnya saya berbagi tips dan trik blogging yaitu Cara Membuat Label Keren Dengan Efek Bergerak dan Wallpaper Kartun Cinta Rom...
  • 5 Fakta Unik Tentang Hari Kemerdekaan Indonesia
    Oh ternyata ada 5 Fakta Unik Tentang Hari Kemerdekaan Indonesia. Kejadian - kejadian  unik sejarah bangsa indonesia ini bisa di simak disin...
  • Foto Sampul Facebook Hello Kitty Terbaru
    Apakah Anda termasuk salah satu penggemar Hello Kitty? Jika iya, tidak ada salahnya jika Anda juga menggunakan timeline atau sampul face...
  • Wallpaper Keren Terbaru
    Pada tahun 2013 ini bumi kita sudah semakin tua, begitu juga dengan usia kita tentunya semakin berkurang. Berbagai tipe fisik maupun p...
  • Foto Sampul Facebook Hello Kitty
    Setelah sebelumnya Bangiz berbagi foto sampul facebook galau versi anime, untuk kali ini Bangiz mau berbagi tentang sampul tokoh kartun ...
  • Foto Sampul Anime
    Akhirnya bisa berbagi lagi dengan Anda semua, setelah kemarin-kemarin sibuk. Maksudnya sibuk mengganti dan mengedit-edit template :). Ada...
  • Membuat Komentar Facebook dan Blogger Berdampingan
    Pada kesempatan kali ini Bangiz mau berbagi tentang tips dan trik blogging. Yang akan kita bahas kali ini yaitu tentang komentar ...
  • Foto Bus Persib yang di Lempar Oknum Jak Mania
    Foto Bus Persib yang di Lempar Oknum Jak Mania .- Selamat malam sahabat sebagin info kali ini mimin akan share foto-foto bus persib yang ter...

Info dunia hitam © Cara Membuat Menu Bar Horizontal Keren Menggunakan CSS