Cara membuat menu horisontal
English Version:
Kembali lagi kemasalah design web blog di antara nya dengan membuat menu horisontal ini,kelihatannya bila suatu blog tanpa adanya menu sepertinya kurang sempurna ya..?
Bila blog anda di lengkapi menu atau barisan link-link tertentu maka akan kelihatan lebih indah di pandang mata dan terlihat rapi.bagaimana menurut anda apakah demikian..!
O.k bila blog anda belum memiliki menu horisontal bisa ikuti langkahnya di bawah ini::
- Tentunya login ke blogger
- Klik tata letak dan Edit Html
- Jangan lupa Expand widget template
Langkah pertama cari kode yang mirip seperti ini >>
/* Footer
----------------------------------------------- */
#footer {background:#222;-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
width:920px;height:34px;
clear:both;
margin:0 auto;
padding: 0 auto;
line-height: 1.6em;
text-transform:none;
letter-spacing:.1em;
text-align: center;
}
----------------------------------------------- */
#footer {background:#222;-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
width:920px;height:34px;
clear:both;
margin:0 auto;
padding: 0 auto;
line-height: 1.6em;
text-transform:none;
letter-spacing:.1em;
text-align: center;
}
Kemudian letakan kode script ini tepat di bawahnya >>
/* Menu Horisontal
----------------------------------------------- */
.menuhorisontal{background:#000;
width: 100%;height:30px;
overflow: hidden;
}
.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 4px;
font: bold 11px Arial;color:#222;
list-style-type: none;
}
.menuhorisontal li{
display: inline;
margin: 0;
}
.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
color: #dedede
}
.menuhorisontal li a:visited{
color: #dedede;
}
.menuhorisontal li a:hover, .menuhorisontal li.selected a{color:#fff; text-decoration:underline;/*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}
----------------------------------------------- */
.menuhorisontal{background:#000;
width: 100%;height:30px;
overflow: hidden;
}
.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 4px;
font: bold 11px Arial;color:#222;
list-style-type: none;
}
.menuhorisontal li{
display: inline;
margin: 0;
}
.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
color: #dedede
}
.menuhorisontal li a:visited{
color: #dedede;
}
.menuhorisontal li a:hover, .menuhorisontal li.selected a{color:#fff; text-decoration:underline;/*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}
Langkah selanjutnya cari lagi kode di bawah ini >>
< b:include name='description'/ >
< /div >
< /b:if >
< /b:includable >
< /b:widget >
< /b:section >
< /div >
< /div >
< /b:if >
< /b:includable >
< /b:widget >
< /b:section >
< /div >
Setelah itu paste script ini di bawah kode tadi >>
< div class='menuhorisontal' >
< ul >
< li > < a href='http://your url link' > Home < /a > < /li >
< li > < a href='http://your url link' > Template < /a > < /li >
< li > < a href='http://your url link' > Seo < /a > < /li >
< li > < a href='http://your url link' > Blogger Hack < /a > < /li >
< li > < a href='http://your url link' > Blogger Tools < /a > < /li >
< li > < a href='http://your url link' > Blogger Stuf < /a > < /li >
< li > < a href='http://your url link' > E-book < /a > < /li >
< /ul >
< /div >
< ul >
< li > < a href='http://your url link' > Home < /a > < /li >
< li > < a href='http://your url link' > Template < /a > < /li >
< li > < a href='http://your url link' > Seo < /a > < /li >
< li > < a href='http://your url link' > Blogger Hack < /a > < /li >
< li > < a href='http://your url link' > Blogger Tools < /a > < /li >
< li > < a href='http://your url link' > Blogger Stuf < /a > < /li >
< li > < a href='http://your url link' > E-book < /a > < /li >
< /ul >
< /div >
Untuk yang berwarna hijau ganti sesuai dengan keinginan anda.
Silakan di coba semoga berhasil.
Category: Tips and tricks, Tutorials blog
0 komentar