"Attention! before you edit your HTML code, please download your template previously"
Copy and paste the following code :
<form action='#/search' id='searchform' method='get'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value=''/>
</form>
Explanation : # = Replace with your Website
Css Style : Copy and paste the following code after <head>
#searchform {
position:absolute;
right:0;
top:80px;
}
#searchform input {
border:1px solid #626262;
background:#000;
padding:5px 4px 6px;
color:#999;
width:215px;
float:left;
}
#searchform input#searchsubmit {
width:65px;
height:30px;
border:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivTT_jgMb5xGi-y_j8qUh6H0CPwaMGkT7uB2Ul0jUwgJdk-a5hykwdOsqK6SuXuEctDQDtnIw7c3Dc_a-i130vUrgZLvG1dtO26S7F7QSwtZlQn4qadAb3AY2-njUH1xgABtvW07avoqk/s1600/bk_search_but.jpg) 0 0 no-repeat;
cursor:pointer;
}
Explanation : Red Text = Replace with your own search Background
Google Seach Box on your Site :
<form method="get" action="http://www.google.com/search">
<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="checkbox" name="sitesearch"
value="http://bbloggertutorials.blogspot.com/" checked />#<br />
</div>
</form>
Explanation : Red Text = Replace with your Website
# = Text of your website
Anda baru saja membaca artikel yang berkategori Blogger Template /
Blogger Tutorials /
CSS /
How to /
Widgets
dengan judul How to Add a Search Box With CSS Style to Your Blogger. Anda bisa bookmark halaman ini dengan URL https://bblogger-tutorials.blogspot.com/2013/04/how-to-add-search-box-with-css-style-to.html. Terima kasih!
Ditulis oleh:
maz - Saturday, April 27, 2013
Belum ada komentar untuk "How to Add a Search Box With CSS Style to Your Blogger"
Post a Comment