Posted by Syed Muhammad Ali
Today we are sharing another great blogger widget with you which will not only help your Visitor to Search your Blog but also will allow them to Like your Blog. This Widget will be Automatically Place at your Blog Top Right.
You can easy add this widget by adding some codes in Your Blogger Template. Search Box has a great importance in a Blog. As visitor want a specific type of post, Search Box helps him to find Specific Post On your Blog.
This search box is easy to use and Share able, But all rights are Reserved Strictly By ITB.
Follow the Below Instructions to Add This Search Bar Into Your Blog
(1) – Go to Blogger
(2) – Log-In to your Dashboard
(3) – Go to Template Section
(4) – Click Edit Html
(5) – Find ]]> By Pressing Ctrl+F Key.
(6) – Paste the Below Code Just Above ]]>
/* Search Box By InfoTechBlogging Starts */
#search input[type=”text”]:hover {
background: #fff url(“http://1.bp.blogspot.com/-WsvyIFhf92g/UYxts6tPL4I/AAAAAAAAJRE/jP8bNeUjFLg/s000/search_32x32-32.png”)no-repeat center left;
width: 150px;}
#search input[type=”text”] {
background: #fff url(“http://1.bp.blogspot.com/-WsvyIFhf92g/UYxts6tPL4I/AAAAAAAAJRE/jP8bNeUjFLg/s000/search_32x32-32.png”)no-repeat center center;
right: 45px;
}
.twitterjo{
background: #fff url(“http://1.bp.blogspot.com/-xyeOtoNgPoE/UYxtuVn4k2I/AAAAAAAAJRM/t1VqDJ_6P-s/s000/twitter_bird.png”)no-repeat center center;
right: 145px;
}
.facebookjo {
background: #fff url(“http://2.bp.blogspot.com/-DGAsYU4zLTc/UYxtwmuGooI/AAAAAAAAJRU/IP26z8wURDI/s000/facebook.png”)no-repeat center center;
right: 95px;
}
.rssjo{
background: #fff url(“http://3.bp.blogspot.com/-I2_n8V1vWRs/UYxtyd3EOnI/AAAAAAAAJRc/3d34HwCDyPg/s000/rss.png”)no-repeat center center;
right: 195px;
}
.rssjo, .facebookjo, .twitterjo, #search input[type=”text”]{
font-size: 13px;
color: #222;
width: 0px;
top:60px;
padding: 8px 7px 7px 35px;
z-index: 9;
border: 1px solid #C2D4F1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
margin-bottom: -1px;
position: absolute;
border-radius: 5px;
height: 26px;}
#main3, #main4, #main5 ,#main6 {
width: 295px;
list-style-type: none;
float: left;
margin: 11px;}
/* Search Box By InfoTechBlogging Ends */
(7) – Now Search For tag
(8) – Paste the Below Code Just Below tag.
Congrats! You are Done.
Now you Can see this widget on at your Blog Header At Top Right
- Change infotechblogging with your Feed Burner Address
- Change Infotechblogging with your Facebook Page Address
- Change Itechblogging with your Twitter Address
Follow Us! 
About This Blog:
InfoTechBlogging is owned by Syed Muhammad.Ali who loves to help other bloggers in starting their Blogging career. He also share Blogger Widgets and Templates.
Follow Him at : Google |Facebook| Twitter
Labels: blogger widgets