setelah kemarin mencoba mengutak-atik template khususnya didaerah navigasinya, ternyata berhasil juga dan disini akan saya share kembaliCara Membuat Menu Navigasi Beserta SubMenuSini yang saya dapat dari blogmas doyok.Semoga bermanfaat dan membantu anda yang lagi belajar mengutak-atik blog seperti saya.
Menu Navigasi ataupun SubMenu
ini sangat bermanfaat sekali buat blog anda karena pengunjung akan mudah sekali mengakses semua informasi yang mereka perlukan dari blog anda. Dengan kemudahan2 yang diberikan anda tersebut blog anda akan banyak yang menyukainya apalagi dibarengi dengan konten yang selalu fresh dan menarik.
Cara Membuat Menu Navigasi Beserta SubMenu:
- Login keBlogger.com
- KemudianTata Letak
- PilihEdit HTML
- CentangExpand Widget
- Copas kode berikut di atas kode]]></b:skin>
/* Navigasi Menu */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:#81BEF7; /* Warna latar belakang menu navigasi */
float:left;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px; /* Ukuran teks */
}
#navmenu li a:hover{
background:#5858FA; /* Warna latar saat kursor mouse berada di atasnya undefinedhover) */
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}
/* Sub Navigasi Menu */
#subnavmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu subnavigasi. Sesuaikan dengan lebar blog anda */
background:#5858FA; /* Warna latar belakang menu navigasi */
float:left;
}
#subnavmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#subnavmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#subnavmenu ul li {
float: left;
display:inline;
}
#subnavmenu li a, #subnavmenu li a:link, #subnavmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:5px 5px 5px 5px;
font-size:10px; /* Ukuran teks */
}
#subnavmenu li a:hover {
text-decoration:underline;
}
- Silahkan anda modifikasi sendiriukurandanwarnanya, untuk kode warna (Baca:Kode Warna HTML)
- Setelah itu, Cari kode yang seperti ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='undefinedJudul Blog Anda) undefinedHeader)' type='Header'/>
</b:section>
</div>
- Setiap template memiliki kode yang berbeda, jadi cari kode yang mirip dengan diatas.
- Kalau sudah ketemu, Copas kode berikut dibawah kode diatas.
<div id='navmenu'>
<ul id='navmenu'>
<li><a href='
/'>Home</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Blogger Tips</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Blogger Tricks</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Blogger Widgets</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Blogger Tools</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Blogger News</a></li>
</ul>
</div>
<div id='subnavmenu'>
<ul id='subnavmenu'>
<li><a href='http://twitter.com/rasiqzone'>Follow me on Twitter</a></li>
<li><a href='http://facebook.com/rafelzone'>Add me on Facebook</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>About Me</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Contact Me</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Archieves</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Monetise Blog</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com'>Get Free News</a></li>
</ul>
</div>
- Silahkan ganti kode berwarnamerahdan link lainnya dengan link anda
- SelanjutnyaSave Template
- Untuk melihatDemonyaSilahkan Klik disinihttp://rasiqeksperimen.blogspot.com/
Comments :
0 comments to “Cara membuat Menu dan Sub Menu I”
Post a Comment
tinggalkan komentar anda..