Menu bar yang berada dibagian head blog sangat
multi fungsi. Salah satunya sebagai navigator visitor/ pengunjung blog. Anda bisa
menampilkan halaman statistik atau bahkan laman kategori dari blog Anda. Dan
Anda juga bisa menautkan menubar dengan link dari web lain.
Langkah
Pemasangan
- Klik
Desain
- Pilih
Template lalu pilih Edit HTML
- Pilih/klik
Lanjutkan
- Pilih/klik
Expand Template Widget
Cari scrift berikut
:
<div
class='main-outer'> atau
<div id='main-wrapper'> atau
<div id='main'>
Agar lebih
mudah, klik saja F3 pada keyboard lalu pilh salah satu scrift diatas.
Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com
maka yang cocok adalah :
div
class='main-outer'>
Bisa jadi
beda dengan template yang lain…
Setelah
dapat, copas scrift berikut tepat diatas scrift yang dicari
tadi :
<style>
/* -- Menu
Horizontal + Sub Menu-- */
#cat-nav
{background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a {
color:#eee; text-decoration:none; text-shadow: #033148 0px 1px
0px;border-right:1px solid #156994;}
#cat-nav
a:hover { color:#fff; }
#cat-nav
li:hover { background:#000; }
#cat-nav a
span { font-family:Verdana, Geneva, sans-serif; font-size:11px;
font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav
.nav-description { display:block; }
#cat-nav
a:hover span { color:#fff; }
#secnav,
#secnav ul { position:relative; z-index:100; margin:0; padding:0;
list-style:none; line-height:1; background:#0d5e88; }
#secnav a {
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100;
padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li {
float:left; width: auto; height:35px;}
#secnav li
ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul
li { height:30px; border-top:1px solid #fff; }
#secnav li ul
li a { font-family:Verdana, Geneva, sans-serif; width:180px;
line-height:30px; padding:0 10px; font-size:11px; font-style:normal;
font-weight:400; color:#eee; }
#secnav li ul
ul { margin: -30px 0 0 180px; }
#secnav
li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav
li.sfhover ul ul ul { left:-999em; }
#secnav
li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav
li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left:
auto; }
#secnav
li:hover,#secnav li.hover { position:static; }
#cat-nav
#secnav {width:100%;margin:0 auto;}
</style>
<div
id='cat-nav'>
<ul
class='fl' id='secnav'>
<li><a
href='#'>Beranda</a></li>
<li><a
href='#'>Menu 1</a></li>
<li><a
href='#'>Menu 2</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu2 a</a></li>
<li><a
href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a
href='#'>Menu3</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu3a</a></li>
<li><a
href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a
href='#'>Menu4</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu4a</a></li>
<li><a
href='#'>Sub
Menu4b </a></li>
</ul>
</li>
<li><a
href='#'>Menu5</a></li>
</ul>
</div>
PENJELASAN :
1. Cara
memasukkan alamat URL:
Ganti tanda # (warna biru) dengan link/url yang anda
inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
2. Cara menuliskan judul menu atau judul postingan:
Ganti
Tulisan warna biru dengan nama menu dan nama sub
menu yang anda inginkan.
3. Cara
merubah lebar menu: silakan cari kode:
#cat-nav
{background:#156994;margin:0 15px;padding:0;height:35px;} ---> baris
ke-3. Kemudian tambahkan kode (width:900px) di antara { dan },
sehingga menjadi :
#cat-nav
{background:#156994;width:900px;margin:015px;padding:0;height:35px;}
Angka 900px hanya
sebagai contoh saja, silakan rubah angka 900 dengan ukuran lebar yang
kamu inginkan, bisa juga mengganti kode 900px dengan kode 100%.
4. Untuk
mengatur tinggi menu silakan ganti angka 35 pada kode 35px di atas
dengan tinggi yang kamu mau.
5. Untuk
tambah atau kurangi jumlah menu, silakan copas atau hapus Skrip
dengan blokwarna hijau (1 porsi menu) , jumlah sub-menunya bisa
ditambah sesuai selera, misalnya submenu ..c, d, e, f, dst.
6. Untuk mengganti warna, background dan huruf, perhatikan skrip di bawah
ini.
[1]. <style>
[2]. /* -- Menu Horizontal + Sub Menu-- */
[3]. #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
[4]. #cat-nav
a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px ..........
A.
Mengganti warna background menu: Silakan ganti warna pada baris
ketiga yang saya beri warna merah, dengan warna yang anda sukai.
B. Mengganti warna
tulisan/huruf, silakan ganti warna pada baris ke-4 yang dengan warna yang anda
sukai (ganti kodenya saja).
C. Mengganti model huruf (font), perhatikan skrip urutan ke-14;
gantilah tulisan dengan jenis font kesukaan anda,
[14]. #secnav a { font-family:Georgia, "Times New Roman", Times,
serif; font-
- Setelah itu
klik Pratinjau dulu untuk memastikan scrift sudah benar
.
- Lalu
simpanlah/save.
Saran
* back
up dulu template anda sebelum merubah/menambah scrift diatas, agar bisa
dimanfaatkan kembali jika ada masalah dengan penambahan srcritf diatas.
* Untuk
menghilangkan tampilan tampilan dobel dengan Laman Utama,
- Maka
ikutilah saran berikut :
- Masuk ke
Menu Laman
- Lalu
pilih tampilan halaman dengan memilih "jangan tampilkan"
-
Simpan setelan, maka laman utama akan tampil sendiri sesuai dengan scrift
yang kita ketikkan tadi.
Blog sudah
bisa dipublikasikan...
Apabila
melalui cara ini belum berhasil, coba anda ulangi lagi dengan sabar. jika
berkali-kali memang tidak bisa, sahabat bisa berkonsultasi melalui
komentar di bagian bawah ini.
Tips Memasang
Sub Menu Di Tata Letak/Side Bar Blog
Setelah
tutorial di atas memasang menu dan sub menu pada halaman artikel, kali ini
masih tetap memasang menu dan subnya, tapi di sisi luar halaman postingan (side
bar), caranya:
1. Masuk ke dasbor blogger anda
2. Pilih Tata Letak atau Lay Out
3. Klik Add Gadget/ Tambah Gadget
4. Pilih HTML/JAVASCRIPT.
(Biarkan kolom judul nama gadget kosong, lalu copy paste kode di bawah ini
ke kolom HTML yang tersedia)
<div
id="Java-TechMenu">
<div id="Java-Techbox">
<ul id="punch">
<li><a
href="#">Home</a></li>
<li>
<a href="#">Sample
Page</a>
<ul>
<li>
<a
href="#">Sub Page #1</a>
<ul>
<li><a
href="#">Sub Sub Page #1</a></li>
<li><a
href="#">Sub Sub Page #2</a></li>
<li><a
href="#">Sub Sub Page #3</a></li>
</ul>
</li>
<li><a
href="#">Sub Page #2</a></li>
<li><a
href="#">Sub Page #3</a></li>
<li><a
href="#">Sub Page #4</a></li>
<li><a
href="#">Sub Page #5</a></li>
</ul>
</li>
<li><a href="#">Sample Post</a></li>
<li><a href="#">Blog
Page</a></li>
</ul>
</div>
</div>
Edit semua
nama menu sesuai keinginan anda. Jangan lupa mengganti tanda # dengan alamat
URL yang anda inginkan
5. Klik Save/Simpan
Atur posisi gadget drop down menu horizontal ini di tempat yang anda inginkan,
lalu klik tombol SIMPAN SETELAN di bagian kanan atas layar.
Jika anda melakukan langkah-langkah di atas dengan benar, anda akan melihat
sebuah horizontal drop down menu di tempat yang anda inginkan.
Untuk Menambah Item di dalam drop down menu horizontal ini sangatlah mudah:
Silahkan cari pada bagian akhir ada kode seperti ini:
<li><a href="#">Blog Page</a></li>
</ul>
Tepat di
bagian atas </ul> bisa disisipkan menu baru, dan akan terlihat
seperti di bawah ini:
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU">TEKS BARU</a></li>
</ul>
Jika menu
tambahan lebih dari satu akan terlihat seperti di bawah ini:
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU
1</a></li>
<li><a href="LINK BARU 2">TEKS BARU
2</a></li>
<li><a href="LINK BARU n">TEKS BARU
n</a></li>
</ul>
Jika salah satu menu tambahan mempunyai sub menu, maka perhatikan
kode </li> menu tersebut yang diturunkan untuk membuka ruang
baru bagi sub menu di dalam menu tersebut
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU
1</a></li>
<li><a href="LINK BARU 2">TEKS BARU 2</a>
<li><a href="LINK BARU SUB MENU
1">SUB MENU 1</a></li>
<li><a href="LINK BARU SUB MENU
2">SUB MENU 2</a></li>
</li>
<li><a href="LINK BARU n">TEKS BARU
n</a></li>
Model
ke-2.
Ini adalah
model drop down bertingkat yang bisa mengakomodir antara menu dan submenu
kemudian sub submenu dst. terserah kebutuhan; juga bisa saja hanya memasang
menu saja (label) untuk lebih simpelnya.
Skripnya
adalah:
<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px
0 0 0;
list-style:
none;
background:
#000000;
background: -moz-linear-gradient(#444,
#000000);
background:
-webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1,
#444));
background:
-webkit-linear-gradient(#444, #111);
background:
-o-linear-gradient(#444, #111);
background:
-ms-linear-gradient(#444, #111);
background:
linear-gradient(#444, #111);
-moz-border-radius:
50px;
border-radius:
50px;
-moz-box-shadow:
0 2px 0px #9c9c9c;
-webkit-box-shadow:
0 2px 0px #9c9c9c;
box-shadow: 0
2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0
10px 0;
position:
relative;
line-height:
0;
}
#menu a
{
float: left;
height: 25px;
padding: 0
25px;
color: #999;
text-transform:
uppercase;
font: bold
12px/25px Arial, Helvetica;
text-decoration:
none;
text-shadow:
0 1px 0 #000;
}
#menu
li:hover > a
{
color: #fafafa;
}
*html #menu
li a:hover /* IE6 */
{
color:
#fafafa;
}
#menu
li:hover > ul
{
display:
block;
}
/* Sub-menu
*/
#menu ul
{
list-style:
none;
margin: 0;
padding: 0;
display:
none;
position:
absolute;
top: 35px;
left: 0;
z-index:
99999;
background: #444;
background:
-moz-linear-gradient(#444, #111);
background:
-webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1,
#444));
background:
-webkit-linear-gradient(#444, #111);
background:
-o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444,
#111);
background:
linear-gradient(#444, #111);
-moz-box-shadow:
0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow:
0 0 2px rgba(255,255,255,.5);
box-shadow: 0
0 2px rgba(255,255,255,.5);
-moz-border-radius:
5px;
border-radius:
2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display:
block;
-moz-box-shadow:
0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow:
0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0
1px 0 #111111, 0 2px 0 #777777;
}
#menu ul
li:last-child
{
-moz-box-shadow:
none;
-webkit-box-shadow:
none;
box-shadow:
none;
}
#menu ul a
{
padding:
10px;
height: 10px;
width: 130px;
height: auto;
line-height:
1;
display:
block;
white-space:
nowrap;
float: none;
text-transform:
none;
}
*html #menu
ul a /* IE6 */
{
height: 10px;
}
*:first-child+html
#menu ul a /* IE7 */
{
height: 10px;
}
#menu ul
a:hover
{
background:
#0186ba;
background:
-moz-linear-gradient(#04acec, #0186ba);
background:
-webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background:
-webkit-linear-gradient(#04acec, #0186ba);
background:
-o-linear-gradient(#04acec, #0186ba);
background:
-ms-linear-gradient(#04acec, #0186ba);
background:
linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child
> a
{
-moz-border-radius:
5px 5px 0 0;
border-radius:
5px 5px 0 0;
}
#menu ul
li:first-child > a:after
{
content: '';
position:
absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left:
5px solid transparent;
border-right:
5px solid transparent;
border-bottom:
8px solid #444;
}
#menu ul ul
li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left:
0;
border-bottom:
5px solid transparent;
border-top:
5px solid transparent;
border-right:
8px solid #444;
}
#menu ul
li:first-child a:hover:after
{
border-bottom-color:
#04acec;
}
#menu ul ul
li:first-child a:hover:after
{
border-right-color:
#04acec;
border-bottom-color:
transparent;
}
#menu ul
li:last-child > a
{
-moz-border-radius:
0 0 5px 5px;
border-radius:
0 0 5px 5px;
}
/* Clear
floated elements */
#menu:after
{
visibility:
hidden;
display:
block;
font-size: 0;
content:
" ";
clear: both;
height: 0;
}
* html #menu
{ zoom: 1; } /* IE6 */
*:first-child+html
#menu { zoom: 1; } /* IE7 */
</style>
<ul
id="menu">
<li><a
href='/'>Home</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Drop
menu</a>
<ul>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
1</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
2</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
3</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
4</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
5</a></li>
</ul>
</li>
<li><a
href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Drop
menu 2</a>
<ul>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
1</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
2</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
3</a>
<ul>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
3.1</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
3.2</a></li>
<li><a
href='http://namablog.blogspot.com' rel='dofollow' target='_blank'>Menu
3.3</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
3.4</a></li>
</ul>
</li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
4</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
5</a></li>
</ul>
</li>
<li><a
href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Drop
menu 3</a>
<ul>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
1</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
2</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
3</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
4</a></li>
<li><a
href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu
5</a></li>
</ul></li></ul>
Keterangan:
1. Silakan
ganti tulisan namablog.blogspot.com dengan URL alamat blog anda.
2. Skrip ini
bisa dipasang di side bar (luar artikel) atau pun di dalam artikel.
- Untuk di sede bar, seperti bisa anda ke edit blogger- Tata letak -
Tambah Gadget, dst.
- Untuk di dalam artikel, anda mesti ke Template-Edit HTML dst., dan agar
bisa terpasang di bagian paling atas blog, silakan copas skrip ini di atas
kode </head>.
