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



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.

Posting Komentar Blogger Disqus

  1. Kayanya baru lagi nih artikel...bagus nih.Bisa bantu saya ga mas.Saya ingin pakai menudropdown yang ini.Tapi saya sudah terlanjur mau muntah ngedit html url nya.Maklum...ga ngerti ngerti amat ngedit html.
    Kalau misalnya saya minta bantu dibikinkan menudropdown yang ini,tapi menyesuaikan dengan URL yang sudah saya buat didropdown menu sebelumnya boleh ga?Please....sampean soalnya bagi saya adalah salah ssatu master blog yang pantas jadi guru. Ini saya kirim URL saya tapi lewat email aja ya...

    BalasHapus
  2. @HJS798InsyaAllah akan Saya bantu, silahkan kirimkan via contack email saja!

    BalasHapus
  3. Mas...saya perbanyak penyebaran artikel artikel dari web blog ini di blog yang baru saya buat boleh ya......pokoknya hanya membantu memperbanyak saja dengan authornya bersumber dari blog ini juga.Soalnya saya lihat tutorial yang ada didunia diblog pada mirip mirip semua.Cuma saya lebih sering berpedomaan ke blog ini,karena saya teliti artikel dan tutorialnya lebih original.Nama Blog yang sudah saya buat " HJSHARE ".Cuma sengaja belum diisi karena saya mau menyinkronkan dulu semua tampilan,navigasi dan tetek besarnya....ha ha ha ha ha ha ha ha ha ha ha ha hht tp://reader-download.googlecode.com/svn/trunk/images/emo/haha.gif

    BalasHapus
  4. Mas...kasih masukan dong tentang website saya www.properlib.com....saya ingin mendapat kritik dan masukan versi pengunjung yang faham dunia web blog.kalau sekedar pengunjung yang tidak faham..paling paling ntar dia cari "cerita dewasa " dan yang berbau bau gitu....hahahahah..padahal web sya kan web property.Ntar saya bisa ajak makan deh atau tak undang jalan jalan ketempat saya....di...ntar gampang aja lah....kita bisa share langsung didarat.

    BalasHapus
  5. @HJS798Terimakasih atas tawarannya!
    Situs Anda menurut Saya sudah bagus... tapi lagi menurut Saya pribadi anda masih harus membenahi beberapa tag yang sepertinya kurang pas penempatannya atau tidak sesuai.

    Maaf Saya tidak bisa berkomentar di tempat Anda karna tempat untuk berkomentar tidak Ada.

    BalasHapus
  6. @HJS798Silahkan, Asalkan menyertakan url sumbernya!

    BalasHapus
  7. Nah...terimakasih banyak mas...dah berkenan memeriksa website saya.Nah...disitu itu masalah salah satunya yang masih ingin saya ketahui soal tag yang masih perlu diperbaiki.Boleh beritahu langsung mas yang dimaksudkan itu bahagian yang mana ya...masih bingung soal TAG TIG TUG nih...heheheehe

    BalasHapus
  8. Beri petunjuk tertulis deh mas...biar ga meraba raba....

    BalasHapus
  9. Jadi malu nih...belum punya kotak komentar diwebsite...hahahahah

    BalasHapus
  10. wew,,keren sobat..terimakasih sudah berbagi..

    salam kenal..visit back ya sob!

    BalasHapus
  11. Official Warning to Peugeot's Turkey Office due to fraud on service guarantee: http://donottrustpeugeot.blogspot.com/

    BalasHapus
  12. Bang untuk mengganti/ menghilangkan warna merah bagaimana?

    BalasHapus
  13. Kang, kalo mau buat menu header seperti kompi ajaib, kira-kira ada tutorialnya gak di blog akang? terimakasih....

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top