If you have a thing for classic user interface designs then you might like this one. It’s a tutorial on making your Blogger site’s search bar look like the one that Google used to have for their search page. It’s the one with the minimalist look where the box has got rounded corners and the search button is that of a magnifying glass icon with a nice hover effect.
This tutorial comes courtesy of Queness via pro blogger Ishtiaq Ahmad and all it takes to capture the classic appearance is a little bit of CSS and JavaScript.
Follow the instructions below to try it out on your site:
- Starting from your Blogger dashboard, go to the Design section.
- Under Template, click on Edit HTML.
- In your template’s code, search for ]]></b:skin> by pressing Ctrl+F.
- Copy/paste the following code below just right above it.
/*Start Css For Google Style Search Box*/
/* div container containing the form */
#searchContainer {
margin:0px;
}
/* Style the search input field. */
#field {
float:left;
width:180px;
height:27px;
line-height:27px;
text-indent:10px;
font-family: Source Sans Pro, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}
/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Style the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:60px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSCpCkoGPNgw3D75Z-oJ9drbZJs2gMe8QXuw-yU0_q8OFvSJDGoHJaeTNAuAQIambrgDaeVljajqpSuKZJxojDB_mAhXzdQ98vWWPPibtFgL6A6YehMYEqSJDEn9gaeCsN-1La5jsreHp4/s1600/iconsearch.png) no-repeat #088a4b center;
border: 1px solid green;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSCpCkoGPNgw3D75Z-oJ9drbZJs2gMe8QXuw-yU0_q8OFvSJDGoHJaeTNAuAQIambrgDaeVljajqpSuKZJxojDB_mAhXzdQ98vWWPPibtFgL6A6YehMYEqSJDEn9gaeCsN-1La5jsreHp4/s1600/iconsearch.png) no-repeat center #088a4b;
border: 1px solid green;
}
/* Clear floats */
.fclear {clear:both}
TIP: You can change the appearance of your search bar, such as color, width, border style etc. to better match the color or theme of your Blogger blog. Just edit the values of the highlighted attributes or portions of the code.
- Now find the </head> tag in your template’s code and copy/paste the following code right above it.
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the "X" button
$("#field").keyup(function() {
$("#x").fadeIn();
if ($.trim($("#field").val()) == "") {
$("#x").fadeOut();
}
});
// on click of "X", delete input field value and hide "X"
$("#x").click(function() {
$("#field").val("");
$(this).hide();
});
});
</script>
- Click on Preview to check if everything looks OK so far on your blog. If it does, all that’s left for you to do is add the gadget on your sidebar.
- Under the Design section of your dashboard, go to Layout and click on Add a Gadget.
- Scroll down the list of gadgets and choose HTML/JavaScript.
- Copy/paste this code into it.
<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" name="q">
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search">
</form>
</div>
- Click ‘Save’ and that’s it, you’re done!
0 comments:
Post a Comment