Tuesday 3 August 2010

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/




9 komentar:

Anonymous,  6 September 2010 at 00:46  

Thanks yah,,, blog anda sangat membantu..

Ratna Purnama Sari 6 September 2010 at 20:55  

iya,.. sama-sama
salam kenal n happy bloging ya

andikamplok 28 September 2010 at 14:30  
This comment has been removed by the author.
andikamplok 28 September 2010 at 14:34  

alah rat aku jugol golei code ceng trakir
coba gra cari di blog kmu ndiri...

agus widodo 8 February 2011 at 18:40  
This comment has been removed by the author.
Yayasan Darul Ulum Al Qudusy 12 October 2011 at 07:58  

ah,, masih bingung,, gimana nih,,, download templatenya gag bisa,,,

SDN TAMBAKBAYAN PONOROGO 30 December 2011 at 06:09  

klo kode div id='header-wrapper' nggak ada, gantinya apa ? lam kenal..

DEDI HARIYANTO 25 September 2012 at 08:52  

download templetx dmn gak ada diblog aq

trus klo kode div id='header-wrapper' nggak ada,
solusinya apa

Post a Comment

  © Ratna-Always For You The Transformers by Blog Tips And Trick 2009