Membuat menu blog menggunakan CSS


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

Kampo Rato Blog ~ Tips Trick | Software | Download | Tutorial | Games

Artikel Membuat menu blog menggunakan CSS ini dipublikasikan oleh Imam Blogger
Terima kasih telah membaca artikel tentang Membuat menu blog menggunakan CSS, Anda boleh mengcopy paste-nya jika artikel tulisan ini sangat bermanfaat bagi anda, namun jangan lupa untuk meletakkan link Membuat menu blog menggunakan CSS sebagai sumbernya. Semoga artikel ini bermanfaat. Jika anda menyukai Blog ini, silahkan support kami pada FOLLOWERS. Terima kasih.

:: Papa Imam ! ::

0 komentar:

Post a Comment

Terima Kasih Atas Kunjungan, Semoga informasi yang saya sajikan dapat bermanfaat bagi anda.

Subscribe to: