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 Kamu, Judul 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.

Jadi, gampangkan Membuat Menu Dibawah Header Blog.

Baca Juga Artikel di Bawah Ini: