cara membuat menu horizontal dropdown dan search engine keren untuk blog anda

hallo teman-teman sekarang saya posting kan bagaimana cara menambahkan menu horizontal dropdown dan seach engine keren untuk blog anda,,
saya bertujuan untuk membantu anda sekalian yang sedang belajar membuat blog yang keren dan simpel.

1. Login ke akun Blogger anda,
2. Setelah itu masuk ke menu Template dan klik Edit HTML
3. Kemudian copy kode dibawah ini tepat diatas kode ]]></b:skin>
4. untuk mencari kode  ]]></b:skin> dengan mudah tekan tombol Ctrl+F
 /* Menu Horizontal Dropdown ----------------------------------------------- */ #menu { width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #000; background: -moz-linear-gradient(#000000); 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: 5px; border-radius: 5px; -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:none;  display: block;} *html
#menu li a:hover /* IE6 */ { background:#4169E1; 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: 3px; border-radius:3px; 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


5. Setelah itu cari kode </head> dan letakkan kode dibawah ini tepat dibawah kode </head>

<ul id='menu'>


<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Link Exchange</a></li>
<li><a href='#'>Bisnis Online</a></li>
<li><a href='#'>Download</a>
<ul>
<li><a href='#'>Template Blog</a></li>

</ul>
</li>
 <li><a href='http://xbalzt.blogspot.com/p/blog-page.html'>TV Online</a> </li>
<li><a href='#'>Download Anime</a>
<ul>
<li><a href='#'>Complete</a></li>
<li><a href='#'>Ongoing</a></li>
<li><a href='#'>The Movies</a></li>
</ul>
</li>
<form action='/search' id='search' method='get'> <input name='q' placeholder='Search...' size='40' type='text'/> </form>
</ul>

Keterangan: Ganti kode yang berwarna Merah dengan nama menu yang anda inginkan dan ganti kode yang berwarna Biru dengan URL menu anda

    5. Dan yang terakhir Simpan Template anda!