Cara Membuat Menu Di Blog [Dengan Dropdown Menu] ~ SCH-XP

Cara Membuat Menu Di Blog [Dengan Dropdown Menu] - yosh.. mumpung masih ada waktu.. ane share nih Cara Membuat Menu Di Blog [Dengan Dropdown Menu] , Dropdown Menu ini adalah Dropdown blog ini yang sebelumnya (sblum yg skarang).. ini nggak ,memperberat loading blog kok sob.. caranya pun mudah.. untuk demo KLIK DISINI !

langsung aja ke tutorial nya :

1. Login ke Blogger
2. Pilih Template -> EDIT HTML
3. Cari kode ]]></b:skin> untuk mempermudah gunakan CTRL+F di keyboard.
4. Lalu Taruh kode dibawah ini diatas kode ]]></b:skin>

#DANDYmnu{background:#e9e9e9; border:1px solid #DDD; height:36px; margin:0 0 5px 0}
#DANDYmnu ul, #DANDYmnu li, #DANDYmnu a{margin:0; padding:0; position:relative}
#DANDYmnu:after, #DANDYmnu ul:after{content:''; display:block; clear:both}
#DANDYmnu a{background:transparent; border-right:1px solid #ddd; color:#333; display:inline-block; font-family:'Ubuntu',arial,sans-serif; font-size:14px; line-height:36px; padding:0 15px; text-decoration:none}
#DANDYmnu ul{list-style:none}
#DANDYmnu>ul{float:left}
#DANDYmnu>ul>li{float:left}
#DANDYmnu>ul>li:hover:after{content:''; display:block; width:0; height:0; position:absolute; left:50%; bottom:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #ddd; margin-left:-10px}
#DANDYmnu>ul>li:first-child>a{border-radius:0; -moz-border-radius:0; -webkit-border-radius:0}
#DANDYmnu>ul>li:last-child>a{border-radius:0; -moz-border-radius:0; -webkit-border-radius:0}
#DANDYmnu>ul>li.active>a{background:#eee}
#DANDYmnu>ul>li:hover>a{background:#eee}
#DANDYmnu .has-sub{z-index:1}
#DANDYmnu .has-sub:hover>ul{display:block}
#DANDYmnu .has-sub ul{display:none; border:1px solid #ddd; border-bottom:0; position:absolute; width:200px; top:100%; left:0}
#DANDYmnu .has-sub ul li{*margin-bottom:-1px}
#DANDYmnu .has-sub ul li a{background:#ddd; border:0; border-bottom:1px solid #ddd; filter:none; font-size:14px; display:block; line-height:120%; padding:10px}
#DANDYmnu .has-sub ul li:hover a{background:#eee}
#DANDYmnu .has-sub .has-sub:hover>ul{display:block}
#DANDYmnu .has-sub .has-sub ul{display:none; position:absolute; left:100%; top:0}
#DANDYmnu .has-sub .has-sub ul li a{background:#f00; border-bottom:1px solid #97b36b}
#DANDYmnu .has-sub .has-sub ul li a:hover{background:#345105;}

5. Eitss blum selesai.. HTML ( Selipkan di Bawah Kode <body> ) / Jika ingin menaruh kode dibawah Header-wrapper, selipkan di bawah kode Header-Wrapper, atau terserah anda :

<div id='DANDYmnu'>
<ul>
<li class='active'><a class='tooltip' expr:href='data:blog.homepageUrl' title='Beranda'>Home</a></li>
<li class='has-sub'><a href='#'>Top Categories ▼</a>
<ul>
<li><a class='tooltip' href='/search/label/TutorialBlog' title='Tutorial Blog'>Tutorial Blog</a></li>
<li><a class='tooltip' href='/search/label/TipsandTrik' title='Tips and Trik'>Tips and Trik</a></li>
<li><a class='tooltip' href='/search/label/Template' title='Template'>Template</a></li>
<li><a class='tooltip' href='/search/label/SEO' title='SEO Tutorial'>SEO</a></li>
<li><a class='tooltip' href='/search/label/Jquery' title='Jquery'>Jquery</a></li>
<li><a class='tooltip' href='/search/label/CSS' title='CSS'>CSS</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>Tools and Etc ▼</a>
    <ul>
      <li><a class='tooltip' href='http://sch-xp.blogspot.com/p/blog-page.html' target='_blank' title='HTML Color Code'>Hex Color Generator</a></li>
      <li><a class='tooltip' href='http://sch-xp.blogspot.com/p/blog-page_7521.html' target='_blank' title='Konversi HTML'>Konversi HTML</a></li>
      <li><a class='tooltip' href='http://sch-xp.blogspot.com/p/blog-speed-test.html' target='_blank' title='Blog Speed Test'>Blog Speed Test</a></li>
</ul>
</div>