satu lagi...
Membuat Menu Drop down ,,ahh saya kurang tau tuh arti bahasa 'Indonesia'nya mungkin ,menunya banyak kali yah' ribet' dah ok kita lihat ajah yuuuuk ??
Seperti apa sih Menu Drop down itu langsung aja liat gambarnya biar saya ga sulit ngejelasinnya
Nah kira-kira paham belum? menu dropdown adalah seperti gambar di atas, saat kita arahin kursor mouse salah satu menu di navbar, tiba-tiba mucul panjang kebawah (menu tambahan ke bawah) itulah yang di maksud dengan Dropdown Menu
Bagaimana cara buatnya, langsung ajah gak usah basi-basi lagi ?
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/AVvXsEidsk_-TVZ7fhN-SP2N-ObIAgK4EhAG1xwu1yUguA_VJH5ucxrGzmDyw5oEF9WHH83OG6sxHZTYHptmoKJS5DVRWYjYpy58rXp0IA56B7W4_2Zk_ZDCWqOXnie8SMBJ7RwoUuxC3MGSzvUh/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/AVvXsEidsk_-TVZ7fhN-SP2N-ObIAgK4EhAG1xwu1yUguA_VJH5ucxrGzmDyw5oEF9WHH83OG6sxHZTYHptmoKJS5DVRWYjYpy58rXp0IA56B7W4_2Zk_ZDCWqOXnie8SMBJ7RwoUuxC3MGSzvUh/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;
}
#NavbarMenu {
width: 780px;
height: 30px;
background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidsk_-TVZ7fhN-SP2N-ObIAgK4EhAG1xwu1yUguA_VJH5ucxrGzmDyw5oEF9WHH83OG6sxHZTYHptmoKJS5DVRWYjYpy58rXp0IA56B7W4_2Zk_ZDCWqOXnie8SMBJ7RwoUuxC3MGSzvUh/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/AVvXsEidsk_-TVZ7fhN-SP2N-ObIAgK4EhAG1xwu1yUguA_VJH5ucxrGzmDyw5oEF9WHH83OG6sxHZTYHptmoKJS5DVRWYjYpy58rXp0IA56B7W4_2Zk_ZDCWqOXnie8SMBJ7RwoUuxC3MGSzvUh/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
<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://ask-uang.blogspot.com/search/label/Download%20Software'>Software</a>
<ul>
<li><a href='http://ask-uang.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://ask-uang.blogspot.com/2010/01/pembuat-banner-animasi-webblog.html'>Software
Pembuat Banner</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='http://ask-uang.blogspot.com/search/label/Internet'>Dial-Up n Connectivity</a></li>
<li><a href='http://ask-uang.blogspot.com/search/label/Utility%20Tool'>Security and Spyware</a></li>
<li><a href='http://ask-uang.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://ask-uang.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://ask-uang.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://ask-uang.blogspot.com/search/label/Tips Blog'>Belajar Blogspot</a></li>
<li><a
href='http://ask-uang.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/AVvXsEiB3o-YZrNJKXuUq7KU-KA7LrfKvOQwwUlpyjw4nvCyCUzbkgpCmmwLcWLQPt4psV3eKfEtmQaOm76isV_FrH_t8lfQwvD1w-H_XnsMJ3NhjvlOqkenDNY3IDU9pBOR9WxJZj43iZUz3U4/s1600/rss.gif'
style='vertical-align:middle'/> RSS Feeds</a></li>
</ul>
</div>
</div> <!-- end navbar -->>
</div>
<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://ask-uang.blogspot.com/search/label/Download%20Software'>Software</a>
<ul>
<li><a href='http://ask-uang.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://ask-uang.blogspot.com/2010/01/pembuat-banner-animasi-webblog.html'>Software
Pembuat Banner</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='http://ask-uang.blogspot.com/search/label/Internet'>Dial-Up n Connectivity</a></li>
<li><a href='http://ask-uang.blogspot.com/search/label/Utility%20Tool'>Security and Spyware</a></li>
<li><a href='http://ask-uang.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://ask-uang.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://ask-uang.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://ask-uang.blogspot.com/search/label/Tips Blog'>Belajar Blogspot</a></li>
<li><a
href='http://ask-uang.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/AVvXsEiB3o-YZrNJKXuUq7KU-KA7LrfKvOQwwUlpyjw4nvCyCUzbkgpCmmwLcWLQPt4psV3eKfEtmQaOm76isV_FrH_t8lfQwvD1w-H_XnsMJ3NhjvlOqkenDNY3IDU9pBOR9WxJZj43iZUz3U4/s1600/rss.gif'
style='vertical-align:middle'/> RSS Feeds</a></li>
</ul>
</div>
</div> <!-- end navbar -->>
</div>
8. Simpan di bawah <body>
9. save.
Sehingga hasilnya seperti ini :
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<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://ask-uang.blogspot.com/2010/01/pembuat-banner-animasi-webblog.html'>Software
Pembuat Banner</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='http://ask-uang.blogspot.com/search/label/Internet'>Dial-Up n Connectivity</a></li>
<li><a href='http://ask-uang.blogspot.com/search/label/Utility%20Tool'>Security and Spyware</a></li>
<li><a href='http://ask-uang.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://ask-uang.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://ask-uang.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://ask-uang.blogspot.com/search/label/Tips Blog'>Belajar Blogspot</a></li>
<li><a href='http://ask-uang.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/AVvXsEiB3o-YZrNJKXuUq7KU-KA7LrfKvOQwwUlpyjw4nvCyCUzbkgpCmmwLcWLQPt4psV3eKfEtmQaOm76isV_FrH_t8lfQwvD1w-H_XnsMJ3NhjvlOqkenDNY3IDU9pBOR9WxJZj43iZUz3U4/s1600/rss.gif'
style='vertical-align:middle'/> RSS Feeds</a></li>
</ul>
</div>
</div> <!-- end navbar -->>
</div>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<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://ask-uang.blogspot.com/2010/01/pembuat-banner-animasi-webblog.html'>Software
Pembuat Banner</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='http://ask-uang.blogspot.com/search/label/Internet'>Dial-Up n Connectivity</a></li>
<li><a href='http://ask-uang.blogspot.com/search/label/Utility%20Tool'>Security and Spyware</a></li>
<li><a href='http://ask-uang.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://ask-uang.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://ask-uang.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://ask-uang.blogspot.com/search/label/Tips Blog'>Belajar Blogspot</a></li>
<li><a href='http://ask-uang.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/AVvXsEiB3o-YZrNJKXuUq7KU-KA7LrfKvOQwwUlpyjw4nvCyCUzbkgpCmmwLcWLQPt4psV3eKfEtmQaOm76isV_FrH_t8lfQwvD1w-H_XnsMJ3NhjvlOqkenDNY3IDU9pBOR9WxJZj43iZUz3U4/s1600/rss.gif'
style='vertical-align:middle'/> RSS Feeds</a></li>
</ul>
</div>
</div> <!-- end navbar -->>
</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://ask-uang.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://ask-uang.blogspot.com/search/label/Tips%20Blog'>Belajar Blogspot</a></li>
</ul>
</li>
<li><a href='http://ask-uang.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://ask-uang.blogspot.com/search/label/Tips%20Blog'>Belajar Blogspot</a></li>
</ul>
</li>
Yang berwarna ungu di atas adalah "tutorial" adalah menu yang akan di buat dropdown ke bawah oleh 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.
salam
semoga banyak manfaat yahh
ingin atau ada komentar dari rekan- rekan
1 Comment:
sambil berkunjung, sambil ngopi dan menjadi lebih seru kalau utak atik isi blog ini, wahhhh ternyata infonya matang dan mantab, benar benar great blog... yaaah tapi senang sekali kalau dapaet follow ya saya ucapkan terimakasih
Posting Komentar
ada masukan lain ...?