Bagi sobat sobat yang sedang mencari artikel cara Membuat Menu Drop Down
yang keren atau mencari cara membuat Menu Horizontal yang keren sobat
tidak salah tempat karena sekarang saya akan share sedikit ilmu kepada
sobat blogger, menu ini memang bukan buatan saya, tapi sudah saya
modifikasi sedikit semoga sobat sobat senang dengan menu ini, sebelum ke
cara pembuatan nya ada baik nya kalau sobat-sobat melihat tampilan
hasil nya lihat gambar di bawah ini sebagai tampilan hasil nya
setelah melihat gambar ternyata tidak tertarik, ya maaf deh, agan boleh
cari Artikel yang lain nya DISINI, jika tertarik ayo kita mulai cara
pembuatan nya langkah nya sbb :
- Pertama tama sopasti kita harus login ke blog
- setelah login masuk ke menu Template setelah itu Centang Expand Template Widget dan cari Code
- setelah dapat copy code di bawah ini tepat di atas code yang tadi kita cari ]]></b:skin>
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
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-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #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:#fff; text-decoration:line-through;
}
*html #menu li a:hover /* IE6 */
{
color:#fff; text-decoration:line-through;
}
#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: 5px;
}
#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 */
#search{ width:220px; float:right; margin:0px 5px 0px 5px; align:center;
}
#search input[type="text"] {height:24px; line-height:29px; background:
url(http://3.bp.blogspot.com/-qcqxuwepuw8/T7Ts0Iso9VI/AAAAAAAAAkg/oGskZqNwrZY/s1600/search_icon.gif)
no-repeat 8px 1px #fff; border: 0 none; font: bold 12px; color: #333;
width: 172px; padding: 0 15px 0 32px; -webkit-border-radius: 12px;
-moz-border-radius: 12px; border-radius: 12px; border:1px solid #eee;
-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3) , inset 0px 1px
3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 1px 0px rgba(255, 255,
255, 0.3) , inset 0px 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px
0px rgba(255, 255, 255, 0.3) , inset 0px 1px 3px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.7s ease 0 s; -moz-transition: all 0.7s ease
0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus { width: 172px;
}
/* tutup Menu Horizontal Dropdown
----------------------------------------------- */
- setelah itu save template dan pergi ke menu Tata Letak atau Layout dan Add Gedget Javascript lalu copy code di bawah ini
<ul id='menu'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://yudhacomunity.blogspot.com/2012/02/link-blog-sahabat.html'>link exchange</a></li>
<li><a href='#'>IT Knowledge</a>
<ul>
<li><a href='http://yudhacomunity.blogspot.com/search/label/hacking'>Hacking</a></li>
<li><a href='http://yudhacomunity.blogspot.com/search/label/programing'>Programing</a></li>
<li><a href='http://yudhacomunity.blogspot.com/search/label/jaringan'>Networking</a></li>
</ul>
</li>
<li><a href='http://yudhacomunity.blogspot.com/2011/08/cara-update-status-via-terserah-kita.html'>Update Status Via</a> </li>
<li><a href='#'>Blogger Tips</a>
<ul>
<li><a href='http://yudhacomunity.blogspot.com/search/label/Cara%20membuat%20website'>Making a Website</a></li>
<li><a href='http://yudhacomunity.blogspot.com/search/label/Domain'>Domain</a></li>
<li><a href='http://yudhacomunity.blogspot.com/search/label/kontes%20blog'>Kontes Blog</a></li>
</ul>
</li>
<form action='/search' id='search' method='get'> <input
name='q' placeholder='Search...' size='40' type='text'/>
</form>
</ul>
untuk Code yang warna Merah adalah nama menu nya dan yang Bercetak Tebal
adalah URL dari menu itu... selamat bekerja dan Happy coding.
