Artikel komputer, tutorial komputer, blog, seo dan belajar bisnis online gratis untuk pemula
Senin, Juni 21, 2010
Cara membuat menu navigasi horisontal dropdown dengan script css (massive blue drop down)
Salahsatu menu navigasi horisontal dengan script css yang bisa dijadikan alternatif untuk dipasang di blog adalah menu navigasi horisontal/dropdown (massive blue drop down). Seperti gambar di bawah ini:
Beberapa menu dropdown lainnya bisa dilihat disini:
1. Simple dropdown
2. Dropdown 2 level
3. Dropdown sunrise
Menu navigasi di atas sangat sederhana dengan background warna hitam dan saat disorot mouse akan berwarna biru.
Untuk membuat menu navigasi di atas, bisa ikuti prosedur berikut:
1. Login ke akun blogger
Pilih Dashboard - Tata letak (Rancangan) - Edit HTML
cari kode berikut:
cari kode berikut:
2. Di bagian atas kode tersebut masukkan kode berikut
3. Simpan template
4. Pada gadget html/javascript, masukkan kode berikut:
catatan:
Ganti tanda # pada hrefhttp://www.blogger.com/post-create.g?blogID=6313070905964300728="#" dengan url target
Ganti Home, Tutorial, ... dengan teks yang akan ditampilkan di menu navigasi
Contoh blog yang memakai menu navigasi massive blue bisa dilihat disini menu navigasi
Beberapa menu dropdown lainnya bisa dilihat disini:
1. Simple dropdown
2. Dropdown 2 level
3. Dropdown sunrise
Menu navigasi di atas sangat sederhana dengan background warna hitam dan saat disorot mouse akan berwarna biru.
Untuk membuat menu navigasi di atas, bisa ikuti prosedur berikut:
1. Login ke akun blogger
Pilih Dashboard - Tata letak (Rancangan) - Edit HTML
cari kode berikut:
cari kode berikut:
]]>
2. Di bagian atas kode tersebut masukkan kode berikut
menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
3. Simpan template
4. Pada gadget html/javascript, masukkan kode berikut:
catatan:
Ganti tanda # pada hrefhttp://www.blogger.com/post-create.g?blogID=6313070905964300728="#" dengan url target
Ganti Home, Tutorial, ... dengan teks yang akan ditampilkan di menu navigasi
Contoh blog yang memakai menu navigasi massive blue bisa dilihat disini menu navigasi
0 komentar:
Posting Komentar
harap di isi dengan sopan :-)