CARA MEMBUAT MENU HORIZONTAL DROPDOWN SUPER KEREN MELAYANG

Assalamualaikum wr wb

Bismilah Hirohman Nirohim

Salam Belogger ..

pada kesempatan kali ini Software Komputer akan memberikan Penjelasan tentang CARA MEMBUAT MENU HORIZONTAL DROPDOWN SUPER KEREN MELAYANG  DI BLOG , kali ini saya akan memberikan sebuah penerangan bagi para blogger yang masih newbie, tentang bagaimana cara membuat menu navigasi . dari pada punya ilmu dipendam aja, mending kita bagikan kan?.

                                                  
Penambahan ini tidak melaui Edit HTML melainkan melalui add gadget yaitu agar kita tidak perlu repot" lagi mengedit html disini caranya cukup mudah dan simpel saya pun menggunakan menu ini di blog saya ini , baca juga cara succes membuat recent post atau artikel terbaru menggunakan scroll box di blog dan bagaimana cara sucess membuat efek shadow pada tepi/outer atau garis batas di blog

ini tutorial nya kawan coba praktekan dengan benar dan teliti agar hasilnya sucess ok ..
Pertama , Masuk ke blogger anda.
Kedua , pilih Tata letak -add gadget pilih HTML/script
Masukan kode dibawah ini..

<style type='text/css'>

#top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgMymxRgFU42FrTPngfxXolZWa3m1ulyUZVZ4H5BYg0IRqaubG58noeBHybeZJjbmk7k5_oC6ixsA_r98jjFAT-zNK0jmOiXGfl5KyLlwXs_wxVtcXA7pwHEn4B8FMtR8wXse39mETHLww/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 40px 7px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaKx0Dfpy2RM5ahY9V-Tkf-cYx-RiRINRSmHYdQvF-1EQ6zPEK0tuLwQw1yORdlFzxlhc_rbev7kZ24JeleyTDLLPXrnAgMyAyKIYhWo6HdcWMK1j6IT8v_esN9824RQ9JUpHOjGV6wY8/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 30px 7px 20px}
#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;}

</style>


    <div id='fixed'>
    <div id='fixedinner'>
    <div id='top-wrapper'>
    <div id='topbar'>
    <ul id='top'>
    <li><a href='/'><span>Welcome</span>Homepage</a></li>
    <li><a href='http://nanangnutriyas.blogspot.com/2013/04/membuat-menu-drop-down-melayang-diatas.html'><span>This is</span>pasang widget</a></li>

    <li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </ul>
    </li>

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


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

catatan :
*ganti tanda # dengan link anda.
*ganti #f1c822  dengan kode warna yang anda inginkan...'ini warna pada menu saat di sentuh pointer'
*ganti #f1c822 Dengan kode warna yang anda inginkan ..'ini warna garis di atas menu ini '

Oke itulah Sekilas tentang  CARA MEMBUAT MENU HORIZONTAL DROPDOWN SUPER KEREN MELAYANG , semoga artikel ini bermanfaat buat semuanya, jika ada kekurangan mohon dimaafkan karena saya disini masih sama-sama belajar dan atas perhatiannya saya ucapkan terima kasih

Waalaikumsalam wr wb