capoenk 06

Membuat Navigation Menus Css3 Bergaya Attractive Dark

Posted in Css3, Image, Menu





Mengingat akan banyaknya blogger yang kebingungan tentang cara pemasangan maka kali ini Saya akan memberikan Cara Membuat + Memasangnya di Blogger, silahkan ikuti langkah berikut untuk memulainya:


1. Login ke Akun Blogger Anda.
2. Pilih Template > Edit HTML.
3. Sekarang temukan kode ]]></b:skin>
4. Lalu letakkan kode berikut di atasnya

/* CSS3 Kode untuk menu dimulai di sini otowebsite.blogspot.com */
#ow_navs {
 background:#2c2c2c;
 margin:0 auto;
 height:50px;
 border-bottom:5px solid #cd2122;
}
 #ow_navs .menu-alert{
 float:left;
 padding:18px 0 0 10px ;
 font-style:italic;
 color:#FFF;
 }
 #top-menu-mob , #main-menu-mob{ display:none; }
 #ow_navs ul li {
 text-transform: uppercase;
 font-family: Oswald,arial,Georgia, serif;
 font-size:16px;
 position: relative;
 display: inline-block;
 float: left;
 border:1px solid #222222;
 border-width:0 0 0 1px;
 height:50px;
 }
 #ow_navs ul li:first-child,
 #ow_navs ul li:first-child a{border:0 none;}
 #ow_navs ul li:last-child a{border-right:0 none;}
 #ow_navs ul li a {
 display: inline-block;
 height: 50px;
 line-height: 50px;
 color: #ddd;
 padding:0 14px;
 text-shadow:0 1px 1px #000;
 border-left:1px solid #383838;
 }
 #ow_navs ul li a .sub-indicator{}
 #ow_navs ul li a:hover {}
 #ow_navs ul ul{
 display: none;
 padding:0;
 position: absolute;
 top: 50px;
 width: 180px;
 z-index: 99999;
 float: left;
 background: #2d2d2d !important;
 -webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
 box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
 -webkit-border-bottom-right-radius: 3px;
 -webkit-border-bottom-left-radius: 3px;
 -moz-border-radius-bottomright: 3px;
 -moz-border-radius-bottomleft: 3px;
 border-bottom-right-radius: 3px;
 border-bottom-left-radius: 3px;
 }
 #ow_navs ul ul li, #ow_navs ul ul li:first-child {
 background: none !important;
 z-index: 99999;
 min-width: 180px;
 border:0 none;
 border-bottom: 1px solid #222;
 border-top: 1px solid #383838;
 font-size:13px;
 height:auto;
 margin:0;
 }
 #ow_navs ul ul li:first-child ,#ow_navs ul li.current-menu-item ul li:first-child,
 #ow_navs ul li.current-menu-parent ul li:first-child,#ow_navs ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
 #ow_navs ul ul ul ,#ow_navs ul li.current-menu-item ul ul, #ow_navs ul li.current-menu-parent ul ul, #ow_navs ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
 #ow_navs ul.sub-menu a ,
 #ow_navs ul ul li.current-menu-item a,
 #ow_navs ul ul li.current-menu-parent a,
 #ow_navs ul ul li.current-page-ancestor a{
 border:0 none;
 background: none !important;
 height: auto !important;
 line-height: 1em;
 padding: 10px 10px;
 width: 160px;
 display: block !important;
 margin-right: 0 !important;
 z-index: 99999;
 color: #ccc !important;
 text-shadow:0 1px 1px #000 !important;
 }
 #ow_navs ul li.current-menu-item ul a,
 #ow_navs ul li.current-menu-parent ul a,
 #ow_navs ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
 #ow_navs ul li:hover > a, #ow_navs ul :hover > a { color: #FFF ;}
 #ow_navs ul ul li:hover > a,
 #ow_navs ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;}
 #ow_navs ul li:hover > ul {display: block;}
 #ow_navs ul li.current-menu-item,
 #ow_navs ul li.current-menu-parent,
 #ow_navs ul li.current-page-ancestor{
 margin-top:0;
 height:50px;
 border-left:0 none !important;
 }
 #ow_navs ul li.current-menu-item ul.sub-menu a, #ow_navs ul li.current-menu-item ul.sub-menu a:hover,
 #ow_navs ul li.current-menu-parent ul.sub-menu a, #ow_navs ul li.current-menu-parent ul.sub-menu a:hover
 #ow_navs ul li.current-page-ancestor ul.sub-menu a, #ow_navs ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
 #ow_navs ul li.current-menu-item a, #ow_navs ul li.current-menu-item a:hover,
 #ow_navs ul li.current-menu-parent a, #ow_navs ul li.current-menu-parent a:hover,
 #ow_navs ul li.current-page-ancestor a, #ow_navs ul li.current-page-ancestor a:hover{
 background:#cd2122;
 text-shadow:0 1px 1px #b43300;
 color:#FFF;
 height:50px;
 line-height:50px;
 border-left:0 none !important;
 }
 #ow_navs ul.sub-menu li.current-menu-item,#ow_navs ul.sub-menu li.current-menu-item a,
 #ow_navs li.current-menu-item ul.sub-menu a,#ow_navs ul.sub-menu li.current-menu-parent,
 #ow_navs ul.sub-menu li.current-menu-parent a,#ow_navs li.current-menu-parent ul.sub-menu a,
 #ow_navs ul.sub-menu li.current-page-ancestor,#ow_navs ul.sub-menu li.current-page-ancestor a,
 #ow_navs li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
 #ow_navs ul li.menu-item-home ul li a,
 #ow_navs ul ul li.menu-item-home a,
 #ow_navs ul li.menu-item-home ul li a:hover{
 background-color:transparent !important;
 text-indent:0;
 background-image:none !important;
 height:auto !important;
 width:auto;
 }

5. Simpan template.

6. Sekarang pergi ke Tata Letak > Tambah Gadget.

7. Pilih Elemen HTML/JavaScript.

8. Copy kode berikut dan letakkan di dalamnya.

<nav id="ow_navs">
<div class="container">
<div class="main-menu">
<ul class="menu" id="menu-main">
<li><a href="http://otowebsite.blogspot.com/">Home</a></li>
<li><a href="#">Mode</a>
<ul class="sub-menu">
<li><a href="#">Modeling</a></li>
<li><a href="#">Kebanyakan Model</a></li>
<li><a href="#">Model BonBin</a></li>
<li><a href="#">Nggak ada Model</a></li>
</ul>
</li>
<li><a href="#">Downloads</a>
<ul class="sub-menu">
<li><a href="#">Template</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Social</a></li>
<li><a href="#">Video Apa Aja</a></li>
</ul>
</li>
<li><a href="#">Templates</a>
<ul class="sub-menu">
<li><a href="#">Authors</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Tags</a></li>
<li><a href="#">Timeline</a></li>
</ul>
</li>
<li><a href="#">Categori</a>
<ul class="sub-menu">
<li><a href="#">Blogger Trick</a></li>
<li><a href="#">CSS Trick</a></li>
<li><a href="#">Berita Olahraga</a></li>
<li><a href="#">Berita Social Media</a></li>
<li><a href="#">Social Media</a></li>
<li><a href="#">Dan Lain-lain deh</a></li>
</ul>
</li>
<li><a href="#">Layout</a>
<ul class="sub-menu">
<li><a href="#">Full Width</a></li>
<li><a href="#">Right Sidebar</a></li>
<li><a href="#">Left SIdebar</a></li>
</ul>
</li>
<li><a href="#">Social Media</a>
<ul class="sub-menu">
<li><a href="#">Google Plus</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Pinterest</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

9. Simpan.

• Keterangan: Silahkan Anda sesuaikan menu ini dengan menambahkan URL dan Nama Menu.