Menambahkan Drop Down Menu Di Blog

Sore temen-temen mumpung lagi plong dan banyak yang mau di posting kali ini ane mw kasih tutor cara menambahkan Drop Down Menu Di Blog tanpa Edit HTML alias dengan cara yang mudah hanya dengan script cantik di bawah ini dan langsung aja ya ikutin langkah langkahnya sebagai berikut

1. Login ke akun Blogger temen-temen
2. Masuk Dasboard
3. Pilih Tata Letak dan Add Gadget HTML di bagian header
4. Masukkan Script di bawah ini

<style> #menu { width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #000000; background: -moz-linear-gradient(#444, #000000); background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 50px; border-radius: 50px; -moz-box-shadow: 0 2px 0px #9c9c9c; -webkit-box-shadow: 0 2px 0px #9c9c9c; box-shadow: 0 2px 0px #9c9c9c; } #menu li { float: left; padding: 0 0 10px 0; position: relative; line-height: 0; } #menu a { float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } *html #menu li a:hover /* IE6 */ { color: #fafafa; } #menu li:hover > ul { display: block; } /* Sub-menu */ #menu ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 0 2px rgba(255,255,255,.5); -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); box-shadow: 0 0 2px rgba(255,255,255,.5); -moz-border-radius: 5px; border-radius: 2px; } #menu ul ul { top: 0; left: 150px; } #menu ul li { float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; } #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a { padding: 10px; height: 10px; width: 130px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } *html #menu ul a /* IE6 */ { height: 10px; } *:first-child+html #menu ul a /* IE7 */ { height: 10px; } #menu ul a:hover { background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child > a { -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #menu ul ul li:first-child a:after { left: -8px; top: 12px; width: 0; height: 0; border-left: 0; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-right: 8px solid #444; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #04acec; border-bottom-color: transparent; } #menu ul li:last-child > a { -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #menu:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html #menu { zoom: 1; } /* IE6 */ *:first-child+html #menu { zoom: 1; } /* IE7 */ </style> <ul id="menu"> <li><a href='/'>Home</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='nofollow' target='_blank'>Drop menu</a> <ul> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li> </ul> </li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 2</a> <ul> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a> <ul> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.1</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.2</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.3</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.4</a></li> </ul> </li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li> </ul> </li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 3</a> <ul> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li> <li><a href='http://hasbiwijaya.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li> </ul> </li> </ul>

5. Simpan dan Lihat Perubahannya

Mudah bukan ?tunggu apalagi biar tmapilan blog temen-temen bisa tambah cantik,silahkan mencoba dan semoga bermanfaat ya temen-temen,untuk contohnya bisa dilihat pada blog ini dan klo ada yang bingung bisa koment disini ya

NB : Silahkan ganti link http://hasbiwijaya.blogspot.com/ dengan link lain dan klo berkenan sisakan satu link http://hasbiwijaya.blogspot.com/  buat dijadiin partner ya...

Posted by Bee Studio on Saturday, 21 December 2013 - Rating: 4.5

Title : Menambahkan Drop Down Menu Di Blog
Description : Sore temen-temen mumpung lagi plong dan banyak yang mau di posting kali ini ane mw kasih tutor cara menambahkan Drop Down Menu Di Blo...

Share to

Facebook Google+ Twitter