Trik Membuat Menu di bawah Header Blog


Trik Membuat Menu Dibawah Header Blog | Rifai’s Blog. Yupz, sedulur-sedulur setelah kemarin say posting Trik Membuat Menu Breadcrumbs, sekarang saya akan bahas Trik Membuat Menu Dibawah Header Blog. Sedulur-sedulur tau kan yang dimaksud dengan menu dibawah header? Contohnya seperti yang ada di Rifai’s Blog ini. Gimana sedulur? Tertarik ingin Membuat Menu Dibawah Header Blog seperti di Rifai’s Blog ini?

Trik Membuat Menu Dibawah Header Blog sangatlah mudah. OK, langsung saja ikuti
langkah-langkah berikut:
1.     Seperti biasa, Login ke blogger.com
2.     Klik Tata Letak / Design
3.     Pilih tab Edit HTML
4.     Beri tanda centang pada kotak kecil di samping "tulisan Expand Template Widget"
5.       Klik Download Full Template. Ini buat jaga-jaga.
6.       Setelah itu silakan cari kode ]]></b:skin>, biar lebih mudahdalam mencari,  tekan tombol F3 di Keyboard / Ctrl + F.
7.       Seteleh ketemu, letakan kode dibawah ini tepat di atas kode ]]></b:skin>



#catmenu-http://rifai17.blogspot.com{
height:33px;
width:780px;
margin:0 auto;
background:#87cefa repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:780px;
background:#252525 repeat-x;
height:33px;
}
#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}
#catmenu li a:hover, #catmenu li a:active {
background: #708090 repeat-x;;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#20b2aa;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:#708090 repeat-x;
padding: 9px 10px 10px 10px;
}
#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}
#catmenu li li {
}
#catmenu li ul a {
width: 140px;
}
#catmenu li ul a:hover, #catmenu li ul a:active {
}
#catmenu li ul ul {
margin: -34px 0 0 170px;
}
#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}
#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}
#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

8.     Cari kode <div id='content-wrapper'>
9.     Seteleh ketemu, letakan kode dibawah ini tepat di bawah kode tersebut.

<div id='catmenu-http://rifai17.blogspot.com'>
<div id='catmenu'>
<ul>
<li><a href='Alamat Link Kamu'title='Judul Link'>Home</a></li>
<li><a href='Alamat Link Kamu'title='Judul Link'>Nama Link-1</a>
<ul class='children'>
<li><a href='Alamat Link Kamu' title='Judul Link'>Nama Link-1-1</a></li>
<li><a href='Alamat Link Kamu'title='Judul Link'>Nama Link-1-2</a></li>
<li><a href='Alamat Link Kamu' title='Judul Link'>Nama Link-1-3</a></li>
</ul>
</li>
<li><a href='Alamat Link Kamu'title='Judul Link'>Nama Link-2</a>
<ul class='children'>
<li><a href='Alamat Link Kamu' title='Judul Link'>Nama Link-2-1</a></li>
<li><a href='Alamat Link Kamu'title='Judul Link'>Nama Link-2-2</a></li>
<li><a href='Alamat Link Kamu' title='Judul Link'>Nama Link-2-3</a></li>
</ul>
</li>
<li><a href='Alamat Link Kamu'title='Judul Link'>Nama Link-3</a>
<li><a href='Alamat Link Kamu'title='Judul Link'>Nama Link-4</a>
</ul>
</div>
</div>
<div class='clear'/>

Keterangan:
Ganti Alamat Link KamuJudul Link, Nama Link sesuai keinginan.
Yang berwarna biru adalah menu dengan Dropdown, dan yang berwarna hitam adalah menu tanpa Dropdown.

10.    Kemudian Simpan template dan lihat hasilnya.


Baca Juga Artikel di Bawah Ini:

4 comments:

Download game gratis said...

Wah, mantap nih gan. Menu yang dibawah header emang cukup membantu buat para pengunjung blog kita dan biar pada betah.
hihihi

Darmawan Saputra said...

Terima kasih atas artikelnya.

sepertinya anda berbakat untuk urusan membuat postingan yang ini, jujur saja kamu punya kelebihan tersendiri, dan saya akan berkunjung lagi bila ada waktu.



#Semoga sehat selalu :D

Rifai17 (Admin) said...

@All: Terimakasih atas kunjungannya Mas Bro.
Selamat beraktifitas semoga sukses selalu.

Fuadditiya Imaspadi Muharam said...

Trimakasih gan infony..

sangat bermanfaat bagi perkembangan blog saya.. :)

Blog Fuadditiya | The FIM Site

Post a Comment

© Rifai's Blog "http://rifai17.blogspot.com"
Published by Rifai Yusuf

 

Alexa Rank

Pengunjung