Ikuti langkah dibawah step by step
STEP 1
- Login ke dalam akun blogger anda
- Pilih blog yang akan dipasangi
- Pilih Menu Template
- Klik EDIT HTML.
- Setelah itu akan muncul tetingkap HTML,
- KLIK Control F dan Carilah kode ]]></b:skin>.
Copy kode CSS di bawah ini dan paste tepat di atas kode ]]></b:skin> tadi.
#RickyMenu {
background: warna1;
width: 880px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: warna2;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#Rickybox {
width: 875px;
float: left;
margin: 0;
padding: 0;
}
#punch {
margin: 0;
padding: 0;
}
#punch ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#punch li {
list-style: none;
margin: 0;
padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
color: warna2;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#punch li a:hover, #punch li a:active {
background: warna2;
color: warna1;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
background: warna1;
width: 150px;
color: warna2;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#punch li li a:hover, #punch li li a:active {
background: warna2;
color: warna1;
padding: 7px 10px;
}
#punch li {
float: left;
padding: 0;
}
#punch li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#punch li ul a {
width: 140px;
}
#punch li ul ul {
margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
left: auto;
}
#punch li:hover, #punch li.sfhover {
position: static;
}
Ganti kode warna1 dan warna2 dengan kode warna yang anda inginkan,
(dapatkan HTML kod di SINI)
STEP 2
Seterusnya memasang kod di gadget HTML
Klik ke page LAYOUT
Klik Add Gadget dan cari dan klik HTML/ JavaScribt
Copy kod dibawah :
<div id="RickyMenu">
<div id="Rickybox">
<ul id="punch">
<li><a href="#">HOME</a></li>
<li><a href='' rel='nofollow' target='_blank'>page 1</a>
<ul>
<li><a href='http://myfxtm.blogspot.com/' rel='dofollow' target='_blank'>sub 1</a></li>
<li><a href='http://myfxtm.blogspot.com' rel='dofollow' target='_blank'>sub 2</a></li>
<li><a href='http://myfxtm.blogspot.com' rel='dofollow' target='_blank'>sub 3</a></li>
<li><a href='http://myfxtm.blogspot.com' rel='dofollow' target='_blank'>sub 4</a></li>
</ul>
</li>
<li><a href='http://myfxtm.blogspot.com/' rel='nofollow' target='_blank'>page 2</a>
<ul>
<li><a href='http://myfxtm.blogspot.com/' rel='dofollow' target='_blank'>sub 1</a></li>
<li><a href='http://myfxtm.blogspot.com' rel='dofollow' target='_blank'>sub 2</a></li>
<li><a href='http://myfxtm.blogspot.com' rel='dofollow' target='_blank'>sub 3</a></li>
<li><a href='http://myfxtm.blogspot.com' rel='dofollow' target='_blank'>sub 4</a></li>
</ul>
</li>
<li><a href='http://myfxtm.blogspot.com/' rel='nofollow' target='_blank'>page 3</a>
<ul>
<li><a href='http://myfxtm.blogspot.com/' rel='dofollow' target='_blank'>sub 1</a></li>
<li><a href='http://myfxtm.blogspot.com' rel='dofollow' target='_blank'>sub 2</a></li>
<li><a href='http://myfxtm.blogspot.com' rel='dofollow' target='_blank'>sub 3</a></li>
<li><a href='http://myfxtm.blogspot.com' rel='dofollow' target='_blank'>sub 4</a></li>
</ul></li></ul>
</div>
</div>
Pastekan Kod diatas didalam kotak HTML tadi.
(sila tukarkan link dan tajuk yg berwarna dengan link blog anda)
Untuk Menambah Item di dalam drop down menu:
- Cari pada bagian akhir Pada kode seperti ini:
<li><a href="#">Blog Page</a></li>
</ul>
- Tepat di bagian atas </ul> bisa disisipkan menu baru, dan akan terlihat seperti di bawah ini:
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU">TEKS BARU</a></li>
</ul>
- Jika menu tambahan lebih dari satu akan terlihat seperti di bawah ini
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>
<li><a href="LINK BARU 2">TEKS BARU 2</a></li>
<li><a href="LINK BARU n">TEKS BARU n</a></li>
</ul>
- Jika salah satu menu tambahan mempunyai sub menu, maka perhatikan kode </li> menu tersebut yang diturunkan untuk membuka ruang baru bagi sub menu di dalam menu tersebut
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>
<li><a href="LINK BARU 2">TEKS BARU 2</a><li><a href="LINK BARU SUB MENU 1">SUB MENU 1</a></li><li><a href="LINK BARU SUB MENU 2">SUB MENU 2</a></li></li><li><a href="LINK BARU n">TEKS BARU n</a></li>
</ul>
