Cara Membuat Menu Bar Keren Dengan CSS3 Pada Blog

Cara Membuat Menu Dar Keren Dengan CSS3 Pada Blog - Selamat siang sobat blogger. Maaf baru bisa posting artikel lagi, dikarnakan saya kemaren sibuk, jadi tidak sempat untuk membuat postingan. Baik, kali ini saya akan berbagi ilmu sedikit mengenai Cara Membuat Menu Bar Keren Dengan CSS3 Pada Blog. Menu bar sangat penting dalam blogger. Karena membantu untuk menavigasi blog atau website sobat dengan mudah. Ini memungkinkan pengunjung blog sobat dapat menemukan dengan mudah apa yang mereka cari pada blog sobat. Dalam tutorial ini saya akan menjelaskan cara menambahkan CSS3 menu bar untuk blogger.

Cara Membuat Menu Bar Keren Dengan CSS3 Pada Blog
Jika sobat ingin menggunakan menu bar ini di blog sobat silahkan ikuti langkah-langkah dibawah ini :

  • Masuk ke akun blog sobat.
  • Pilih Template =>> Edit HTML.
  • Kemudian cari kode ]]></b:skin> ( Untuk mempercepat pencarian gunakan Ctrl+F di kotak script EDit HTML).
  • Copy kode dibawah ini, kemudian Paste tepat diatas kode ]]></b:skin>.


@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */
#cssmenu, #cssmenu > ul{
background:#24459A;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
}
#cssmenu > ul{
background:black;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li{
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li{
float: left;
position: relative;
}
#cssmenu > ul > li > a{
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .70);
line-height: 18px;
}
#cssmenu > ul > li:hover > a{
background:#24459A;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, .64);
}
#cssmenu > ul > li > a > span{
line-height: 18px;
}
#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
background: #24459A;
}
/* Childs */
#cssmenu > ul ul{
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background:black;
margin: 0;
padding: 0;
z-index: -1;
-webkit-transition: all .35s .2s ease-in-out;
-moz-transition: all .35s .2s ease-in-out;
-ms-transition: all .35s .2s ease-in-out;
transition: all .35s .2s ease-in-out;
}
#cssmenu > ul li:hover ul{
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top:64px;
left: 0;
}
#cssmenu > ul ul:before{
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a{
padding: 18px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
#cssmenu > ul ul li a:hover{
background:#24459A;
}
#cssmenu > ul ul li a:active{
background: url(http://2.bp.blogspot.com/-IwLFy0zeDzQ/ULBfRcVaguI/AAAAAAAAHWQ/Bqvumm_7F5E/s1600/menu-bg.png) repeat;
}menu > ul > li > ul > li > ul{
left: 202px;
top: 1px;
width: 200px;
}
#cssmenu > ul > li > ul > li > ul > li{
float: none;
}


  • Simpan Template.
  • Kemudian Pilih Tata Letak =>> Add Gedget / Tambahkan Gedget.
  • Pilih HTML/Javascript.
  • Kemudian Copy kode dibawah ini dan Paste di HTML/Javascript.


<div id="cssmenu">
<ul>
<li class="active "><a href="#"><span>Home</span></a></li>
<li class="has-sub "><a href="#"><span>Templates</span></a>
<ul>
<li><a href="#"><span>Blogger</span></a></li>
<li><a href="#"><span>WordPress</span></a></li>
</ul>
</li>
<li><a href="#"><span>Write For Us</span></a></li>
<li><a href="#"><span>Sitemap</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy</span></a></li>
<li><a rel="author" href="#"><span>About</span></a></li>
</ul>
</div>


  • Ganti kode yang berwarna Biru dengan URL Link yang sobat inginkan. Kode yang berwarna Merah adalah judul / nama Navigasi sobat.
  • Simpan HTML/Javascript.


Demikian artikel Cara Membuat Menu Bar Keren Dengan CSS3 Pada Blog. Jika sobat mengalami kesusahan / bingung dalam pemasangan, silahkan berkomentar di kolom komentar, nanti saya bantu untuk solusinya. Semoga artikel ini dapat bermanfaat untuk sobat blogger. Salam Blogger.

Ditulis Oleh : Rosby Pranajaya M. Nandjan ~ Mari Berbagi

Mari Berbagi Sobat sedang membaca artikel tentang Cara Membuat Menu Bar Keren Dengan CSS3 Pada Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya


Silahkan masukan Email sobat untuk mendapatkan update artikel terbaru di blog ini :

Delivered by FeedBurner




57 komentar:

  1. Balasan
    1. PROMO AKHIR TAHUN SAMPAI 31 DESEMBER 2017
      KESEMPATAN EMAS UNTUK ANDA!!! BELANJA DI TOKO
      Kami DELIMA PONSEL Mengadakan Harga Promo
      Beli 1 Gratis 1 Samsung Galaxy J1
      berlaku untuk semua produk
      Gadget , Kamera, Laptop...!!!

      READY STOCK
      HP Samsung,Oppo,Acer,Sony,Apple,BB,LG,Nokia
      KAMERA Nikon,Sony,Canon,Kamera Video
      LAPTOP Hp,Lenovo,Samsung,Toshiba,Acer,Asus,DeLL

      UNTUK INFO PRODUK LENGKAP KUNJUNGI:
      http://delima-ponsel.blogspot.com.
      CALL☎/SMS✉: 0852-4004-4475
      BBM PIN: 5B3C6CE

      Hapus
  2. bro cara menambahkan link artikel dinavbar contoh di blog anda, dinavbar nya ada tulisan blog disentuh ada kategori kebawah tutorial,tips dansebagainya, itu cara nya gmn bro nambah kebawahnya, terimakasih

    BalasHapus
    Balasan
    1. iya gan gimana tuh cara nya? please jawab!1

      Hapus
  3. Bro, cara gantinya warnanya gimana?

    BalasHapus
  4. tq ya gan..
    sangat membantu..

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. gan di blogger saya gx ada tuh kode <div id='header-wrapper' jadi kyk mna gan buat nya ini ga di jawab bro??? apa harus ada templet khusus

    BalasHapus
  7. hahaha, manteb biarpun agak rumit caranya
    kunjungi blog ane gan di zuhri107.blogspot.com

    BalasHapus
  8. sekarang mah susah gan gak segampang dulu..... kurang sesaji kali mbah google nya.

    BalasHapus
  9. gan cara buat menu yang paling atas itu yg ad rss, google, fb, twitter, youtube, sama search gimana gan?

    BalasHapus
  10. Gan, cara ganti warna dan font gimana yah caranya ? Mohon responnya :)

    BalasHapus
  11. gan mau nanya gimana klo dalam satu link menubar biar bisa buat dua link

    BalasHapus
  12. Wow Pertamax gan keren artikelnya thanks banget ya, work nih udah seneng bangetz...
    tapi, jangan lupa Visit my blog
    6juni2000.blogspot.com
    saya yakin anda terkesan kesan melihat templatenya dan widget dan postingan yg bagus

    BalasHapus
  13. sob cara buat nivbar gmna sob !!

    BalasHapus
  14. makasih banyak ya sobat..moga anda selalu di berkati..berbagi itu indah..:)

    BalasHapus
  15. gan klo mw gnti menu biasa ke menu dropdown gmn yh, and cara memasukan artikel ke dalam menu
    tolong share yang tau

    BalasHapus
  16. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  17. gan kenapa yah ketika gua klik menubarnya menjadi 2 link..
    contoh:2014/09/2014/09/test.html mohon responnya yah :)

    BalasHapus
  18. bro ane udah ngikutain cara agan buat menu bar pake css..
    trus ane mau jadiin submenunya gmn ya gan..

    BalasHapus
  19. edit lebar agar sesuai dengan blog kita gmn gan???

    BalasHapus
  20. ane bikin gx jd gan,,
    kyx mna gan....
    http://4rie-ngr.blogspot.com/

    BalasHapus
  21. makasih banget kk,sangat membantu sekali udah berhasil nih,, tapi ane mau nanya gimana cara masukin privacy policy ke side bar tersebut mohon pencerahan??

    BalasHapus
  22. bisa ga kalo kode javascript nya aja yang di masukin? http://www.kakafiqry.blogspot.com

    BalasHapus
  23. agak rumit juga ya gan, buatnya

    BalasHapus
  24. thanks gan..
    www.bankcurhat.blogspot.com

    BalasHapus
  25. untuk menambahi sub menu gimana ya

    BalasHapus
  26. Terima kasih tutorialnya ga,... lebih fariatif yang ini...

    BalasHapus
  27. Mantap....udah bisa...mksh... sahabat.

    BalasHapus
  28. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  29. kok blog aku ngga ada kode ini nya ya ]]>

    BalasHapus
  30. makasih gan atas ilmunya (y)

    BalasHapus
  31. makasih banyak buat tutornya gan,, sangat bermanfaat sekali

    http://goo.gl/FiqB2R

    BalasHapus
  32. cara nambahin sub menu nya gimana gan??

    BalasHapus
  33. cara nambahin sub menu nya gimana gan??

    BalasHapus
  34. makasih banyajk buat tutornya,, sangat bermanfaat sekali nihh

    http://goo.gl/NQSzZm

    BalasHapus
  35. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  36. nice info.. thanks a lot :)

    BalasHapus
  37. kalo mau Posting biar masuk di Menubar gimana.?

    BalasHapus
  38. Thanks sob, infonya sangat membantu

    BalasHapus
  39. Terimakasih banyak mas, sangat membantu sekali artikelnya..

    BalasHapus
  40. thanks bro ... kunjungan baliknya blog baru ane idjenius.blogspot.com

    BalasHapus
  41. Gan ajarin donk cara daftar di adsense?

    all kunjungi juga ya: josuash.blogspot.com
    :)

    BalasHapus
  42. Bingung Berbisnis apa ?kami solusinya ..bisnis ppob loket resmi pembayaran listrik Telp 085322431295 taw kunjungi daanputra1.blogspot.com

    BalasHapus
  43. PROMO BESAR BESARAN GUNUNG MAS PONSEL TEMPAT BELANJA ONLINE AMAN DAN TERPERCAYA. 100% BEBAS PENIPUAN
    MINAT PIN BB: 582F8501 HUB/SMS:0851-4515-5828 klik web resmi kami di http://gunungmas-phone.blogspot.com/
    Ready Stock! Apple iPhone 5 32GB Rp.2.500.000
    Ready Stock! Apple iPhone 5S 32GB Rp.3.000.000
    Ready Stock! Samsung Galaxy A3 A300H Rp.1.500.000
    Ready Stock! Samsung Galaxy A5 A500F Rp.2.000.000
    Ready Stock! Samsung Galaxy E5 E500H Rp.1.500.000
    Ready Stock! Samsung Galaxy Grand Prime SM-530H Rp.800.000.
    Ready Stock! Asus Zenfone 2 ZE551ML RAM 4GB Rp.2.000.000
    Ready Stock! Samsung Galaxy S3 I9300 .Rp.1.500.000.
    Ready Stock! Samsung Galaxy S6 32GB Rp.3.300.000
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.000.000.
    Ready Stock! Samsung Galaxy Note 4 SM-N910H Rp.3.500.000
    Ready Stock! Samsung Galaxy Note 3 Rp.2.000.000
    Ready Stock ! Samsung Galaxy S5 Rp.2.000.000,
    Ready Stock ! Samsung Galaxy S4 l9500 Rp.1.500.000

    BalasHapus
  44. makasih tutorialnya gan, bisa ane kembangin sendiri!

    BalasHapus
  45. terima kasih..ini sangat membantu sekali sob

    BalasHapus
  46. nice gan, artikelnya keren banget kunjugi balik ya gan http://tulisan-kaktegar.blogspot.co.id/2014/06/cara-membuat-menu-animasi-keren-di.html

    BalasHapus

Silahkan Sobat tinggalkan komentar dengan kata - kata yang Baik, Bijak dan Sopan.

Yang tidak diperbolehkan dalam berkomentar :
1. Komentar yang mengandung unsur SARA.
2. Komentar yang berbau PORNO.
3. Komentar Saling CACI MAKI.
4. Komentar yang Memasukan LINK IKLAN dan LINK AKTIF.

Saya harap Sobat dapat mematuhi aturan berkomentar yang saya buat. Jika ada komentar yang melanggar ketentuan tersebut diatas dan dianggap spam akan Saya Hapus. Atas kerjasama sobat sekalian saya ucapkan banyak Terima Kasih. Salam Sukses selalu untuk Sobat dan Salam Blogger.