Menu dan Sub-menu Bar sangat dibutuhkan guna mencari informasi berdasarkan pada kategori atau sub menu . Memberi sub menu bar juga membuat Semua judul artikel bisa ditampilkan di layar dalam satu tatapan mata; blog kita tampak lebih ilmiah, teratur, dan simpel
Jika anda berminat memasangnya di blog,
artinya anda orang yang berfikir sistimatis dan menyukai keteraturan.Selamat
mencoba.
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 blok warna
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, silakan klik daftar kode warna.
B. Mengganti warna tulisan/huruf,
silakan ganti warina pada baris ke-4 yang saya beri warna hijau dengan
warna yang anda sukai (ganti kodenya saja).
C. Mengganti model huruf (font), perhatikan skrip
urutan ke-14; gantilah tulisan berwarna ungu 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 yang kami bagikan ini
belum berhasil, coba sahabat 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="RickyMenu">
<div
id="Rickybox">
<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.
(terpasang di jadipintar.com saat ini)
Ini adalah model drop down bertingkat yang
bisa mengakomodir anatara menu dan submenu kemudian sub submenu dst. terserah
kebutuhan; juga bisa saja hanya memasang menu saja (label) untuk lebih
simpelnya. Untuk contoh silakan lihat di bagian atas blog ini.
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 berwarna merah 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>.
Sumber
: http://www.jadipintar.com/2014/01/Cara-Memasang-Menu-Bar-dan-Sub-Menu-Bar-di-Halaman-Blog.html