Banner 468x60

Menu Bar Keren Dengan CSS3

Menu Bar Keren Dengan CSS3




Cara Membuat Menu Dar Keren Dengan CSS3 Pada Blog - Selamat siang sobat blogger. 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.


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.



  • Sekian Tutorial Blog Dari Cyber Creative
    Semoga Bermanfaat 

    13 komentar

    Bagus Ni Untuk DI Coba
    IZin Ya Bang

    mantap gan ,
    thks tutorialnya sangat bermanfaat..

    kayaknya keren nih sob , ane terapin dah di blog ane yang 1nya

    Terima Kasih Udah Mampir ;)

    I am regular visitor, how are you everybody? This piece of writing posted at this web
    page is really good.

    My webpage ... socialflymedia

    wah menubarnya keren sob , tapi gkada demonya :(
    lain kali di kasih demo ya :D
    ane terapin di blog ane yang sebelah hehe ;)