Membuat menu blog menggunakan CSS
Sebelum dimulai, perlu diketahui bahwa untuk menempatkan kode CSS di blog yaitu harus diantara tag <head> dan </head>. Atau untuk lebih gampangnya, simpan aja di atas kode
]]></b:skin>
Untuk lebih jelasnya dan cara menyimpan kode tersebut di template blog anda ikuti langkah2 berikut :
1. Login ke Blogger lalu pilih layout kemudian edit HTML
2. Sebagai kemanan silahkan download dulu template anda
3. Ingat....Jangan kasih tanda checklist pada kotak Expand Template Widget.
4. Cari kode berikut : ]]></b:skin>
5. Kalo sudah ketemu. silahkan copy paste kode berikut di atas kode ]]></b:skin>
<style type="text/css" media="screen">
.menu_hor {
float:left;
padding:0;
margin:100px 70px
color:#FFFFFF;
background:#000000;
width:100%;
border:solid 1px #000000;
clear:both;
}
/*warna menu horizontal normal*/
.menu_hor a,
.menu_hor a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:normal;
font-size:12px;
color:#FFFFFF;
background-color:#000000;
text-decoration:none;
}
.menu_hor ul {
list-style-type:none;
padding:0; margin:0;
}
.menu_hor ul li {
float:left;
position:relative;
z-index:auto !important;
z-index:1000;
border-right:solid 1px #000000;
border-left:solid 1px #000000;
}
.menu_hor ul li a {
color: #FFFFFF;
background: #000000;
float:none !important;
float:left;
display:block;
height:30px;
line-height:30px;
padding:0 10px 0 10px;
text-decoration:none;
}
.menu_hor ul li ul {
display:none;
border:none;
color: #FFFFFF;
background: #000000;
width:1px
}
.menu_hor ul li:hover a {
background-color:#FFFF00;
text-decoration:none;
color:#000000; /*warna hovering main cells*/
}
.menu_hor ul li:hover ul {
display:block;
position:absolute;
z-index:999;
top:29px;
margin-top:1px;
left:0;
}
.menu_hor ul li:hover ul li a {
display:block;
width:12em;
height:auto;
line-height:1.3em;
margin-left:-1px;
padding:5px 10px 5px 10px;
border-left:solid 1px #000000;
border-bottom: solid 1px #000000;
background-color:#0000FF;
color:#FFFFFF; /*pemberian warna subcells*/
}
.menu_hor ul li:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00; /*warna hover pada subcells*/
}
.menu_hor ul li a:hover {
background-color:#FFFF00;
text-decoration:none;
color:#000000; /*warna hovering main cells*/
}
.menu_hor ul li a:hover ul {
display:block;
width:12em;
position:absolute;
z-index:999;
top:29px;
left:0;
}
.menu_hor ul li ul li a:visited {
background-color:#0000FF;
color:#FFFFFF; /*warna subcells keadaan normal*/
}
.menu_hor ul li a:hover ul li a {
display:block;
width:12em;
height:1px;
line-height:1.3em;
padding:4px 16px 4px 16px;
border-left:solid 1px #000000;
border-bottom: solid 1px #000000;
background-color:#0000FF;
color:#FFFFFF;
}
.menu_hor ul li a:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00; /*warna subcells hovering mode*/
}
</style>
6. Setelah selesai copy paste nya, cari kode berikut : <div id='content-wrapper''>
7. Kalo sudah ketemu copy kode berikut di atas kode <div id='content-wrapper''>
<div class='menu_hor'>
<ul>
<li><a href='http://kampo-rato.blogspot.com'>Home</a></li>
<li><a href='http://www.facebook.com/uma.la.ari'>Facebook</a></li>
<li><a href='URL ANDA'>Text Anda</a></li>
<li><a href='URL ANDA'>Text Anda</a></li>
</ul>
</div>
NB : Ganti URL ANDA dengan link yang anda maksud dan Text Anda dengan nama dari masing - masing link. Lihat Cara Membuat Link.
8. Kalo sudah selesai, save template anda, SELAMAT MENCOBA
Artikel 
0 komentar:
Post a Comment
Terima Kasih Atas Kunjungan, Semoga informasi yang saya sajikan dapat bermanfaat bagi anda.