Berikut ini saya akan bagikan bagaiamana cara membuat navbar dibahwa header.mungkin kalau kita lihat di blog
terkenal atau master-master blog pasti dibawah header tamplate dipasang
yang namanya dropdown menu atau navbar menu. karena navbar dropdown
sendiri mempunyai karakter keren, simple dan tentunya akan mempermudah
pengunjung untuk melihat apa saja yang ditampilkan di blog tersebut.
Navbar dropdown yang aku share ini seperti navbar dropdown yang berada di blog Gema Santri, kalau ingin lihat silahkan klik disini. sebenarnya sudah banyak blog-blog yang membahas tentang tutorial cara membuat navbar dropdown.
namun sehubungan ada salah satu sobat saya yang tanya cara mmebuat
navbar menu ini terpaksa saya postingkan karena tidak mungkin kalau
menjelaskan dengan handphone, malah ngluarin biaya yang tak karuan
nantinya hehehehe...langsung saja yuk...kita mulai...namun silahkan
lihat dulu tampilan navbar menu yang saya share hari ini dibawah.
1. silahkan login dulu ke Blogger.
2. kalau sudah silahkan langsung menuju ke Edit HTML dan jangan lupa
untuk membackup tamplate atau unduh tamplate kalian sebelum proses ini
dimaulai caranya silahkan lihat gambar dibawah.
kalau sudah kalian berada di menu Edit Tamplate silahkan lihat menu yang berada di kanan atas (Cadangkan/Pulihkan) seperti panah di atas silahkan klik maka akan terbuka menu kayak dibawah ini.
silahkan kalian klik Unduh template lengkap lalu simpan di hard drive kalian seperti yang ditunjukkan panah warna hitam. kalau yang berwana merah
untuk mengembalikan template kalian kalau terjadi kegagalan dalam
mengedit lengkap. caranya silahkan klik tulisan telusuri terus cari
dimana tadi sobat menaruh tamplate, kalau sudah ketemu silahkan klik
Ungggah. cara seperti diatas harus sudah bisa dilakuakan oleh seorang
blogger karena hal ini bersifat wajib dan makanan yang harus dilakukan
oleh seorang blogger. kalau kalian sudah paham cara backup tamplate dan cara upload tamplate mari kita lanjutkan tutorial cara Cara Membuat Navbar Dropdown di bawah Header.
3. kalau sudah kalian lakukan silahkan centang expant tamplate. kalau
sudah kalian centang silahkan kalian cari kode seperti ini ]]></b:skin>.
4. kalau sudah kalian dapatkan kode kayak diatas silahkan taruh kode dibawah ini tepat diatasnya.
Buka Kodenya >>
/* ----- SUBNAV GIGA-WATT.BLOGSPOT.COM ----- */
#subnav {
clear: both;
width: 978px;
height: 29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0cn52BNFyeskiwlhI5J6ZviVutk42qYyLQI4B90THGi7GvR6rJC481TUy6jv025K0D7PCUVb8d5AJeW2gQqR-gC266A09xOndycZX1657JH_wQTPlJOFbdttHb8KHcymzfXJNAVBgTu4/s1600/navhov.gif) repeat-x;
color: #000;
text-align: left;
border: 1px solid $linkbarmainBorderColor;
margin: 0;
padding: 0;
}
#subnav .wrap {
}
#subnav ul {
width: 100%;
float: left;
list-style: none;
margin: 0;
padding: 0 0 0 3px;
}
#subnav li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#subnav li a {
color: #fffff;
display: block;
font: $linkbarTextFont;
margin: 0;
padding: 6px 10px 6px 10px;
text-decoration: none;
text-align: left;
position: relative;
}
#subnav li a:hover, #subnav li a:active, #subnav .current_page_item a {
background:#979797;}
#subnav li a.sf-with-ul {
padding-right: 10px;
}
#subnav li a .sf-sub-indicator {
background: url(images/arrow-down.png);
display: block;
width: 10px;
height: 10px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
top: 11px;
right: 5px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background:#979797;
color: #ffffff;
width: 150px;
font: $linkbarTextFont;
margin: 0;
padding: 6px 10px 6px 10px;
position: relative;
}
#subnav li li a:hover, #subnav li li a:active {
background:#979797;
}
#subnav li li a .sf-sub-indicator {
background: url(images/arrow-right.png);
top: 5px;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0;
padding: 0;
}
#subnav li ul a {
width: 160px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -33px 0 0 179px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfHover ul ul, #subnav li.sfHover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfHover ul, #subnav li li.sfHover ul, #subnav li li li.sfHover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfHover {
position: static;
}
kalau sudah kalian taruh silahkan sesuaikan lebar dari navabar yang
kalian inginkan kode warna merah diatas yang kalian ganti, kalian bisa
lihat lebar templat kalian di kode seperti ini.
#header-wrapper {
margin: 7px 0px 7px 0px;
padding: 0px;
width: 978px;
height: 250px;
border: 1px solid $headerBorderColor;
}
warna merah diatas lebar dari template kalian. tentu sekarang sudah paham ya...kalau sudah paham kita lanjutkan lagi.
margin: 7px 0px 7px 0px;
padding: 0px;
width: 978px;
height: 250px;
border: 1px solid $headerBorderColor;
}
warna merah diatas lebar dari template kalian. tentu sekarang sudah paham ya...kalau sudah paham kita lanjutkan lagi.
5. temukan kode kayak ini. <div id='content-wrapper'> kalau sudah kalian menemukan kodenya silahkan taruh kode dibawah ini tepat diatasnya.
Buka Kodenya >>
<div id='subnav'>
<div class='wrap'>
<ul class='nav superfish'>
<li><a>Menu 1.1</a>
<ul>
<li><a href='#'>Menu.1</a></li>
<li><a href='#'>Menu.2</a></li>
<li><a href='#'>Menu.3</a></li>
<li><a href='#'>Menu.4</a></li>
<li><a href='#'>Menu.5</a></li>
</ul>
</li>
<li><a>Menu 1.2</a>
<ul>
<li><a href='#'>Menu.1</a></li>
<li><a href='#'>Menu.2</a></li>
<li><a href='#'>Menu.3</a></li>
<li><a href='#'>Menu.4</a></li>
<li><a href='#'>Menu.5</a></li>
</ul>
</li>
<li><a>Menu 1.3</a>
<ul>
<li><a href='#'>Menu.1</a></li>
<li><a href='#'>Menu.2</a></li>
<li><a href='#'>Menu.3</a></li>
</ul>
</li>
<li><a>Menu 1.4</a>
<ul>
<li><a href='#'>Menu.1</a></li>
<li><a href='#'>Menu.2</a></li>
<li><a href='#'>Menu.3</a></li>
<li><a href='#'>Menu.4</a></li>
<li><a href='#'>Menu.5</a></li>
</ul>
</li>
<li><a>Menu 1.5</a>
<ul>
<li><a href='#'>Menu.1</a></li>
<li><a href='#'>Menu.2</a></li>
<li><a href='#'>Menu.3</a></li>
<li><a href='#'>Menu.4</a></li>
<li><a href='#'>Menu.5</a></li>
</ul>
</li>
<li><a>Menu 1.6</a>
<ul>
<li><a href='#'>Menu.1</a></li>
<li><a href='#'>Menu.2</a></li>
<li><a href='#'>Menu.3</a></li>
<li><a href='#'>Menu.4</a></li>
<li><a href='#'>Menu.5</a></li>
</ul>
</li>
<li><a>Menu 1.7</a>
<ul>
<li><a href='#'>Menu.1</a></li>
<li><a href='#'>Menu.2</a></li>
<li><a href='#'>Menu.3</a></li>
<li><a href='#'>Menu.4</a></li>
<li><a href='#'>Menu.5</a></li>
</ul>
</li>
<li><a>Menu 1.8</a>
<ul>
<li><a href='#'>Menu.1</a></li>
<li><a href='#'>Menu.2</a></li>
<li><a href='#'>Menu.3</a></li>
<li><a href='#'>Menu.4</a></li>
<li><a href='#'>Menu.5</a></li>
</ul>
</li>
<li><a>Menu 1.9</a>
<ul>
<li><a href='#'>Menu.1</a></li>
<li><a href='#'>Menu.2</a></li>
<li><a href='#'>Menu.3</a></li>
<li><a href='#'>Menu.4</a></li>
<li><a href='#'>Menu.5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script src='http://navbar-gemasantri.googlecode.com/files/navbargemasantri.js' type='text/javascript'/>
<div style='clear: both;'/>
silahkan kalian isi menu menu yang akan kalian tampilkan. di tulisan
menu-menu yang sudah aku beri kodenya. Javascript yang berada di bawah
ini jangan kalian hapus karena kode javascript ini berguna untuk
mengatur kecepatan dropdown dari navbar ini sendiri, kalau kalian tidak
percaya silahkan kalian hapus.
6. kalau sudah kalian taruh kodenya sekarang mulai save atau simpan. dan lihat hasilnya.
Comments