Life iS aN Adv3nTure

Hallo semuaaaaaa apa kabar?? sehat? Alhamdulillah..

Postingan kali ini sesuai dengan judulnya, aku akan membahas cara membuat menu simple drop down pada bloggar.

eits tunggu dulu, sebelum membahas ke yang lebih jauh, jangan-jangan masih ada yang bertanya menu simple drop down itu apa?? baik, akan aku jelaskan intinya : menu-menu yang ada di bawah header blog, kalo punya ku kayak “ about” “reding list” download” “friend’s blog”

mengerti kan?

penasaran gak gimana bisa begitu? mau tau caranya? oke,langsung aja ikuti cara dibawah ini:
1. Setelah login pada account blogger kamu, pada dasbor > Klik Tata Letak > Edit HTML
2. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>: (gunakan ctrl+F untuk mempermudah pencarian)
#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 kamu tambahkan pada bagian elemen halaman sebagai widget
<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>
</div>
4. simpan template kamu
5. lihat hasilnyaaa 

gimana???? mudah kan?????
selamat mencoba! salam semangat blogging rubahputih!

sumber : THE POW3R