Cara membuat menu di atas header blog
Kali ini saya akan membagi kan cara tentang membuat menu
diatas header , caranya sangat mudah dan simple aja,
Mungkin anda mau tahu tampilan menunya seperti apa, jika
ingin tahu tampilannya lihat aja tampilan atas blog saya, langsung aja kita
buat yah.. .
1. Langkah pertama, Login ke blogger.com dengan akun anda
2. Pilih Edit HTML pada elemen Template anda
3. Cari kode ]]></b:skin>
4. Setelah ketemu, letakkan kode berikut ini di ATASnya
#catmenucontainer{
height:33px;
width:962px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGCg9fr3I6xqfiB5fqOMgXPtyN_gSFcggMaAc_z0yDHTQi2CbnpGHoxY6sb5b1LnzMyM8qaN661FSUSc2mmsCBWU-aSSXF2SJQ55ljIEJfGLKwYgsU_QTUl6XzBzyY52jui1moZ1bRpb8Z/)
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
#ffffff;
}
#catmenu{
margin: 0px;
padding: 0px;
width:962px;
background:#252525
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGCg9fr3I6xqfiB5fqOMgXPtyN_gSFcggMaAc_z0yDHTQi2CbnpGHoxY6sb5b1LnzMyM8qaN661FSUSc2mmsCBWU-aSSXF2SJQ55ljIEJfGLKwYgsU_QTUl6XzBzyY52jui1moZ1bRpb8Z/)
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: #ffffff;
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/AVvXsEiDN2XZWp-WBUAIirYdnC5sCShk85DoyQxBZxfZYsupUkHvoRgeuR0hCWFsIkFf-QznNFT_d3e6GuDOOpVF5NY399VHIqWwWIwJBqL6sK8LDmbp2uCINAb1oYDJH8ySMWFXy0rbtCP2XHLH/)
repeat-x;
color: #b9bf13;
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:#ff0202;
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/AVvXsEiDN2XZWp-WBUAIirYdnC5sCShk85DoyQxBZxfZYsupUkHvoRgeuR0hCWFsIkFf-QznNFT_d3e6GuDOOpVF5NY399VHIqWwWIwJBqL6sK8LDmbp2uCINAb1oYDJH8ySMWFXy0rbtCP2XHLH/)
repeat-x;
color: #00fff6;
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;
}
Untuk kode yang berwarna merah, silahkan ganti sesuai dengan
lebar header blog anda . lebar header kode di atas adalah panjang header blog
saya.
4. Setelah itu cari kode <div
id='header-wrapper'>
5. Letakkan kode berikut ini di atasnya
<div
id='catmenucontainer'>
<div
id='catmenu'>
<ul>
<li><a
href='http://ariefradcliffe.blogspot.com/'><strong>Home</strong></a></li>
<li><a href='http://ariefradcliffe.blogspot.com'
title='Link-Title'><strong> Blog</strong></a>
<ul class='children'>
<li><a
href='http://ariefradcliffe.blogspot.com/search/label/Tutorial%20blog'
title='Tutorial blog'>Tutorial blog</a></li>
</ul>
</li>
<li><a href='#='Link-Title'><strong>Photoshop</strong></a>
<ul class='children'>
</ul>
</li>
<li><a href='#'
title='Link-Title'><strong>Php and Mysql</strong></a>
<ul class='children'>
</ul>
</li>
<li><a href='#title='Link-Title'><strong>Program VB 6</strong></a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Visual Basic</a>
</ul>
</li>
<li><a href='#' title='Link-Title'><strong>Animasi</strong></a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Animasi 2D</a></li>
<li><a href='#' title='Link-Title'>Animasi 3D</a></li>
</ul>
</li>
<li><a href='#' title='Link-Title'><strong>Downloads</strong></a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Aplikasi</a></li>
</ul>
</li>
<li><a href='#'
title='Link-Title'><strong>My facebook</strong></a></li>
<li><a href='#' title='Berisi tentang
info-info'><strong>Twitter</strong></a></li>
<li><a href='#' title='Berisi tentang
info-info'><strong>Google+</strong></a></li>
</ul>
</div>
</div>
Silahkan anda ganti kode yang berwarna Biru (dengan Link yg anda inginkan)
dan kode berwarna Merah dengan judul
menunya.
6. Jika sudah selesai, silahkan simpan template, sebelum di
simpan lebih baik di Pratinjau dulu (hanya untuk memastikan).
Komentar
Posting Komentar