Langkah-langkah Membuat Menu Navigasi
Slide Horizontal Blogspot
Bagi anda yang mau memperindah blog anda dengan menampilkan menu navigasi slide. Apa itu Navigasi slide…? Bahasa sederhananya adalah suatu menu yang ditampilkan dibagian bawah title bar (areal judul blog), ini digunakan selain mempercantik blog, juga digunakan untuk mengkategorikan menu dan sub- sub menu . contoh gambar dapat dilihat pada bagian bawah gambar judul blog ini.
Ikuti langkah-langkah berikut ini:
1. Login ke Blogger, disini anda akan dibawa langsung ke daksbar blog anda,
2. Klik Rancangan
3. Kemudian Klik Edit HTML
4. Klik Kotak sebanyak 1X sehingga muncu tanda ceklis (V) pada kotak yang berada sebelum kata Expand Template Widget
5. Lalu cari kode berikut ]]> dengan cara tekan Ctrl + F maka akan muncul menu baru di bagian atas tulisan Backup/Restore Template
6. Copy kode ]]> tersebut kemudian pastekan lalu tekan Enter
7. Maka carilah kode ]]> pada kotak edit template
8. Copy semua code-code berwarna merah berikut, kemudain pastekan tepat diatas (sebelum) code ]]> silakan di copy:
#Menumainwrapx {
background:url(http://farm2.static.flickr.com/1046/5118494385_6bed6df208_t.jpg) repeat-x scroll 0 0 #222222;
border-bottom:1px solid #CCCCCC;
height:42px;
margin:0;
padding:0;
}
#NavbarMenux {
width: 950px;
height: 41px;
font-size: 13px;
color:#333333;
margin: 0px;
padding: 0;
font-weight:bold;
font-family:arial;
margin: 0 auto;
}
#NavbarMenuleftx {
width: 950px;
margin: 0;float:left;}
#navx { margin: 0;
padding: 0; }
#navx ul {
float: left;
list-style: none;
margin: 0;
padding: 0; }
#navx li {
list-style: none;
margin: 0px;
padding: 0; }
#navx li a,
#navx li a:link,
#navx li a:visited {
height: 22px;
color: #333333;
display: block;
font-size: 13px;
text-decoration: none;
margin: 0;
padding:10px 13px 9px 13px;
border-right: 1px solid #CFCFCF; }
#navx li a:hover,
#navx li a:active {
color: #333;
margin: 0;
text-decoration: none;
background:#F0F0F0;
}
#navx li li a, #nav li li a:link,
#navx li li a:visited {
background:url(http://farm2.static.flickr.com/1190/5119105082_e113afd892_t.jpg) repeat-x scroll 0 0 #f5f5f5;
min-width: 150px;
color: #333333;
font-size: 14px;
font-weight: normal;
float: none; margin: 0;
padding: 5px 10px;
font-weight:bold;
font-family:arial;
box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
text-align:left;}
#navx li li a:hover,
#navx li li a:active {
background: #F5F5F5;
color: #333;
}
#navx li {
float: left;
padding: 0; }
#navx li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin:0;
padding: 0;
border-top:1px solid #242424;
}
#navx li ul a {
width: 140px; }
#navx li ul ul {
margin: -41.5px 0 0 176px;
border:none;}
#navx li:hover ul ul,
#navx li:hover ul ul ul, #navx li.sfhover ul ul,
#navx li.sfhover ul ul ul {
left: -999em; }
#navx li:hover ul,
#navx li li:hover ul,
#navx li li li:hover ul,
#navx li.sfhover ul,
#navx li li.sfhover ul,
#navx li li li.sfhover ul {
left: auto; }
#navx li:hover,
#navx li.sfhover {
position: static; }
9. Apakah anda sudah paste code di atas….?
10. Klau sudah, langkah selanjutnya klik Simpan template
11. Langkah pertama sudah selesai. Silahkan anda bernapas sejenak ………………..
Catatan: Kode diatas belum bisa menampilkan menu navigasi yang inginkan. Untuk menampilkan menu navigasi anda harus mengikuti langkah –langkah berikut ini.
Langkah-langkahnya:
1. Klik Rancangan
2. Kemudian klik Elemen laman biasanya terletak di bagian samping kiri edit HTML
3. Langkah selanjutnya klik Tambah Gadget, maka akan muncul kotak dialog Tambah Gadget
4. Cari HTML/JavaScript, kemudian klik tanda plus (+) yang berada di samping kanannya
5. Tunggu sebenter sampai loading selesai
6. Kemudian copy dan pastekan code-code berikut pada kotak dialog HTML/JavaScript:
No comments:
Post a Comment
Mohon Tinggalkan Komentar anda untuk kebaikan blog ini.........