I've been using a custom search bar in some of the free templates I have on here and I realized I haven't included instructions on how to adjust the width.
If you're using any of this blog's free templates with the custom search bar, here's how to adjust the width of the search bar so it won't look annoying when you adjust the sidebar width.
1. Go to Template, then Edit HTML. Make sure you've backed up your template first!
2. Search for this code:
3. You can adjust the width by adjusting the padding, specifically the second number (68 in the example above).
4. Edit the padding and preview your template first to make sure it all lines up before saving all changes to your template!
How to add the custom search bar
I can't remember where I found the tutorial for the custom search bar because it's been so long. I'm so sorry I can't link up to that tutorial! Anyway, here's how to add this type of search bar to a Blogger blog.
1. First, back up your template.
2. Then go to Template, then Edit HTML.
3. Insert this code above ]]></b:skin>
4. Save the changes to your template.
5. Go to Layout and add a new HTML/Javascript gadget.
6. Copy/paste this code:
7. Replace the red text with your blog URL and save!
If you're using any of this blog's free templates with the custom search bar, here's how to adjust the width of the search bar so it won't look annoying when you adjust the sidebar width.
1. Go to Template, then Edit HTML. Make sure you've backed up your template first!
2. Search for this code:
input#searchinput {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpF_uOeuKFpXtU8zH-pWWyCC5JsXM18hCbbYdaEmu9h8OBMxDkz8IWQu-BDXvtmbsRz76HXnF1yp-MLVJ7PUnv4tGCaeBMSvYcLGOSB86i90CMph_fdlX2UbajLyOVAoo-2wdY0URkTY/s1600/spyglass.png) no-repeat 5px 6px;
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
height: 22px;
line-height: 1.2em;
padding: 4px 68px 4px 30px;
}
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpF_uOeuKFpXtU8zH-pWWyCC5JsXM18hCbbYdaEmu9h8OBMxDkz8IWQu-BDXvtmbsRz76HXnF1yp-MLVJ7PUnv4tGCaeBMSvYcLGOSB86i90CMph_fdlX2UbajLyOVAoo-2wdY0URkTY/s1600/spyglass.png) no-repeat 5px 6px;
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
height: 22px;
line-height: 1.2em;
padding: 4px 68px 4px 30px;
}
3. You can adjust the width by adjusting the padding, specifically the second number (68 in the example above).
4. Edit the padding and preview your template first to make sure it all lines up before saving all changes to your template!
How to add the custom search bar
I can't remember where I found the tutorial for the custom search bar because it's been so long. I'm so sorry I can't link up to that tutorial! Anyway, here's how to add this type of search bar to a Blogger blog.
1. First, back up your template.
2. Then go to Template, then Edit HTML.
3. Insert this code above ]]></b:skin>
/* Forms */
input[type=text],
input[type=password],
textarea {
background: #f3f3f3;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
border: 1px solid #ccc;
color: #222;
}
input[type=text]:focus,
textarea:focus {
color: #363636;
}
textarea {
padding-left: 0;
width: 98%;
}
input[type=text] {
padding: 2px;
}
input#searchinput {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpF_uOeuKFpXtU8zH-pWWyCC5JsXM18hCbbYdaEmu9h8OBMxDkz8IWQu-BDXvtmbsRz76HXnF1yp-MLVJ7PUnv4tGCaeBMSvYcLGOSB86i90CMph_fdlX2UbajLyOVAoo-2wdY0URkTY/s1600/spyglass.png) no-repeat 5px 6px;
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
height: 22px;
line-height: 1.2em;
padding: 4px 68px 4px 30px;
}
input#searchsubmit {
display: none;
}
input[type=text],
input[type=password],
textarea {
background: #f3f3f3;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
border: 1px solid #ccc;
color: #222;
}
input[type=text]:focus,
textarea:focus {
color: #363636;
}
textarea {
padding-left: 0;
width: 98%;
}
input[type=text] {
padding: 2px;
}
input#searchinput {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpF_uOeuKFpXtU8zH-pWWyCC5JsXM18hCbbYdaEmu9h8OBMxDkz8IWQu-BDXvtmbsRz76HXnF1yp-MLVJ7PUnv4tGCaeBMSvYcLGOSB86i90CMph_fdlX2UbajLyOVAoo-2wdY0URkTY/s1600/spyglass.png) no-repeat 5px 6px;
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
height: 22px;
line-height: 1.2em;
padding: 4px 68px 4px 30px;
}
input#searchsubmit {
display: none;
}
4. Save the changes to your template.
5. Go to Layout and add a new HTML/Javascript gadget.
6. Copy/paste this code:
<div align="left">
<form action="http://YOUR BLOG URL/search/" id="searchform" method="get">
<input class="field" id="searchinput" name="q" placeholder="Search" type="text" />
<input class="submit" id="searchsubmit" name="submit" type="submit" value="Search" />
</form>
</div>
<form action="http://YOUR BLOG URL/search/" id="searchform" method="get">
<input class="field" id="searchinput" name="q" placeholder="Search" type="text" />
<input class="submit" id="searchsubmit" name="submit" type="submit" value="Search" />
</form>
</div>
7. Replace the red text with your blog URL and save!
Popular
Tags
Videos
0 comments:
Post a Comment