Home » , » Cara Membuat Menu Di Bawah Header Blog

Cara Membuat Menu Di Bawah Header Blog

Written By Ku Copas on Saturday, 25 February 2012 | 2/25/2012 01:20:00 am

KUCOPAS - Cara Membuat Menu Di Bawah Header Atau Judul Blog. Hallo sobat, Selamat berkunjung ke blog saya KUCOPAS yang Ndeso ini. hehehe... Setelah kemarin saya share dan posting Tips dan Trik tentang Cara buat Menu Vertikal Dengan Icon/gambar, sekarang saya akan kasih tips dan trik lagi buat sobat semua tentang Cara membuat menu dibawah header blog.

Pada menu dibawah header blog yang versi ini kelebihannya adalah ketika pointer mouse di arahkan, maka hasil nya akan tampil menu-menu lainnya yang mengarah ke bawah alias Menu Horisontal DropDown, seperti yang sobat lihat di gambar dan pada menu blog KUCOPAS ini.

Cara Membuat Menu Di Bawah Header Blog

Gimana.??? Sobat tertarik dan ingin membuat nya.!!!
Oke sobat, Mari kita langsung menuju ke TKP, hehehehe...
Langkah-langkah yang harus sobat lakukan untuk membuat menu dibawah header blog adalah:

1. Silahkan sobat >> Login atau Masuk ke blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blogger baru, Pilih dan klik Menu >> Template >> Edit HTML

3. Kemudian silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL + F untuk memudahkan pencarian).
Kemudian taruh Kode Script di bawah ini tepat diatas atau sebelum kode ]]></b:skin>
 #catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(http://1.bp.blogspot.com/-HWnzqeoLkqM/TZfDIsnBUJI/AAAAAAAAC6Y/HLNb-3kfkec/s1600/2.gif) 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:1000px;
background:#252525 url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) 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:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #fff;
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:#ED4A05;
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:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #fff;
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;
}

Catatan:
  • width:1000px; adalah Ukuran Lebar menu, Silahkan sobat ganti nilainya agar sesuai dengan ukuran lebar template blog sobat.
4. Jika sudah, Masih dalam Edit HTML Template, Silahkan sobat cari lagi kode <div id='content-wrapper'> (Gunakan CTRL+F untuk mempercepat pencarian).

5. Kemudian copy kode dibawah ini dan paste-kan tepat di bawah atau sesudah kode <div id='content-wrapper'>
 <div id='catmenucontainer'>
<div id='catmenu'>


<ul>
<li><a href='http://NAMA LINK BLOG ANDA'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
</ul>
</div>
</div>
<div class='clear'/>

Catatan:
  • Your-Link-Here Ganti dengan Link target tujuan isi menu sobat.
  • Link-Title Ganti dengan title yang sobat inginkan.
  • Link-Name Ganti dengan Nama menu sobat yang ingin di tampilkan.
6. Setelah sobat selesai mengedit, Silahkan sobat klik >> Pratinjau atau Preview dulu sebelum di SAVE template-nya, Lalu lihat hasilnya. Jika sudah berhasil dan cocok seperti yang sobat inginkan, Jangan Lupa di Save atau Simpan yach...

NB:
Jika sobat tidak menemukan kode yang dicari template blog sobat, Berarti cara di atas tidak berlaku untuk Template blog yang sobat gunakan. Namun sobat masih bisa memasangnya di blog sobat.

Caranya:
  • Masuk >> Dasboard >> Tata letak >> Tambah Gadget >> pilih >> HTML/JavaScript >> Taruh semua kode script yang ke dua diatas di dalam kotak HTML/JavaScript >> Simpan dan lihat hasilnya.
Semoga artikel tutorial blog yang membahas tentang Cara Membuat Menu Di Bawah Header Blog, Bisa sangat bermanfaat bagi sobat KUCOPAS semua. selamat Berkarya...

Artikel Terkait:

thumbnail Title: Cara Membuat Menu Di Bawah Header Blog
Posted by:Ku Copas
Published :2012-02-25T01:20:00+07:00
Rating: 5
Reviewer: 737 Reviews
Cara Membuat Menu Di Bawah Header Blog
Comments
16 Comments

16 comments:

  1. thanks banget ya infonya

    http://kodok-smart.blogspot.com

    ReplyDelete
  2. Kodok@ Iya sama-sama gan...
    Terima kasih atas kunjunganya...

    ReplyDelete
  3. Kerbau@ CSS yang mana Gan.???

    ReplyDelete
  4. Maaf gan..,kog menunya gk di Drop Down kyak di gambar .
    Trus gmana supaya naikin menunya sedikit ke atas ,soalnya judul postingan saya jadi gk kelihatan... makasih

    ReplyDelete
    Replies
    1. Tempel saja kode yang kedua, Tepat di atas kode div id='content-wrapper'> sob...

      Delete
  5. Cendhikia@ Emang sobat pasangnya di mana kox bisa jd kyx gt... memang setiap template itu berbeda, jadi sobat harus pintar2 mengeditnya. kalau sobat kesulitan dalam masalah pengeditan atau penempatan, silahkan sobat kirim blog sobat. biar nanti saya editkan seperti yang sobat inginkan.

    Rais Maraya@ Iya sama2. makasih sudah berkunjung.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. @ Dewa >> Wokay... makasih dh berkunjung.

    @ Faudditiya >> Siip dehh..

    ReplyDelete
  8. gan kode nih slalu gak ada mulu gak ada kode lain apa selain ini *< d i v i d = 'content-wrapper'>*

    ReplyDelete
    Replies
    1. Jika sobat memakai template asli bawaan blogger, Memang biasanya kode ini tidak ada dalam template sobat.
      Cari saja kode /header> dan letakkan kode yang ke dua dibawah kode tersebut. Atau letakkan kodenya tepat di atas kode div class='tabs-outer'>

      Delete
  9. mantap.....thanks bro

    share lagi yang bagus bagus buat edit dan semua tentang blog...
    saya lagi belajar buat blog...

    ReplyDelete
  10. mantab gan salam kenal http://idegemilang.blogspot.com/

    ReplyDelete

 
Support : Google | Yahoo | Bing
Copyright © 2011-2013. KUCOPAS - All Rights Reserved
Sitemap | About Me | Contact Us | Privacy Policy
Proudly powered by Blogger