Friday, 12 December 2014

Search Box with Css3 Style for Website/Blogger

Add a Search Box with Css3 Style for Website or blogger. Let us follow the below steps.

Step 1: Go to Blogger Click the Dashboard then
Step 2: Now Click on Template->Edit HTML-> Proceed
Step 3: Now Find this code ]]></b:skin> by pressing Ctrl + F
Step 4: Copy the code from below and Paste it  Before/above ]]></b:skin> 
/* reset search input browser style */
input {
 outline: none;
}
input[type=search] {
 -webkit-appearance: textfield;
 -webkit-box-sizing: content-box;
 font-family: inherit;
 font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
 display: none; /* remove the search and cancel icon */
}

/* search input field */
input[type=search] {
 background: #ededed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW88Uk3ilBsyfu4bIM7GCBtmxoROWQEyqho0VX6r8bO4t62CurfA0sM_Ug9_xtndhr3D-C6AIQAQtIzaxIFaXZuKVQmLcXISlPs98iuySCB72Ypixbvhld5xEaFhnT5yxakDMTyovKsIE/s320/search-icon.png) no-repeat 9px center;
 border: solid 1px #ccc;
 padding: 9px 10px 9px 32px;
 width: 55px;

 -webkit-border-radius: 10em;
 -moz-border-radius: 10em;
 border-radius: 10em;

 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 transition: all .5s;
}
input[type=search]:focus {
 width: 130px;
 background-color: #fff;
 border-color: #6dcff6;

 -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
 -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
 box-shadow: 0 0 5px rgba(109,207,246,.5);
}

/* placeholder */
input:-moz-placeholder {
 color: #999;
}
input::-webkit-input-placeholder {
 color: #999;
}

/* Dемо 2 */
#demo-b input[type=search] {
 width: 18px;
 padding-left: 10px;
 color: transparent;
 cursor: pointer;
}
#demo-b input[type=search]:hover {
 background-color: #fff;
}
#demo-b input[type=search]:focus {
 width: 130px;
 padding-left: 32px;
 color: #000;
 background-color: #fff;
 cursor: auto;
}
#demo-b input:-moz-placeholder {
 color: transparent;
}
#demo-b input::-webkit-input-placeholder {
 color: transparent;
}

Step 5: Click the Layout and Add a Gadget then
Step 6:
Click the HTML/JavaScript then
Step 7: Copy the Below code And Paste on it.
<div class="content">
/*<h3>Dемо 1</h3>*/
<form>
 <input placeholder="search" type="search" />
</form>
/*<h3>Dемо 2</h3>*/
<form id="demo-b">
 <input placeholder="search" type="search" />
</form>
</div>
Step 8: Save Gadget and It will works.
         
Search Box Css3 Style
168 KB
Search Box Css3 Style
View a Sample

  • Blogger Comments
  • Facebook Comments

0 comments:

Post a Comment

Item Reviewed: Search Box with Css3 Style for Website/Blogger Description: Rating: 5 Reviewed By: Unknown