Drop down menu ini tampak seperti pada menu di blog saya (atas):
Drop down menu ini menggunakan CSS jadi tidak akan memperlambat loading blog anda.
Tutorial ini saya dapat dari www.blogspottutorial.com
dalam bahasa inggris.
Bagaimana cara membuatnya ?
Sebenarnya ada 2 langkah, Tetapi saya pilihkan langkah yang paling mudah.
LANGKAH 1
-Login Dengan blig ID mu
-Setelah masuk dasbor, klik layout.
-Lalu klik Edit HTML
-Sebaiknya backup dulu template anda dengan mengklik download template, lalu simpan di komputer anda.
-Cari kode (CTRL+F) ]]></b:skin> di kotak template pada edit HTML
-Copy dan paste kode berikut diatas kode ]]></b:skin>
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menu {list-style-type:none; margin:5px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;}
#menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}
#menu .one {background: #827b6b; border-top:5px solid #dca;}
#menu .two {background: #646e4c; border-top:5px solid #bb9;}
#menu .three {background: #a4a88d; border-top:5px solid #eec;}
#menu .four {background: #a29f68; border-top:5px solid #f8f8b8;}
#menu .one dt {background: #b2ab9b;}
#menu .two dt {background: #949e7c;}
#menu .three dt {background: #d4d8bd;}
#menu .four dt {background: #e2dfa8;}
#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
#menu .one dd {border-bottom:1px solid #aaa;}
#menu .two dd {border-bottom:1px solid #e8e8e8;}
#menu .three dd {border-bottom:1px solid #eee;}
#menu .four dd {border-bottom:1px solid #999;}
#menu dd.last {border-bottom:1px solid #fff;}
#menu dt a, #menu dt a:visited {display:block; color:#444;}
#menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;}
#menu .one dd a {background:#949e7c; color:#eee;}
#menu .two dd a {background:#d4d8bd; color:#346;}
#menu .three dd a {background:#e2dfa8; color:#654;}
#menu .four dd a {background:#b2ab9b; color:#ff8;}
#menu .one dd a:hover {background: #b2ab9b; color:#345;}
#menu .two dd a:hover {background: #949e7c; color:#543;}
#menu .three dd a:hover {background: #d4d8bd; color:#123;}
#menu .four dd a:hover {background: #e2dfa8; color:#534;}
-Cari kode dibawah ini (yang mirip, setiap template berbeda2):
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>
</b:section>
(Jika anda tidak dapat menemukan kode diatas pada templeate anda, maka cari kode ini pada template anda:
<div id='header-wrapper'>
jika tidak ada juga, maka carilah dengan kata header, lihat script yang ditemukan, lalu teliti scriptnya. Jika mengandung kata maxwidgets, showaddelement, locked, dan juga ada judul blog anda (blog tittle). maka itulah script yang harus anda ubah seperti dibawah ini:
-Pada kode diatas, ubah maxwidgets='1' menjadi maxwidgets='2'
-Ubah juga showaddelement='no' menjadi showaddelement='yes
-Dan 'locked='true' menjadi locked='false'
-Lalu klik save template.
LANGKAH 2
-Klik Pada tab Elemen Halaman
-Klik tambah elemen halaman yang ada diatas elemen header
-Lalu klik HTML/JavaScript
-Copy dan paste kode dibawah ini pada elemen HTML/JavaScript yang baru anda buat (jangan lupa merubah Link sesuai dengan link yang akan kamu pasangkan.
<ul id="menu"><!-- drop down menu start -->
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="one">
<!-- Alter the links with your own -->
<dt><a href="http://onlinegamemaniac.blogspot.com/">HOME</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="two">
<dt><a href="http://onlinegamemaniac.blogspot.com/search/label/game">GAMES</a></dt>
<dd><a href="http://onlinegamemaniac.blogspot.com/search/label/game review" title="Review of Games">Game Reviews</a></dd>
<dd><a href="http://onlinegamemaniac.blogspot.com/search/label/game guide" title="Game Tips and Guides">Game Guides</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="three">
<dt><a href="http://onlinegamemaniac.blogspot.com/search/label/other">OTHERS</a></dt>
<dd><a href="http://onlinegamemaniac.blogspot.com/search/label/blogging tips" title="Tips for Blogging">Blogging Tips</a></dd>
<dd><a href="http://onlinegamemaniac.blogspot.com/search/label/money maker" title="Money Maker Program">Money maker</a></dd>
<dd><a href="http://onlinegamemaniac.blogspot.com/search/label/promo" title="Products and Promotions">Promotions</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="four">
<dt><a href="http://onlinegamemaniac.blogspot.com/search/label/news">NEWS</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul><!-- end of drop down menu -->
-jika sudah, klik simpan perubahan.
CATATAN :
Diantara tag <dt> dan </dt> merupakan top menu yang tampil di luar
dan diantara tag <dd> dan </dd> merupakan sub menu yang akan keluar jika pointer mouse diarahkan pada top menu.
Sekian penjelasan dari saya, semoga bermanfaat.
Tolong komentarnya yaa ^^
BalasHapus