Cara Menambahkan Menubar diatas Header Blog Dengan Dropdown Menu
Senin, Mei 30, 2016
Tambah Komentar
Encrypting your link and protect the link from viruses, malware, thief, etc! Made your link safe to visit.
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>
/* -- 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>
<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
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,
Link will be apear in 15 seconds.
Belum ada Komentar untuk " Cara Menambahkan Menubar diatas Header Blog Dengan Dropdown Menu"
Posting Komentar