cara menambahkan css script untuk navigasi blog(dopdown)

Dalam tutorial ini kita akan membangun panel navigasi dari HTML standar dan daftar css script.

Sebuah bar navigasi pada dasarnya adalah daftar link, sehingga menggunakan <ul> dan <li> tag elemen:

Ada dua langkah untuk membuat menu navigasi


1. Langkah 1 (menu Insert css di blogspot template)



Script css

Menu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67,5% "Arial", Arial;
font-size: 14px;
font-weight: bold;

}
Menu ul. {
background: # 333333;
tinggi: 35px;
daftar-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") kanan bawah tidak mengulang-;
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 suatu {
background: # 2580a2 url ("http://i49.tinypic.com/13zbc53.jpg") bawah tidak mengulang-pusat;
color: # FFFFFF;
text-decoration: none;
}
Menu li. Ul {
background: # 333333;
display: none;
tinggi: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 225px;
z-index: 200;
/ * Top: 1em;
/ * Kiri: 0; * /
}
Menu li:. Hover ul {
display: block;

}
Menu li. Li {
background: url ('http://i45.tinypic.com/nvxxqg.jpg') kiri bawah tidak mengulang-;
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
}
Menu li:. Hover li a {
latar belakang: none;

}
Menu li. Ul suatu {
display: block;
tinggi: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 15px 0px;
text-align: kiri;
}
. Menu ul li a: hover, menu ul li li:. Hover suatu {
background: # 2580a2 url ('http://i50.tinypic.com/66elwh.jpg') pusat tidak meninggalkan mengulang-;
border: 0px;
color: # ffffff;
text-decoration: none;
}
Menu p. {
jelas: kiri;
}

Masuk di blogspot, Pilih Desain - Edit HTML
Aktifkan Expand Template Widget
Cari tag ]]></ b: skin>
menyisipkan skrip css pada di atas ]]></ b: skin>

2. Langkah 2 (Masukan script html pada gadget html / javascript blogger)
Pada gadget html / javascript, html masukkan kode di bawah ini

html Script

<div class="menu">
<ul>
<li> <a href="#"> Depan </ a> </ li>
<a href="#"> <li> Tutorial </ a>
<ul>
<li> <a href="#"> Trik Windows </ a> </ li>
<li> <a href="#"> internet </ a> </ li>
<li> <a href="#"> Perangkat Lunak </ a> </ li>
<li> <a href="#"> Microsoft Excel </ a> </ li>
<li> <a href="#"> Microsoft Word </ a> </ li>
<li> <a href="#"> Data recovery </ a> </ li>
<li> <a href="#"> Antivirus </ a> </ li>
</ Ul>
</ Li>
<li> <a href="#"> Blog </ a>
<ul>
<li> <a href="#"> Blog Tips </ a> </ li>
<li> <a href="#"> Tips SEO </ a> </ li>
<li> <a href="#"> Adsense </ a> </ li>
<li> <a href="#"> Pakan </ a> </ li>
</ Ul>
</ Li>
<li> <a href="#"> Tips Telepon </ a>
<ul>
<li> <a href="#"> Telepon Secret Codes </ a> </ li>
<li> <a href="#"> Screenshot Telepon </ a> </ li>
</ Ul>
</ Li>
<li> <a href="#"> link </ a>
<ul>
<li> <a href="#"> Artikel Komputer </ a> </ li>
<li> <a href="#"> PANDUAN SEO </ a> </ li>
</ Ul>
</ Li>
<li> <a href="#"> Tutorial ArcGIS </ a> </ li>
<li> <a href="#"> Penterjemah Gratis </ a> </ li>
<li> <a href="#"> Link Exchange </ a> </ li>
</ Ul>
</ Div>

Instruksi: karakter Ubah # dengan url blog Anda atau halaman url
Contoh:
<li> <a href="http://alfuadiazzuhdi.blogspot.com/"> Depan </ a> </ li>

atau
<li> <a href="http://alfuadiazzuhdi.blogspot.com/2011/10/cara css navigasi.html"> Trik blog </ a> </ li>