Cara Membuat Menu Horizontal Dengan Search Box

Tutorial Blog sekedar share membuat menu horizontal dengan search box  dan pemasangannya tanpa ribet cukup di pastekan pada gadget sobat tanpa mengedit template

Bagaimana apa sobat tertarik dengan menu ini?

Mari kita lanjutkan saja tutorial ini selengkapnya :

1.    Login  ke blogger

2.    Pilih tab >Design

3.    Add Gadget pada bagian bawah header template sobat

4.    Pilih HTML/JavaScript lalu pastekan kode di bawah ini

view plainprint?

1. <style type="text/css">  
2. .black_horizontal{  
3. float:left; margin-bottom:10px;  
4. padding:0px; width: 100%;  
5. overflow: hidden; background: #499bea;  
6. background: -moz-linear-gradient(top, #999 0%, #000 100%);  
7. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000));  
8. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );  
9. -moz-box-shadow: 1px 1px 10px #888;  
10. -webkit-box-shadow:1px 1px 10px #888;  
11. -webkit-border-radius: 6px;  
12. -moz-border-radius: 6px;  
13. border-radius: 6px;}  
14. .black_horizontal ul{  
15. margin: 0; padding: 0; padding-left: 10px;  
16. font: bold 14px Verdana;  
17. list-style-type: none; }  
18. .black_horizontal li{  
19. display: inline; margin: 0;}  
20. .black_horizontal li a{  
21. float: left; text-decoration: none;  
22. margin: 0; padding:12px; color: white;}  
23. .black_horizontal li a:visited{color: white; }  
24. .black_horizontal li a:hover, .black_horizontal li.selected a{background:#000000;  
25. text-decoration:underline;  
26. }  
27. #cari_apa{  
28. width:250px; float:right; padding: 4px; margin:0px; }  
29. #cari_apa form input.searchinput{  
30. background: #fff; padding:6px; margin:0px; width: 160px;  
31. border: solid 1px #999; outline: none;  
32. -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;  
33. -moz-box-shadow: inset 0 1px 3px #666;  
34. -webkit-box-shadow: inset 0 1px 3px #666;  
35. box-shadow: inset 0 1px 3px #aaa; }  
36. #cari_apa form input.submitbutton{  
37. cursor:pointer; width: 60px;  
38. background: #FCFCFC;  
39. background: -moz-linear-gradient(top, #FCFCFC 0%, #E8E8E8 100%);  
40. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#E8E8E8));  
41. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC', endColorstr='#E8E8E8',GradientType=0 );  
42. border:1px solid #d8d8d8;  
43. -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;  
44. color:#000; padding:4px; text-shadow:1px 1px #fff;}  
45. </style>  
46. <div class='black_horizontal'>  
47. <ul><li><a href="#">Home</a></li>  
48. <li><a href="#">Tutorial</a></li>  
49. <li><a href="#">Contact</a></li>  
50. <li><a href="#">About</a></li>  
51. </ul>  
52. <div id="cari_apa"><form action="/search" id="searchform" method="get" style="display: inline;"><input id="s" maxlength="255" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari apa bro..&quot;;}" onfocus="if (this.value == &quot;Cari apa bro..&quot;) {this.value = &quot;&quot;}" type="text" value="Cari apa bro.." /> <input class="button" id="searchsubmit" name="Click" type="submit" value="Click" /></form></div></div>  

5.    Simpan gadget sobat dan lihat hasilnya

Sumber

Selamat mencoba, semoga berhasil dan bermanfaat