Modifikasi Navbar Menjadi Menu Horizontal Cantik

Coretan Bang Dadan on

Sunday, December 16, 2012

Klik gambar untuk memperbesar

Modifikasi Navbar Menjadi Menu Horizontal Cantik | Pada pembahasan kali ini bang dadan akan coba membahas cara memodifikasi navbar menjadi menu horizontal cantik. Navbar ini ni biasanya terdapat pada template standar bawaan blogger, kalau saya lihat pada template hasil modifikasi orang kebanayakan navbarnya sudah tidak di aktifkan. dan tutorial ini sudah saya coba pada template standar blogger pt keren sekali. Nah baiklah kalau sobat menggunakan template standar blogger, dan ignin menerapkan tutorial ini silahkan ikuti petunjuknya dibawah ini.

DEMO

Modifikasi Navbar Menjadi Menu Horizontal Cantik

Pertama silahkan login terlebih dahulu pada akunya masing-masing
Selanjutnya menuju Rancangan
Lalu pilih Template
Klik Edit HTML *jangan lupa centang expand template widgate.

Saran* Alangkah baiknya sobat backup template terlebih dahulu untuk berjaga - jaga dan meminimalisir tierjadinya kesalahan.

Selanjutnya cari kode ]]></b:skin>. *gunakan ctrl+f untuk mempermudah
Copy kode berikut tepat diatas ]]></b:skin>

#navbar-iframe {
height:0px; visibility: hidden; display: none;
}
/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Bang Dadan
Blog: Coretan Bang Dadan
URL : http://bangdadan.blogspot.com/
--------------------------------------------------------------*/
.bilah-menu-atas {
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 27px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #336699;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
box-shadow: 0px 2px 0px rgb(14, 90, 140);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kolom-utama {
-moz-transition: all 0.2s linear 0s;
width: 960px;
height: auto;
margin: 0px auto;
}

.kolom-menu {
width: 521px;
height: auto;
margin: 0px 0px 0px -41px;
float: left;
display: inline;
}

.kolom-menu ul {
height: auto;
margin-top: 0px;
}

.kolom-menu ul li {
float: left;
position: relative;
list-style: none outside none;
}

.kolom-menu ul li:first-child {
border-left: 1px solid rgba(30, 30, 30, 0.125);
}

.kolom-menu ul li a {
color: #ffffff;
font-weight: bold;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
position: relative;
border-right: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
background-color: rgba(255, 255, 255, 0.125);
}

Berikutnya silahkan sobat cari kode <body> atau </body> dan tempatkan kode di bawah ini di sebelum tag </body> atau sesudah tag <body> terserah sobat, yang penting kode dibawah ini ada diantara kode di atas itu.

Berikut kodenya:

<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://bangdadan.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2bFGMOhy0zwvE8Ibl4MoL2iTYkjwVYWGWu43nssH8AOEHoOmTdM64BkMDLVT4GT-HLhb1E3Vj-dn1yFhNvw5Q_vXDBMJnbPqoTnCM4tkl-R4KDaKep9GqcGGh5bvHIBEd5vpMk_fKsEU/s800/Beranda.png' width='20px'/></a></li>
<li><a href='URL'>Menu Kiri 1</a></li>
<li><a href='URL'>Menu Kiri 2</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='URL'>Menu Kanan 1</a></li>
<li><a href='URL'>Menu Kanan 2</a></li>
</ul> </div> </div> </div>

Selanjutnya simpan template anda.

Keterangan *Ganti tulisan yang berwarna merah dengan menu sesuai keinginan anda, dan apabila anda ingin menambah atau mengurangi menu itu sobat hanya cukup menambahkan atau menghapus kode <li><a href='URL'>Menu</a></li>.

Nah mungkin sekian dulu pembahasan kita kali ini tentang Modifikasi Navbar Menjadi Menu Horizoantal Cantik. semoga artikel ini bermanfaat bagi sobat semuanya. Akhir kata bang dadan ucapkan selamat mencoba dan semoga succes. Semangat..!!!

Labels: blogger tutorial, template hack

Thanks for reading Modifikasi Navbar Menjadi Menu Horizontal Cantik. Please share...!

15 Comments on Modifikasi Navbar Menjadi Menu Horizontal Cantik

Big BuyaJanuary 16, 2013 at 12:54 PM
gan saya punya blog www.kapangratis.com saya ingin buat menu horisontal diatas header tidak bergerak saat blog di geser kebwah seperti demonya ini gimana gan??? maaf newbi
Dadan DRJanuary 16, 2013 at 1:03 PM
Oh iya ikuti aja tutorial diatas, itu untuk menu horizontal seperti yg dikatakan sobat tadi. ヅ
Kalau ada yg ditanyakan lg silahkan jgn sungkan2.
Semoga bermanfaat ya sob ?
Big BuyaJanuary 16, 2013 at 1:11 PM
terima kasih_ saya udah ada gan menu horisontal diatas headernya dari template bawaan pocong! ada kodenya gak gan agar tu menu tetap melanyang saat diatas saat blog di geser ke bawah?
Dadan DRJanuary 16, 2013 at 2:01 PM
Coba cari kode position pada menu horizontal itu, kemudian rubah menjadi fixed.
contoh:
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 27px;
font-size: 13px;
z-index: 99;

Coba aya ya gan?
UnknownJanuary 31, 2013 at 10:44 PM
di sini gambarnya bs di klik untuk di perbesar tapi tombol demonya tidak jalan K'
AnonymousFebruary 6, 2013 at 9:30 PM
salam rahayu bang dadan sukses selalu ya
UnknownJuly 3, 2013 at 11:52 AM
wah ini dia artikel yang saya cari, terimaksih gan sudah mau berbagi....
AnonymousJuly 3, 2013 at 11:53 AM
wah ini dia artikel yang saya cari, terimaksih gan sudah mau berbagi....
sufyan YaanOctober 20, 2018 at 11:02 PM
mantap tutorialnya

Modifikasi Navbar Menjadi Menu Horizontal Cantik

Previous

Next ➧

15 Comments on Modifikasi Navbar Menjadi Menu Horizontal Cantik