BLOGGINGPASURUAN
kesempatan ini saya hanya ingin mengetengahkan tutorial blogger yang mudah, yaitu
tentang cara membuat simple drop down menu dengan CSS.
Langsung
saja tutorial :
1.
Setelah sig in pada account blogger Anda >>> pada Dasbor >>> Klik Template >>> Edit HTML
2. Tambahkan kode CSS berikut diatas tag ]]></b:skin>:
CSS
#pad {height:100px;}
#menuPositioner {width:100%;
position:relative; float:left; top:-40px; margin-bottom:-40px; }
#menuHolder {position:relative; float:left;
left:50%;}
#menu,
#menu ul {padding:0; margin:0;
list-style:none; font: 12px arial, verdana, sans-serif;
background:url(http://sites.google.com/site/amatullah83/background/trans.gif);
position:relative; z-index:100;}
#menu {height:40px; float:left; padding:0;
background:#4b4d3f; position:relative; right:50%;}
#menu ul {position:absolute; left:-9999px;
top:-9999px;}
#menu table {border-collapse:collapse;
margin:-1px; padding:0; width:0; height:0;}
#menu li {float:left;}
#menu li a {display:block; float:left;
color:#fff; height:40px; padding:0 20px 0 0; line-height:38px;
text-decoration:none;
background:url(http://sites.google.com/site/amatullah83/background/button1a.gif)
no-repeat right top;}
#menu li a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif)
no-repeat right top;}
#menu li a b {display:block; float:left;
height:40px;
background:url(http://sites.google.com/site/amatullah83/background/button1.gif)
left top; padding:0 0 0 20px; cursor:pointer;}
#menu li:hover {position:relative;
z-index:100;}
#menu a:hover {position:relative;
z-index:100; color:#fc0;}
#menu a.sub:hover
{background:url(http://sites.google.com/site/amatullah83/background/button3a.gif)
no-repeat right top;}
#menu li:hover > a {color:#fc0;}
#menu li:hover > a.sub
{background:url(http://sites.google.com/site/amatullah83/background/button3.gif)
no-repeat right top;}
#menu :hover ul {left:0; top:40px;
z-index:300; width:130px; padding-top:4px;
background:url(http://sites.google.com/site/amatullah83/background/trans.gif);}
#menu :hover ul li a {height:25px;
width:120px; padding:0 0 0 10px; line-height:25px; background:#546775;
color:#fff; border-bottom:1px solid #a3b6c4; font-size:11px;}
#menu :hover ul li a.fly
{background:#546775
url(http://sites.google.com/site/amatullah83/background/fly.gif) no-repeat
right center;}
#menu :hover ul li a:hover {color:#fc0;}
#menu :hover ul li a:hover.fly
{background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif)
no-repeat right center;}
#menu :hover ul li:hover > a
{color:#fc0;}
#menu :hover ul li:hover > a.fly
{background:#546775
url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat
right center;}
#menu :hover ul ul {position:absolute;
left:-9999px; top:-9999px;}
#menu :hover ul :hover ul {left:117px;
top:0; padding:0;}
#menu :hover ul :hover ul li a
{background:#a3b6c4; color:#000; border-bottom:1px solid #546775;
font-size:11px;}
#menu :hover ul :hover ul li a:hover
{color:#fff;}
3. Tambahkan
kode HTML berikut dibawah atau diatas <div
id='header-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen
halaman sebagai widget
HTML
<div
id="menuPositioner">
<div
id="menuHolder">
<ul
id="menu">
<li><a
href="index.html"><b>Home</b></a></li>
<li><a
href="single.html"><b>Single
Level</b></a></li>
<li class="current"><a
class="sub"
href="dropdown.html"><b>Dropdown</b><!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE
6]><table><tr><td><![endif]-->
<ul class="sub1">
<li><a
class="fly" href="#url">Dropdown one<!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE
6]><table><tr><td><![endif]-->
<ul
class="fly1">
<li><a
href="#url">Dropdown 1.1</a></li>
<li><a
href="#url">Dropdown 1.2</a></li>
<li><a
href="#url">Dropdown 1.3</a></li>
<li><a
href="#url">Dropdown 1.4</a></li>
<li><a
href="#url">Dropdown 1.5</a></li>
<li><a
href="#url">Dropdown 1.6</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>
<li
class="currentsub"><a class="fly"
href="#url">Dropdown two<!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE
6]><table><tr><td><![endif]-->
<ul class="fly2">
<li><a
href="#url">Dropdown 2.1</a></li>
<li><a
href="#url">Dropdown 2.2</a></li>
<li
class="currentfly"><a href="#url">Dropdown
2.3</a></li>
<li><a
href="#url">Dropdown 2.4</a></li>
<li><a
href="#url">Dropdown 2.5</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>
<li><a
href="#url">Dropdown three</a></li>
<li><a
href="#url">Dropdown four</a></li>
<li><a
class="fly" href="#url">Dropdown five<!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE
6]><table><tr><td><![endif]-->
<ul
class="fly3">
<li><a
href="#url">Dropdown 5.1</a></li>
<li><a
href="#url">Dropdown 2.2</a></li>
<li><a
href=http://amatullah83.blogspot.com>Dropdown 3.3</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub"
href="dropline.html"><b>Dropline</b><!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE
6]><table><tr><td><![endif]-->
<ul class="sub2">
<li><a
href=http://amatullah83.blogspot.com>Dropline one</a></li>
<li><a
href="#url">Dropline two</a></li>
<li><a href="#url">Dropline
three</a></li>
<li><a
href="#url">Dropline four</a></li>
<li><a
href="#url">Dropline five</a></li>
<li><a
href="#url">Dropline six</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub"
href="flyout.html"><b>Flyout</b><!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE
6]><table><tr><td><![endif]-->
<ul class="sub3">
<li><a
href="#url">Flyout one</a></li>
<li><a
href="#url">Flyout two</a></li>
<li><a
href="#url">Flyout three</a></li>
<li><a
href="#url">Flyout four</a></li>
</ul>
<!--[if lte IE
6]></td></tr></table></a><![endif]-->
</li>
<li id="support"><a
href="support.html"><b>Support</b></a></li>
<li id="contact"><a
href="contact.html"><b>Contact</b></a></li>
</ul>
</div>
4. Simpan Template. Hasil dari tutorial
membuat simple drop down menu dengan CSS ini seperti screnshot diatas.
Mudah bukan? Jika ada kesulitan silahkan tinggalkan pesan pada kolom komentar. Semoga bermanfaat.