loading...
Home » » Cara Menambahkan Menubar diatas Header Blog Dengan Dropdown Menu

Cara Menambahkan Menubar diatas Header Blog Dengan Dropdown Menu

Written By Yoshep Website on Monday, May 30, 2016 | Monday, May 30, 2016


Yoshep Web Info - Kita mungkin sering berkunjung ke blog lain dan melihat terdapat menubar diatas header dari blog tersebut dan kadang kita berfikir bagus juga tampilan blog dengan Menu Top Di Atas Header.

Pada Postingan kali ini saya akan membagikan  Cara Menambahkan Menubar diatas Header Blog Dengan Dropdown Menu Diblog

Langkahnya membuat top navigasi menu:
  • Template > Edit HTML
  • Cari/Temukan (CTRL+F) kode ]]></b:skin>
  • Simpan kode berikut ini diatas kode ]]></b:skin>
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; }
#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
Catatan :  Kode Berwarna Merah Diatas Untuk Mengubah Warna Background.
  • Cari/Temukan (CTRL+F) kode <body>
  • Simpan kode berikut ini dibawah <body> 
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>

Catatan : Ganti Kode # yang ada diatas dengan link anda
  • Terakhir Simpan Template
Gampangkan, itulah Cara Menambahkan Menubar diatas Header Blog Dengan Dropdown Menu Diblog. Jangan lupa Join This Site dan komentarnya sehabis berkunjung agar website ini selalu Update.






Keyword : Cara Tambahkan Menubar diatas Header Blog, Tambahkan Menubar diatas Header Blog Dengan Submenu, Tambahkan Menubar diatas Header Blog Dengan Dropdown menu,
Cara Membuat Menubar diatas Header Blog, Cara Membuat Menubar diatas Header Blog Dengan Submenu, Cara Membuat Menubar diatas Header Blog Dengan Dropdown menu, Cara Buat Menubar diatas Header Blog Dengan Submenu, Cara Buat Menubar diatas Header Blog Dengan Dropdown menu,

0 komentar:

Post a Comment