Cara membuat submenu di blogger
Pengen menu blog anda seperti blog saya? begini caranya...............
Untuk membuat submenu semacam itu, silahkan ikuti langkah-langkah berikut ini:
1. Masuk ke Blogger
2. Klik Tata Letak
3. Klik Edit HTML
4. Cari kode: ]]></b:skin>
5. Tambahkan kode berikut ini di atas kode yang tadi (no. 4)
/* ----- NAVBAR MENU ----- */
#NavbarMenu {
width: 875px;
height: 35px;
background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
color: #ffffff
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, 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:#FF6600;
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://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) 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;
}
|
6. Kemudian, cari kode ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>
|
7. Tambahkan kode berikut ini di bawah kode no. 6
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li><a href='#'>Menu-1</a>
<ul>
<li><a href='#'>SubMenu-1-1</a></li>
<li><a href='# '> SubMenu-1-2</a></li>
</ul>
</li>
<li><a href='#'>Menu-2</a>
<ul>
<li><a href='#'>SubMenu-2-1</a></li>
<li><a href='#'> SubMenu-2-2</a></li>
</ul>
</li>
<li><a href='#'>Menu-3</a>
<ul>
<li><a href='#'>SubMenu-3-1</a></li>
<li><a href='# '> SubMenu-3-2</a></li>
<li><a href='#'> SubMenu-3-3</a></li>
</ul>
</li>
<li><a href='#'>Menu-4 </a></li>
</ul>
</div>
</div> <!-- end navbar -->
|
8. Simpan
Selamat mencoba
1. anda pergi ke picasa web album anda
Membuat Icon pada Address Bar Link
Cara mengubah icon
di address bar seperti pada blog dan kayak gambar di atas ini seperti
logo yahoo ternyata cukup mudah, anda hanya perlu menyisipkan sedikit
kode script pada template anda dan mengupload gambar anda, baiklah
begini caranya:
1. anda pergi ke picasa web album anda
2.Upload gambar yang ingin anda pakai
3.Copy Direct Link gambar nya
4.Anda login ke blogger dan langsung aja ke edit HTML (edit templete)
4.Anda login ke blogger dan langsung aja ke edit HTML (edit templete)
5.Jangan lupa
di centang .
6.cari kode tag </head>
7. kalo dah ketemu kemudian letakkan script di bawah ini di atas tag </head>
7. kalo dah ketemu kemudian letakkan script di bawah ini di atas tag </head>
<link
href='http://img98.imageshack.us/img98/9617/image3cr0.gif'
rel='SHORTCUT ICON'/>
8. ganti alamat yang
di cetak tebal dengan Direct Link gambar yang telah anda upload tadi.
9. klik simpan.Dan jika tahapan yang anda lakukan benar maka icon di addres bar anda akan berubah secara otomatis seperti contoh di blog ini.
9. klik simpan.Dan jika tahapan yang anda lakukan benar maka icon di addres bar anda akan berubah secara otomatis seperti contoh di blog ini.
Semoga bermanfaat
By gallery dunia.com
