Membuat Navigation Menus Css3 Bergaya Attractive Dark

Navigation Menus adalah sebuah alat yang kegunaanya untuk memudahkan Pengunjung untuk mengetahui isi dari web kita. Navigation Menus Tidak jauh beda dengan daftas isi sebuah web, perbedaannya hanya jika daftar isi maka kita akan di suguhi semua daftar posting yang ada di web tersebut, sementara Navigation Menus kita akan di suguhi apa yang Admin web tersebut pasang pada Navigation Menus  seperti halaman, profil dan lain sebagainya. Untuk perjumpaan kali ini kita akan berbagi tutorial blogger yang membahas tentang Navigation Menus ya itu : Membuat Navigation Menus Css3 Bergaya Attractive Dark.
Membuat Navigation Menus Css3 Bergaya Attractive Dark adalah sebuah navigasi bergaya Attractive Dark yang sangat menarik, untuk lebih jelasnya silahkan lihat demo berikut:

Lihat Demo

Lihat Demo

Cara Membuat + Cara Memasang di Blogger

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.

Dari Meja Editor

Saya rasa cukup sekian untuk tutorial blogger kali ini yang membahas Membuat Navigation Menus Css3 Bergaya Attractive Dark, mudah-mudahan artikel ini dapat bermanfaat untuk teman-teman semua. Bila ada kesulitan dalam peenginstalan Membuat Navigation Menus Css3 Bergaya Attractive Dark maka silahkan ajukan pertanyaan Anda dalam komentar.