Home

Create,add wrapping search box for blogger,website,blog spot for free

Unknown 7:36 AM No comments


Step 1:-

 Goto Blogger dashboard > Template > Edit HTML

 then add this code before ]]></b:skin>

 .srch-cnt
{text-align:right;}

.searchinputarea
{
    width:400px;
    border:1px solid lightgrey;
    height:26px;
    padding-left:6px;
    padding-top:2px;
    background-image:-webkit-linear-gradient(top,#F8F8F8,rgba(228, 228, 228, 0.93)) !important;
    font-weight:normal;
    font-size:14px;
    font-family:'calibri';
    box-shadow:inset 0px 0px 0px gainsboro;
    color:#505050;
    background-color:gainsboro;
    font-style:italic;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
     
}
.searchinputarea:hover
{box-shadow:inset 0px 0px 7px lightgrey;}
.searchinputarea:focus
{
    box-shadow:inset 0px 0px 8px gainsboro;
    background:white !important;
    font-style:normal;
    color:black;
    outline:1px solid lightgrey;
    border:1px solid transparent;
    width:650px; /* Width it should be when in focus */   
}
.boxsearch123
{
    text-indent:-9999px;
    vertical-align:top;
    height:31px;
    width:40px;
    border:1px solid grey;
    background-image:url("http://usgraduatesblog.com/wp-content/uploads/2013/05/search.png");
    background-size: 33px 30px;
    background-position: 6px -0px !important;
    background-color:#EBEBEB;
    cursor:pointer;
    box-shadow:inset 0px 0px 0px #D8D8D8;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
}
.boxsearch123:hover
{box-shadow:inset 0px 0px 10px #D8D8D8;}
.boxsearch123:active
{box-shadow:inset 0px 0px 10px #B4B4B4;}
.srch-cnt .attrbl
{
    color:#61F8F3 !important;
    border-bottom:1px dotted black;
    font-size:10px;
    visibility:visible !important;
    display:inline-block !important;
}
.srch-cnt .attrbl:hover
{
    text-decoration:none;
    color:grey !important;
    border-bottom:1px dotted black;

}


 Step 2:-

 650px; this shows your search box width when clicked
400px; this shows your search box default width to shown
Step 3:-

 Add this code to layout > Add new widget  >  Add HTML/JAVA Code

 Add this code and save

 Change http://helpingstranger.blogspot.com/search to your address with /search on it :)

 <!--This wrapping search box brought to you  by www.helpingstrnger.blogspot.com-->
<div class='srch-cnt'>
<form action='http://helpingstranger.blogspot.com/search' class='formupsearch' method='get'>
<input class='searchinputarea' maxlength='700' name='q' placeholder='Search for..' size='65' type='text' value='' x-webkit-speech='true'/>
<input class='boxsearch123' type='submit' value='search'/>
<input class='checkbutton23' name='sitesearch' type='radio' value=''/>
<input checked='checked' class='checkbutton23' name='sitesearch' type='radio' value='helpingstranger.blogspot.com/'/>
</form>    
</div>
Good luck...
Please visit our webpage if you like

DMCA.com Protection Status

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )