Yang mau tahu cara bikin submenu di blogspot, di sini tempat nya ! saya
dapet info ini dari www.blog.jtc-indonesia.com dan saya edit sedikit untuk mempermudah !!!
Masuk ke blogger
Masuk ke edit HTML
masukan kode di bawah ini di atas kode ]]></b:skin>
/* ----- NAVBAR MENU ----- */
#NavbarMenu {
width: 920px;
height: 35px;
background:#FF6600 url(http://1.s3.envato.com/files/215826.jpg)
repeat-x top;
color: #fffffffff
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Calibri, Verdana;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #ffffff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#339900;
color: #ffffff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited
{
background: #ffffff
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV6R70Rp7t2F7PHwjtWeGIYP-MnJnY9fZyD_bIF1gHthUidYLNADVd_ow285fGWkJvNte9U43s_H7U4skZrgJV68UELb-bIBAfasT8xKkbGl0ZFchqnHOfdjv-vZj2j9U8Qsr5yaN-PZ8/s1600/green-abstract-background.jpg)
repeat-x top;
width: 150px;
color: #ffffff;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #FF6600;
color: #ffffff;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav
li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li
li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover
ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
Cari kode seperti berikut :
<div class='region-inner
header-inner'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true'
title='nama blog kamu (Header)' type='Header'/>
</b:section>
</div>
Setelah itu masukan kode di bawah ini di di bawh kode diatas
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a
expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li><a href='#'>Judul
Menu</a>
<ul>
<li><a href='alamat
blog yang dituju '>judul submenu</a></li>
</ul>
</li>
<li><a href='#'>
Judul Menu </a>
<ul>
<li><a href='
alamat blog yang dituju '> judul submenu
</a></li>
<li><a href='
alamat blog yang dituju '> judul submenu
</a></li>
</ul>
</li>
<li><a href='#'>
Judul Menu </a>
<ul>
<li><a href='
alamat blog yang dituju '> judul submenu
</a></li>
</ul>
</li>
</ul>
</div>
</div> <!-- end navbar -->
Setelah dimasukan, ganti teks yang berwarna merah dengan menu kamu. Contoh :
<li><a href='#'>Cheat</a>
kemudian ganti teks yang berwarna hijau dengan nama submenu kamu.
Contoh :
<li><a
href='http://remajakreatif24.blogspot.com/2012/02/gta-san-andreas-ps-2.html'>
GTA San Andreas </a></li>
lalu ganti teks yang berwarna biru almat
web kamu. Contoh :
<li><a href='http://remajakreatif24.blogspot.com/2012/02/gta-san-andreas-ps-2.html'>
GTA San Andreas </a></li>
Lalu simpan Template. Selamat mencoba !!!
Tidak ada komentar:
Posting Komentar