Skip to main content

Cara Membuat Menu Di Bawah 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 TERUSLAH BERUSAHA MENJADI YANG TERBAIK  ini.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWTWa41kKVA4Y9LkkHVP6iZuro1jldE8A97kaeOkfellIdhs9ECKr7YMUGzJ1arKrO4oVSxZ9AKkWm6hSH6VpqaipOqiBE6mB7608bjWXMBixjdfsSf-22paXIR8crOUyyj31_87RU103Y/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfvfGH0ZkH3htk5S0EenLUSzz0jQuTUBsrPvwpSpqye7v3gMz4hiFXSlEwBYdtzSEpesFZcui6qQXHVSgfR9bNaekgX4V4tlvAkMkBw11uNoQe6DTU1UI4Y_FCD0qSu3GVpvEtd6wOy77B/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfEov28IEzN2K2q39c_RqJNMDWAFyvYOWEhkL-MrhNvguPhi55nICO9N_hNvn3sragtIFUQFj2KJKzUKGC1qdOqkkzruTRZlZ6rQUtLkxtNnb6LRZsxylEiMbMjcynVBoo2CndvHTz_AA/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfEov28IEzN2K2q39c_RqJNMDWAFyvYOWEhkL-MrhNvguPhi55nICO9N_hNvn3sragtIFUQFj2KJKzUKGC1qdOqkkzruTRZlZ6rQUtLkxtNnb6LRZsxylEiMbMjcynVBoo2CndvHTz_AA/) 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...

Labels:

Comments

Post a Comment

Popular posts from this blog

Telugu Song - Aradhya (Movie name : Kushi)

A Breakdown of the Lyrics and Their Meanings: "you're my sunshine, you're my moonlight, you're star in the sky, come with me now" : This is a universal expression of love, comparing the beloved to celestial bodies and expressing a deep longing for their presence. "naatho raa neela raa aradhya" : This line translates to "Come with me, my blue-eyed one, my beloved". It is a direct call to the lover. "padhamu nee vaipila, parugu needhe kadha" : This means "My steps are towards you, my run is only towards you". It signifies a deep devotion and yearning for the beloved. "thanuvu thera meedhuga, cheruko twaraga" : This translates to "Come quickly on a feather-light body". It's a poetic way of asking the beloved to come quickly. "manasara chelithara na gundeni" : This line means "You have stolen my heart". It expresses the intensity of love and the sense of being captivated by the beloved...
Post a Comment
Read more

Pramuka Pemersatu Kita

Jadikan Pramukapemersatu Kita Karena Tak Ada Beda Semua Satu Nusantara Hempaskan Perbedaan Yang Menghalangi Kita Bersatu Dalam Satya Darma Menuju Bhineka Tunggal Ika Bukan Saatnya Melihat Perbedaan Tapi Harusnya Kita Satukan Tekad Menuju Masa Depan Satunya Indonesia Bela Negara Tanpa Pandang Dimana Kita Praja Muda Karana Pastilah Bisa Menjadi Pemersatu Budaya Bangsa Walau Beda Bahasa Tradisi Suku Dan Gaya Tapi Tetap Kita Di Khatulistiwa Bridge: Kita Sebagai Tunas Bangsa Warnai Bumi Ku Tercinta Dengan Pandangan Ke Depan Semangat Kibar
Post a Comment
Read more

Trik dan Tip Excel Terbaru

tutorialmicrosoftexcel.net – Pada tutorial microsoft excel kali ini kita akan membahas beberapa Trik dan Tips excel terbaru. Trik dan Tip ini yang jarang dipakai akan tetapi sangat bermanfaat untuk mempermudah pekerjaan kantor kita. Dengan meluangkan sedikit waktu untuk mempelajari Trik dan Tip Excel akan membuat pekerjaan lebih efisien dan efektif dalam menggunakan microsoft excel. Berikut ini beberapa Trik dan Tip Microsoft Excel terbaru. Menambahkan Shortcut pada Menu Bar Hampir semua dari kita suka cara pintas dalam menyelesaikan pekerjaan di excel dalam hanya sekali klik. Dalam hal ini Microsoft Excel telah menyediakan fasilitas shortcut untuk memudahkan mengakses perintah dalam sekali klik. Pada bagian pojok kiri atas layar microsoft excel, kita dapat melihat 3 ikon kecil, 1 ikon save dan 2 ikon untuk undo dan redo. Baca juga : Menggunakan Keyboard Shorcut Pada Microsoft Excel Ketiga shorcut tersebut disediakan oleh Microsoft Excel untuk ...
Post a Comment
Read more