Search

Membuat Submenu di blogspot


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(http://2.bp.blogspot.com/_awHNRwYk92g/TL5YwelBLXI/AAAAAAAAAB0/nV9idFZw0Qo/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