Masih ingat tentang menu navigasi/navbar di bawah header pada ulasan aku sebelumnya
Cara Buat Menu Navigasi #1
Contoh :
Ternyata gak semua blog cocok menggunakan Menu Navigasi Di Bawah Header Blog versi sebelumnya
Karena : - Ukuran Yang sudah paten/tidak dapat di ubah ukuran lebar menu navigasi tersebut.
- Warna yang tidak bisa di ganti sesuai keinginan
Contoh salah 1 blog yang telah menggunakan
Menu Navigasi Di Bawah Header Blog versi sebelumnya
Pada tab menu contoh gambar di atas telah jelas terlihat bahwa tab menu tersebut nampak terlalu panjang.
Jadi sebelum sobat berniat menggunakan tab menu navigasi, ada baiknya para sobat memikirkan, kira-kira tab menu navigasi yang cocok dengan lebar header.
Karena kejadian di atas, maka kali ini aku akan bahas tentang menu tab navigasi dalam versi lain, namun tetap dalam tampilan yang oke...
Contoh tab menu navigasi versi baru :
Simak caranya yuk....
1. Log in dahulu ke account blogspot sobat.
2. KLik "Page Element" & Klik "Edit HTML"
3. Centangkan "Expand Widget Templates"
Simpan dulu template sobat dengan cara mengklik link Download template lengkap.Untuk Berjaga-jaga apabila terjadi kesalahan dalam pemasangan script !!!
4. Copy kode dibawah ini dan letakkan tepat diatas kode #outer-wrapper {
#NavbarMenu {
background:#000000 ;
width: 680px; /*samakan kode ini dgn lebar outer wrapper anda*/
height: 35px;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
color: #fff;
font-weight: bold;
margin: 0px;
padding: 0px;
}
#NavbarMenuleft {
width: 400px; /*Lebar menu sebelah kiri*/
float: left;
margin-top: 3px;
padding: 0;
}
#NavbarMenuright {
background:#ff7604 url(http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-merah.png);
width: 260px; /*lebar menu search sebelah kanan*/
font-size: 11px;
float: right;
margin: 0px;
padding-left: 3px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 3px;
border:2px solid #ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
background: #ff7604 url(http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-merah.png);
color: #ffffff;
display: block;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: bold;
text-transform: none;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border: 2px solid #ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav li a:hover, #nav li a:active {
background: #ff7604 url(http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-hitam.png);
color: #ffffff;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ff7604 url(http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-merah.png);
width: 150px;
color: #ffffff;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #ff7604 url(http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-hitam.png);
color: #ffffff;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #ffffff !important;
width: 210px; /*Lebar kolom search*/
color: #202020;
font-size: 12px;
font-family: Trebuchet MS;
font-weight: normal;
margin: 0;
padding: 4px 0 3px 5px;
border: 2px solid #c0c0c0;
display: inline;
-moz-border-radius-topleft: 21px;
-moz-border-radius-topright: 21px;
-moz-border-radius-bottomleft: 21px;
-moz-border-radius-bottomright: 21px;
}
#searchbutton {
cursor: pointer;
background: #ffffff;
color: #FF8000;
font-size: 11px;
font-family: Trebuchet MS;
margin: 0 0 0 5px;
padding: 3px 3px 2px;
font-weight: bold;
border: 2px solid #c0c0c0;
-moz-border-radius-topleft: 18px;
-moz-border-radius-topright: 18px;
-moz-border-radius-bottomleft: 18px;
-moz-border-radius-bottomright: 18px;
}
5. Lalu copy code di bawah ini dan letakkan tepat di atas kode <div id='content-wrapper'>6. Selesai deh.. sekarang anda tinggal mengganti text ‘#’ dengan ‘Alamat link yang anda ingin pasang’.
7. Selanjutnya,ganti text berwarna ungu dengan judul dari link anda tersebut.
Contoh:
<li><a href='
http://id-id.facebook.com/people/Osi-Rosita/1359902088'>
My Facebook</a></li>
Dan seterusnya.....
6. Simpan Lalu lihat hasilnya
7. SelesaiSobat dapat mengganti text “http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-merah.png” dengan beberapa alternatif warna dari Diary Osi.
Warna orange :
http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-orange-ok.png
Warna ungu :
http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-ungu.png
Warna putih :
http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-putih.png
Warna pink :
http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-pink.png
Warna coklat :
http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-coklat.png
Warna biru :
http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-biru.png
Warna hijau :
http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Navbar-hijau.png
Warna Abu-abu :
http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-hitam.png
Warna merah :
http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-merah.png Met mencoba.....
Oh ...ya....
Bagi para sobat yang telah terlanjur menggunakan tab menu navigasi versi sebelumnya, dan sobat ingin menggunakan tab menu versi yang di bahas barusan, hendaknya sobat hapus terlebih dahulu kode Cara Buat Menu Navigasi Di Bawah Header Blog yang ada pada html template sobat, dan setelah itu met baraktifitas dengan menu tab navigasi versi 2
Post
Sempat pusing juga kemarin nyari widget top artikel yang seperti aku maksud.
