Artikel kali ini. Langsung saja nich buat para blogger pemula kayak saya yang masih kebingungan gimana sich Cara membuat menubar di atas header. Sekarang tidak usah bingung,disini sekarang dan hari ini king akan membahasnya.
menubar di atas header akan terlihat seperti gambar. Gimana keren kan (Pasti donk). hehehe
Gini nich,simak baik-baik ya :
- Langkah pertama, Login ke blog sobat
- Pilih Edit HTML pada elemen Template sobat
- Cari kode ]]></b:skin> agar lebih cepat gunakan CTRL +F
- Setelah ketemu, letakkan kode berikut ini tepat di ATASnya.
- Setelah itu cari kode <div id='header-wrapper'> atau kode <div id='wrapper'>
- Letakkan kode berikut ini di ATASnya.
#catmenucontainer{
height:33px;
width:962px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgThlaQgLnoepdcv9_2JIKJq3ZQUD7pgE3C5xLgGE_6KLzhVlgI6xGhM0QV5ZcuBRL-OGcZobv91Z-EERFlN1EIbkqhTkLbSqDf9Skj3jT3qViaazJ8SJ5hpbS5tcEMBUGSlAyHwbENhfpf/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:962px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgThlaQgLnoepdcv9_2JIKJq3ZQUD7pgE3C5xLgGE_6KLzhVlgI6xGhM0QV5ZcuBRL-OGcZobv91Z-EERFlN1EIbkqhTkLbSqDf9Skj3jT3qViaazJ8SJ5hpbS5tcEMBUGSlAyHwbENhfpf/) repeat-x;
height:33px;
}
#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}
#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiToa8DNFUpFmCh6Rg-QX2Yx2z5BtgP1Ms13oZ8feSQBlFiy3LkSiiROMsGH0b9ZXKaMt0kCjvROkDK07e4IaIJ2HOav8QkVjDRbLJ36hBD9Plme7pFYP0IPPjqZ9hvX_1oGfizLzQ62gmq/) repeat-x;
color: #b0c4de;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiToa8DNFUpFmCh6Rg-QX2Yx2z5BtgP1Ms13oZ8feSQBlFiy3LkSiiROMsGH0b9ZXKaMt0kCjvROkDK07e4IaIJ2HOav8QkVjDRbLJ36hBD9Plme7pFYP0IPPjqZ9hvX_1oGfizLzQ62gmq/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}
#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}
#catmenu li li {
}
#catmenu li ul a {
width: 140px;
}
#catmenu li ul a:hover, #catmenu li ul a:active {
}
#catmenu li ul ul {
margin: -34px 0 0 170px;
}
#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}
#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}
#catmenu li:hover, #catmenu li.sfhover {
position: static;
}
<div id='catmenucontainer'>
<div id='catmenu'> <ul>
<li><a href='Link Utama Blog Sobat'>Home</a></li>
<li><a href='#' title='Link-Title'>menu 1</a></li>
<li><a href='#' title='Link-Title'>menu 2</a></li>
<li><a href='#' title='Berisi tentang info-info'>menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#' title='Link-Title'>menu 5</a></li>
<li><a href='#' title='Link-Title'>menu6</a></li>
<li><a href='#' title='Berisi tentang info-info'>menu 7</a></li>
</ul>
</div>
</div>
Demikianlah penjelasan dari king di hari pertama kembali. Semoga bisa membantu sobat semua dalam mempercantik blog.
Bila ada yang ingin di tanyakan,bisa berkomentar dibawah. Terimakasih
gan kalo mau ngatur panjang menubar yang mana??
BalasHapus