download disini
Minggu, 10 Maret 2013

Cara Membuat Menu Dropdown Keren pada Blog

 
Bagi agan-agan yang blognya pengen menu dropdown keren, nich ane ada sedikit trik untuk membuat menu dropdown keren. sebelum agan membuat menu dropdown nya, silahkan lihad dulu demonya. kalau agan sreg, monggo di coba.

  1. Login ke Dashbord Blog agan
  2. Pilih Templete, kemudian klik Edit HTML (Untuk jaga-jaga, back up dulu template agan.)
  3. Kemudia cari kode ]]></b:skin> Gunakan tombol CTRL + F
  4. Jika kode sudah ketemu. Copy kode dibawah ini  dan letakan diatas kode ]]></b:skin>
/* Horyzontal Droupdown menu
----------------------------------------------- */
#top-wrapper{background:url(http://1.bp.blogspot.com/-Dz55XjfHfIU/T2AtDWgb0aI/AAAAAAAAA9I/vZgjL1iEbgk/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
#topbar{width:980px;height:40px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
#top a.arrow{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}
5. Kemudian cari kode <div class='header-outer'> atau <div id='header-wrapper'> . Pilih salah satu
6. jika sudah ketemu, pastekan kode di bawah ini di bawah kode  <div class='header-outer'> atau <div id='header-wrapper'> .
<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='http://andryemos.blogspot.com/'><span>Welcome</span>Homepage</a></li>
<li><a href='http://andryemos.blogspot.com/'><span>This is</span>About Us</a></li>

<li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
<ul>
<li><a href='http://andryemos.blogspot.com/'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='http://andryemos.blogspot.com/'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='http://andryemos.blogspot.com/'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='http://andryemos.blogspot.com/'>Sub menu 4</a></li>
</ul>
</li>

<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
<ul>
<li><a href='http://andryemos.blogspot.com/'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='http://andryemos.blogspot.com/'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='http://andryemos.blogspot.com/'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='http://andryemos.blogspot.com/'>Sub menu 4</a></li>
</ul>
</li>

<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
<ul>
<li><a href='http://andryemos.blogspot.com/'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='http://andryemos.blogspot.com/'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='http://andryemos.blogspot.com/'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='http://andryemos.blogspot.com/'>Sub menu 4</a></li>
<li class='hr'/>
<li><a href='http://andryemos.blogspot.com/'>Sub menu 5</a></li>
</ul>
</li>

</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div></div> 

Keterangan :
  • Ganti Link warna biru dengan link blog sobat
  • Tulisan warna merah sebagai nama menu
  • Tulisan warna kuning sebagai keterangan dari nama menu
  • Tulisan warna hijau sebagai sub menu
7. Jika sudah, pratinjau dahulu. apabila sudah pas. klik simpan template
8. Selamat, blog agan memiliki menu dropdown yang keren. :D

sumber
Title: Cara Membuat Menu Dropdown Keren pada Blog; Written by Andry P.L; Rating: 5 dari 5
Comments
18 Comments

18 komentar:

  1. For hottest news you have to visit web and on world-wide-web I found this web site as
    a most excellent web site for latest updates.

    My site :: agoda coupon code

    BalasHapus
  2. mantap tutorial nya gan... ;p

    BalasHapus
  3. http://elecpro-sale.blogspot.com

    BalasHapus
  4. Mantap & Ngerti sih tapi mumet
    Mampir ya ke Desain Rumah

    BalasHapus
  5. aaaaaaaaaaaaaaaaaaaaaaaaaaaa
    nggak bisa dicopasssssssssssssssss
    liat tutor lain aja ach . . . .

    BalasHapus
  6. hmmmm... lain di copy lain yang keluar sob...
    bgung nich. dont modifikation please
    yang simple ajah donk..

    BalasHapus
  7. makasih gan, kunjungin blog ane http://rootersandroid.blogspot.com/

    BalasHapus
  8. Terima Kasih telah membagikan ilmu anda, Informasi yang
    sangat berguna dan bermutu. mari kita saling kenal jauh
    melalui jaringan blogspot ini dengan saling follow

    Follow di blog saya : http://jejakservicepc.blogspot.com/

    semoga kita bisa saling berbagi ilmu yang tiada hentinya
    mengalir dalam dunia ini

    BalasHapus
  9. makasih ilmunya gan.....
    ane ijin kopastenya ya ^_^
    http://telat-bulan.blogspot.com/

    BalasHapus
  10. ga bisa di copy gan,,,,,

    ga usah ngasih tutorialnya mending,,,,,,

    BalasHapus
  11. mantap gan

    http://prediksibola888.blogspot.com/2013/09/cara-membuat-menu-dropdown-yang-keren.html

    BalasHapus
  12. Mantap gan. berhasil. hehe. ni baru postingan. sekali kali atuh mampir ke zrf-community.blogspot.com :D

    BalasHapus
  13. thanks gan. bermanfaat sekali untuk newbie spt saya

    BalasHapus