17 Juni, 2015

Cara membuat menu Drop Down di blog tanpa edit html





Untuk Membuat menu Drop Down silahkan anda Copy Kode di bawah ini, kode ini juga saya gunakan di blog saya:


<style>#sbfixed {position:top;center:0;left:0;width:100%;height:10px;z-index:9999;}#sbfixedinner{text-align:top;background:transparent;height:70px;position:relative;z-index:9099;}* html, * html body{overflow-y:hidden;height:10%;}* html #sbfixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }* html #sbfixedinner{margin-right:0px;}* html #sbfixed {position:absolute;}#sbtop-wrapper{background:#F8F8FF;width:100%;float:left;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 rgb(72, 161, 250);}#sbtopbar{width:980px;height:45px;margin:0 auto}#sbtop{width:90%}#sbtop,#sbtop ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}#sbtop a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#FFFAFA;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}#sbtop a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbDQSFdzezNKf6aKEg2FBQVLF5LUUasnNfCAJQ3U-9ZrMZIROn5Qh7PEOi5TGmfiqU3QxSL3nM4Rjr0DQy067x3tvY7sh8czgkDchBi70j81ExIljHijRSgbVdoAJz4MCkv5ykOLt3Kw/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:center center;padding:7px 24px 7px 10px}#sbtop li{float:left;position:static;width:auto}#sbtop li ul,#sbtop ul li{width:170px}#sbtop 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}#sbtop 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)}#sbtop li:hover a,#sbtop a:active,#sbtop a:focus,#sbtop li.hvr a{background-color:#222;color:#fff}#sbtop li:hover ul,#sbtop li.hvr ul{display:block}#sbtop li:hover ul a,#sbtop li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}#sbtop 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}#sbtop ul a:hover{background-color:rgb(72, 161, 250)!important;color:#fff!important;text-decoration:none}#sbtop a span,#sbtop a.arrow span{font:bold 12px Arial;color:#000000;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}#sbtop li:hover a span,#sbtop li:hover a.arrow span{color:#f1c822}</style><div id="sbfixed"><div id="sbfixedinner"><div id="sbtop-wrapper"><div id="sbtopbar"><ul id="sbtop">
<li><a href="/"><span><div align="center"><img src="http://icons.iconarchive.com/icons/iconshock/super-vista-general/32/home-icon.png" width="18" height="18" /></div></span>Home</a></li>
<li><a href="http://udilamriu.blogspot.com/p/blog-page_94.html"><span><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0-Rz5RS3qzw282KGUfM3xjdgfURCck9RTx1RFZkB0bNabwL1B0DqtZfI5Gnmspqu8_ZDO_wORM8HcjE6Pgz1TNrfylrPGVBMnJ-r52nxTha4i871eqXYQ-KVFDH_ZVgI2TVVPKJHfS-TN/s400/Kumpulan+Icon-icon+keren.jpg"width="18" height="18" /></div></span>Foto</a><ul><li></li>
</ul></li>
<li><a href="#"><span><div align="center"><img src="http://icons.iconarchive.com/icons/iconshock/real-vista-web-design/32/Banner-design-icon.png" width="18" height="18" /></div></span>Video</a><ul>
<li><a href="#">Red</a></li><li></li>
<li><a href="#">White</a></li><li></li>
<li><a href="#">Blue</a></li><li></li>
<li><a href="#">Green</a></li><li></li>
<li><a href="#">Yellow</a></li></ul></li>

<li><a href="http://udilamriu.blogspot.com/p/blog-page.html"><span><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK16K8qdMdGZ6Gmnwy025Ck5zsptGFIuF9sxp-NdDcv5QklWvWejAempIdzIomex2hui9PWq0R4OZnZcKVbRS82zH3hmKpxiL2SVa7srI0f2LkrvfJAGJF16f8kQIJ22vxId1IB5jCIjhN/s1600/report_magnify.png" width="18" height="18" /></div></span>Daftar Isi</a><ul><li></li>
</ul></li>

<li><a href="#"><span><div align="center"><img src="http://icons.iconarchive.com/icons/fatcow/farm-fresh/32/book-addresses-icon.png" width="18" height="18" /></div></span>Contact</a><ul>

<li><a href="https://www.facebook.com/udhiel.moohh?fref=ts"><div align="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiplBFP3t6ga0_sDM1wnh0HiGD5uzFauI4pZlrVpo-BsF5KCG3ClR_P1bwbYPhcbXXbYxU-aZyTjEKgDNU-znLj9qsh519CuFo_H1QYVNKvgfRBdi5QhDwzL_MtaY2ovbAU9KcFIRQ7_o7f/" width="18" height="18" />Facebook</div></a></li><li></li>
<li><a href="#"><div align="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsn3d4V84S54p_dIqgGg5rJJoJs0fJRiYGid6Wd-aMOS9Fwg6hHADTPfnRHlUEsfn8RwknM3o5OpdnDc86GRVWEzvnD29_6TGDLm3yOqV_KCw41sNTiH3NzAAFyoSt8HdZj74R8D_akjmb/" width="18" height="18" />Twitter</div></a></li><li></li>

<li><a href="#" rel="nofollow">LinkedIn</a></li></ul></li></ul></div></div></div></div>



Setelah di Copy silahkan sobat masuk ke dasbor blog lalu pilih => Tata Letak dan Pilih Gadget HTML.lalu Paste Kode diatas.Lalu letakkan gadget HTML di tata letak header. Kemudian simpan.
Untuk mengubah warna dan menu silahkan sobat berkreasi sendiri, jangan sama dengan menu dropdown saya ya ,hehehe.

keterangan

-warna hijau silahkan ganti dengan blog sobat 
-warna ungu silahkan ganti dengan url icon/gambarnya
-warna biru silahkan ganti dengan nama menu yang sobat inginkan
-warna merah adalah lebar dan tinggi menu silahkan disesuaikan
Sekian Tutorial Cara menu membuat menu dropdown tanpa mengubah kode HTML dari saya, semoga bermanfaat

Tidak ada komentar:

Posting Komentar