Membuat Menu Horizontal Menggunakan CSS Portal
SEBELUMNYA LIHAT DULU DEMONYA ==> http://exsperimen-anwar358.blogspot.com/
1. Masuk ke akun blogspot anda
2. Masuk ke Tab Rancangan => Edit HTML
3. Download dulu template anda, terus centang Expand Template Widget
4. Copy kode dibawah ini, kemudian letakkan sebelum kode ]]></b:skin>
body { margin : 10px; font: Verdana, Helvetica, Arial; padding: 0px; background: #fff; } #menu { border-bottom : 1px solid #ccc; margin : 0; padding-bottom : 19px; padding-left : 10px; } #menu ul, #menu li { display : inline; list-style-type : none; margin : 0; padding : 0; } #menu a:link, #menu a:visited { background : #E8EBF0; border : 1px solid #ccc; color : #666; float : left; font-size : small; font-weight : normal; line-height : 14px; margin-right : 8px; padding : 2px 10px 2px 10px; text-decoration : none; } #menu a:link.active, #menu a:visited.active { background : #fff; border-bottom : 1px solid #fff; color : #000; } #menu a:hover { color : #f00; } body.section-1 #menu li#nav-1 a, body.section-2 #menu li#nav-2 a, body.section-3 #menu li#nav-3 a, body.section-4 #menu li#nav-4 a { background : #fff; border-bottom : 1px solid #fff; color : #000; } #menu #subnav-1, #menu #subnav-2, #menu #subnav-3, #menu #subnav-4 { display : none; width: 90%; } body.section-1 #menu ul#subnav-1, body.section-2 #menu ul#subnav-2, body.section-3 #menu ul#subnav-3, body.section-4 #menu ul#subnav-4 { display : inline; left : 10px; position : absolute; top : 95px; } body.section-1 #menu ul#subnav-1 a, body.section-2 #menu ul#subnav-2 a, body.section-3 #menu ul#subnav-3 a, body.section-4 #menu ul#subnav-4 a { background : #fff; border : none; border-left : 1px solid #ccc; color : #999; font-size : smaller; font-weight : bold; line-height : 10px; margin-right : 4px; padding : 2px 10px 2px 10px; text-decoration : none; } #menu ul a:hover { color : #f00 !important; } #contents { background : #fff; border : 1px solid #ccc; border-top : none; clear : both; margin : 0px; padding : 15px; }
5. Cari kode <body> di template anda, kemudian copykan kode dibawah ini setelah kode <body> tersebut
<ul id="menu">
<li id="nav-1"><a href="http://nama-blog.blogspot">Home</a></li>
<li id="nav-2"><a href="#">Edit</a></li>
<li id="nav-3"><a href="#">Edit</a></li>
<li id="nav-4"><a href="#">Edit</a></li>
</ul>
Silakan anda ganti kode yang berwarna merah dengan alamat tujuan menu tersebut dan yang berwarna biru dengan teks yang ingin ditampilkan di menu tersebut.
6. Simpan template anda, selesai
0 Response to "Membuat Menu Horizontal Menggunakan CSS Portal"
Posting Komentar