Wednesday, 23 February 2011

Membuat Drop Down menu

Beberapa bulan yang lalu aku sudah berhasil membuat Drop Down Menu untuk blog ku berkat tutorial dari senior-senior yang baik hati dan Alhamdulillah berhasil,
Tapi setelah aku pengen buat untuk blog yang lainnya eh…tiba-tiba malah blank dan lupa, ditambah lagi dulu aku menggabungkan dua turorial. Makanya tutorial kali ini aku tujukan untuk diriku sendiri.

Tampilan nantinya seperti dibawah ini,


Kalo begitu langsung aja ke TKP


1. Pertama kalian kudu Log-in di blogger.com dengan ID anda

2. Masuk ke “Rancangan/Tata Letak” kemudian “Edit HTML”


3. Kemudian jangan lupa Klik “Download Template Lengkap” buat jaga-jaga aja jika terjadi kesalahan. N jangan lupa centang (V) Expand Template Widget.

4. Lalu cari kode ]]></b:skin>
  • Untuk lebih mudahnya tekan CTRL + f
5. Dan copy paste kode dibawah ini tepat diatas kode ]]></b:skin>


.NavbarMenu {
background:#191B1D url(http://bp1.blogger.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x top left;
width: 100%;
height: 37px;
color: #FFFFFF;
margin: 0 auto;
padding: 0;
font: bold 8px Arial, Tahoma, Verdana;
clear:both;
border-left:1px solid #333;
border-right:1px solid #333
}
.NavbarMenuleft {
width: 75%;
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:#fff;
display:block;
text-transform:capitalize;
margin:0;
padding:11px 10px 8px;
font:normal 12px Georgia, Times New Roman;
text-decoration: none;
}
.nav li a:hover, .nav li a:active {
background:#102427 url(http://lh5.ggpht.com/_pt7i0nbIOCY/SyYZwDCCgGI/AAAAAAAACc0/TPCaXfkieYA/button2_thumb%5B3%5D.gif) repeat-x top left;
;
color:#FFF;
margin: 0;
text-decoration: none;
}
.nav li li a, .nav li li a:link, .nav li li a:visited {
background:#2C5F24 url(http://bp1.blogger.com/_pt7i0nbIOCY/R-ZM3Y0g2gI/AAAAAAAAABY/wqPGB3cXR5Q/s400/button1.gif) repeat-x top left;
width:200px;
color:#fff;
text-transform:capitalize;
float:none;
margin:0;
padding:7px 10px;
border-bottom:1px solid #0d2601;
border-left:1px solid #0d2601;
border-right:1px solid #0d2601;
font: normal 14px Georgia, Times New Roman;
}
.nav li li a:hover, .nav li li a:active {
background:#102427 url(http://lh5.ggpht.com/_pt7i0nbIOCY/SyYZwDCCgGI/AAAAAAAACc0/TPCaXfkieYA/button2_thumb%5B3%5D.gif) repeat-x top left;
color:#fff;
}
.nav li {
float:left;
padding:0;
}
.nav li a.enclose, .nav li a.enclose:visited {
border-top:1px solid #000;
}
.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: -1px 0 0 220px;
}
.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;
}
#search {
width: 25%;
font-size: 11px;
float: right;
margin: 0;
padding:0;
}
#searchform {
margin:0;
padding:0;
overflow:hidden;
display:inline;
}
#searchbox {
background:#ddd;
padding:0;
margin:0;
}
#search input {
background:transparent;
color:#fff;
float:left;
font-size:12px;
margin: 7px 0 0 10px;
width: 110px;
padding:3px 7px;
border: 1px solid #fff;
font: normal 10px arial, verdana, Times New Roman;
}
#search .btn {
margin:7px 0 0;
padding:0;
width:auto;
border:0;
}



6. Kemudian copy paste kode dibawah ini tepat di atas kode </head>



<script type="text/javascript" src="http://uvumitools.googlecode.com/files/mootools-for-dropdown.js"> </script>
<script type="text/javascript" src="http://uvumitools.googlecode.com/files/UvumiDropdown-compressed.js"> </script>
<script type="text/javascript">
var myMenu = new UvumiDropdown("dropdown-menu");
</script>



7. Lalu cari kode <div id='header-wrapper'>

Sebelumnya
  • Jika anda ingin drop down menu berada di atas header, letakkan kode tepat diatas kode <div id='header-wrapper'>
  • Tetapi jika anda ingin drop down menu di bawah header, letakkan kode di bawah kode end tag header-wrapper.</div><!-- end header-wrapper -->
Dan Ini kodenya


<div class='NavbarMenu'>
<div class='NavbarMenuleft'>
<ul class='nav' id='dropdown-menu'>
<li><a href='http://rtn-alwaysforyou.blogspot.com/' rel='nofollow'>Home</a>
</li>
<li><a href='#' rel='nofollow'>Perkantoran</a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
</ul></li>
</ul>
</li>
<li><a href='#' rel='nofollow'>Materi </a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
</ul></li>
</ul>
</li>
<li><a href='#' rel='nofollow'>Soal - Soal</a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='# '>Coming Soon</a></li>
</ul></li>
</ul>
</li>
<li><a href='#' rel='nofollow'>Education</a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
</ul></li>
</ul>
</li>
<li><a href='#' rel='nofollow'>Download</a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
</ul></li>
</ul>
</li>
<li><a href='#' rel='nofollow'>Gudang Lagu</a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
</ul></li>
</ul>
</li>
<li><a href='#' rel='nofollow'>Artikel</a>
<ul>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
<li><a href='#' rel='nofollow'>Coming Soon</a></li>
</ul></li>
<li><a href='#' rel='nofollow'>Coming Soon&#160;&#160;&#187;</a>
<ul><li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
<li><a href='#'>Coming Soon</a></li>
</ul></li>
</ul>
</li>
</ul></div>
<div id='search'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='160' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
<input class='btn' name='' src='http://lh4.ggpht.com/_pt7i0nbIOCY/ScdxoASk9rI/AAAAAAAABoM/3qt9F1KUH_s/views-24_thumb%5B1%5D.png?imgmax=800' type='image' value='Go'/>
</form>
</div></div>



8. Lalu klik “Simpan Template”

9. Untuk tahab ini memang telah selesai, dan untuk tahab selanjutnya adalah mengganti link-link beserta keywoardnya.





Tutorial Diatas di-Ilhami Dari
http://kolom-tutorial.blogspot.com/
Dan
http://masdazine.blogspot.com/

0 comments:

Post a Comment

ChatBox lagi Ane cabut dulu (tapi bo'ong), kalo mau ngomong komeng aja di mari, skalian improve PageRank (DoFolloW)