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
Langganan:
Posting Komentar (Atom)
Entri Populer
-
Semua pasti tahu, bahwa pada masa nabi, setiap masuk waktu sholat, maka yang mengumandangkan adzan adalah bilal bin Rabah. Bilal ditunjuk ...
-
Menurut sistem ekonomi kapitalis bahwa problem ekonomi adalah kelangkaan. Kelangkaan terjadi disebabkan karena kebutuhan tidak terbatas s...
-
sesungguhnya kepala yang ditusuk besi itu lebih baik dari pada menyentuh lawan jenis yang tidak halal baginya. (HR. At Tabrani dan Baihaqi)
-
Apabila kita melihat dan memperhatikan kitab-kitab atau buku-buku pada umumnya, kita dapat melihat pada bagian-bagian awal yaitu ...
-
Bila ada yang tersindir dengan tema diatas kiranya bisa dimaafkan karena bukan bermaksud menyindir namun bila sudah terlanjur tidak apal...
-
MALAM itu, sungguh tak ada yang spesial. Shakila masih lesu, mendekap bantal lalu pandangan menerawang ke luar jendela. Ada harap yang ta...
-
seorang muslim sejati apabila dikatakan kepadanya bahwa islam adalah agama yang sempurna maka dengan tegas dia akan mengatakan ia, jika d...
-
LATAR BELAKANG Adapun yang melatarbelakangi kelahiran IPERMADI ini semata-mata atas kesadaran penuh dan tanggungjawab akan p...
-
Ketika kita melihat dan menganalisa fakta yang ada, maka kita akan berkesimpulan bahwa umat Muslim telah berjalan di rel yang salah, seh...

Tidak ada komentar:
Posting Komentar