cara menambahkan menu dropdown pada blog ~ VIRONHELL BLOGGER

menu dropdown merupakan menu yang akan muncul dengan sendirinya saat kita mengarahkan kursor ke bagian menu pada navbar.,,

Bagaimana cara buatnya?

1. Login ke Blogger.
2. Pilih Edit Tamplate
3. pilih Edit HTML

4. cari kode ]]></b:skin>
5. Silakan anda copy kode di bawah ini :

/*

----- NAVBAR MENU ----- */
#NavbarMenu {

width: 780px;
height: 30px;
background:#99C9FF

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCMzWisXlNgq8JTZENtV4BVagJNIunyV87sDZ6NSBJFG2ol-ueGOisOWLL608EDYQsykft_Mzm-d6KpNfIvmA2ODczWdXE6zM6apQ8WtpsP6UJYgWBW3YfrEsz9v3g7LaRkkzZCgwa4zY5/s800/navbar.gif)

repeat-x top;
color: #3D81EE
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid

#AFAFAF;
border-bottom:

1px solid #FFFFFF;
}
#NavbarMenuleft

{
width:

680px;
float:

left;
margin:

0;
padding:

0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li

a:link, #nav li a:visited {
color: #3D81EE;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 14px

ARIAL;
}
#nav li a:hover, #nav

li a:active {
background:#99C9FF;
color: #3D81EE;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li

li a:link, #nav li li a:visited {
background: #3D81EE

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCMzWisXlNgq8JTZENtV4BVagJNIunyV87sDZ6NSBJFG2ol-ueGOisOWLL608EDYQsykft_Mzm-d6KpNfIvmA2ODczWdXE6zM6apQ8WtpsP6UJYgWBW3YfrEsz9v3g7LaRkkzZCgwa4zY5/s800/navbar.gif)

repeat-x top;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px

solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 15px,;
}

#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0

171px;
}
#nav li:hover ul ul,

#nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav

li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li

li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

6. Simpan di atas kode
]]></b:skin>

catatan :

pada text yang berwarna hijau di atas sesuaikanlah dengan lebar tamplate yang anda gunakan
pada text yang berwarna orange di atas biarkan saja

7. Setelah itu silakan copy kode berikut ini :

<div id='NavbarMenu'>

<div

id='NavbarMenuleft'>

<ul id='nav'>

<li><a

expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a

href='Link-Kamu'>Tentang

Kami</a>

<ul>

<li><a href='Link-Kamu'>Sejarah

Perusahaan</a></li>

<li><a href='Link-Kamu'>Profil

Perusahaan</a></li>

<li><a href='Link-Kamu'>Struktur

Organisasi</a></li>

<li><a href='Link-Kamu'>Hubungi

Kami</a></li>

</ul>

</li>

<li><a

href='Link-Kamu'>Komputer</a></li>

<li><a

href='Link-Kamu'>Hardware</a></li>

<li><a

href='http://asksalman19.blogspot.com/search/label/Download%20Software'>Software</a>

<ul>

<li><a

href='http://asksalman19.blogspot.com/search/label/Anti%20Virus'>Antivirus</a></li>

<li><a

href='Link-Kamu'>Download

MP3</a></li>

<li><a href='Link-Kamu'>Desktop

Enhancements</a></li>

<li><a

href='http://asksalman19.blogspot.com/2010/01/pembuat-banner-animasi-webblog.html'>Software

Pembuat Banner</a></li>

<li><a

href='#'>Internet</a>

<ul>

<li><a

href='http://asksalman19.blogspot.com/search/label/Internet'>Dial-Up n

Connectivity</a></li>

<li><a

href='http://asksalman19.blogspot.com/search/label/Utility%20Tool'>Security

and Spyware</a></li>

<li><a

href='http://asksalman19.blogspot.com/search/label/Utility

Tool'>Peralatan</a></li>

</ul>

</li>

<li><a

href='Link-Kamu'>System

Tools</a></li>

<li><a href='Link-Kamu'>Others</a></li>

</ul>

</li>

<li><a

href='Link-Kamu'>Template</a>

<ul>

<li><a

href='http://hyperjadulz.blogspot.com/search/label/New%20Blogger%20Template'>New

Blogger Template</a></li>

<li><a

href='Link-Kamu'>Classic Template</a></li>

</ul>

</li>

<li><a

href='#'>Tutorial</a>

<ul>

<li><a

href='http://asksalman19.blogspot.com'>Belajar

Komputer</a></li>

<li><a

href='http://asksalman19.blogspot.com/search/label/Tips Blog'>Belajar

Blogspot</a></li>
<li><a

href='http://asksalman19.blogspot.com/2009/09/tutorial-mudah-blog.html'>Tutorial

Mudah Blog</a></li>
</ul>

</li>

<li><a

href='/feeds/posts/default'><img

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDJCQU9zIUkcOvk65qyYySfxloP_bLObAEehohTLTedVQForikoEKnvSTdZNYI6mPgiRq9kqvZSI2CHoOz7L5mH1yE1TR04Rx20AgX7jt9qVyYXHItrwYobnAjmttZQ6ZC03emykhz3jA/s1600/rss.gif'

style='vertical-align:middle'/> RSS Feeds</a></li>

</ul>

</div>

</div>

>

</div>

8.

Simpan di bawah <body>

9.

save.

Sehingga

hasilnya seperti ini :

]]></b:skin>

</head>

<body>

<div

id='outer-wrapper'><div id='wrap2'>



<span id='skiplinks'

style='display:none;'>

<a href='#main'>skip to main

</a> |

<a href='#sidebar'>skip to sidebar</a>

</span>

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1'

showaddelement='no'>

<b:widget id='Header1' locked='true'

title='BELAJAR KOMPUTER (Header)' type='Header'/>

</b:section>

<div

id='NavbarMenu'>

<div id='NavbarMenuleft'>

<ul

id='nav'>

<li><a

expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a

href='Link-Kamu'>Tentang Kami</a>

<ul>

<li><a

href='Link-Kamu'>Sejarah Perusahaan</a></li>

<li><a

href='Link-Kamu'>Profil Perusahaan</a></li>

<li><a

href='Link-Kamu'>Struktur Organisasi</a></li>

<li><a

href='Link-Kamu'>Hubungi Kami</a></li>

</ul>

</li>

<li><a

href='Link-Kamu'>Komputer</a></li>

<li><a

href='Link-Kamu'>Hardware</a></li>

<li><a

href='http://asksalman19.blogspot.com/search/label/Download%20Software'>Software</a>

<ul>

<li><a

href='http://asksalman19.blogspot.com/search/label/Anti%20Virus'>Antivirus</a></li>

<li><a

href='Link-Kamu'>Download MP3</a></li>

<li><a

href='Link-Kamu'>Desktop Enhancements</a></li>

<li><a

href='http://asksalman19.blogspot.com/2010/01/pembuat-banner-animasi-webblog.html'>Software

Pembuat

Banner</a></li>

<li><a

href='#'>Internet</a>

<ul>

<li><a

href='http://asksalman19.blogspot.com/search/label/Internet'>Dial-Up n

Connectivity</a></li>

<li><a

href='http://asksalman19.blogspot.com/search/label/Utility%20Tool'>Security

and Spyware</a></li>

<li><a

href='http://asksalman19.blogspot.com/search/label/Utility

Tool'>Peralatan</a></li>

</ul>

</li>

<li><a

href='Link-Kamu'>System Tools</a></li>

<li><a

href='Link-Kamu'>Others</a></li>

</ul>

</li>

<li><a

href='Link-Kamu'>Template</a>

<ul>

<li><a

href='http://hyperjadulz.blogspot.com/search/label/New%20Blogger%20Template'>New

Blogger

Template</a></li>

<li><a

href='Link-Kamu'>Classic Template</a></li>

</ul>

</li>

<li><a

href='#'>Tutorial</a>

<ul>

<li><a

href='http://asksalman19.blogspot.com'>Belajar

Komputer</a></li>

<li><a

href='http://asksalman19.blogspot.com/search/label/Tips Blog'>Belajar

Blogspot</a></li>

<li><a

href='http://asksalman19.blogspot.com/2009/09/tutorial-mudah-blog.html'>Tutorial

Blog</a></li>

</ul>

</li>

<li><a

href='/feeds/posts/default'><img

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDJCQU9zIUkcOvk65qyYySfxloP_bLObAEehohTLTedVQForikoEKnvSTdZNYI6mPgiRq9kqvZSI2CHoOz7L5mH1yE1TR04Rx20AgX7jt9qVyYXHItrwYobnAjmttZQ6ZC03emykhz3jA/s1600/rss.gif'

style='vertical-align:middle'/>

RSS Feeds</a></li>

</ul>

</div>

</div>

>

</div>

Kode

di atas adalah kode yang saya gunakan di salah satu blog saya. dan

mungkin akan sedikit berbeda posisinya dengan template anda. namun

standarnya seperti contoh di atas. lihat hasilnya disini

keterangan

:
1.

jika anda ingin menambah dropdown lagi tinggal tambahkan saja kode :

<li><a

href='#'>Tutorial</a>

<ul>

<li><a

href='http://asksalman19.blogspot.com'>Belajar

Komputer</a></li>

<li><a

href='http://asksalman19.blogspot.com/search/label/Tips%20Blog'>Belajar

Blogspot</a></li>

</ul>

</li>

Catatan :
Yang berwarna ungu di atas adalah "tutorial" adalah menu yang akan di buat dropdown ke bawaholeh kita. jadi bila nanti anda ingin membuat dropdown tambahan, tambahkan saja kode pada kumpulan kode menu pada no.7

2. Di atas, saya banyak menuliskan link ke arah blog ini, ganti dengan link yang ingin anda tuju, bisa ke arah blog anda atau orang lain.

Posted in: TIPS BLOGGING

VIRONHELL BLOGGER

Zona Chat

daftar isi

Archives

Pengikut

Sabtu, 05 Maret 2011

cara menambahkan menu dropdown pada blog

menu dropdown merupakan menu yang akan muncul dengan sendirinya saat kita mengarahkan kursor ke bagian menu pada navbar.,,

0 komentar:

Posting Komentar

Share

MXIT CHAT WIDGET

Chat admin

Labels

BLOG TEMAN