Add a Search Box with Css3 Style for Website or blogger. Let us follow the below steps.
Step 5: Click the Layout and Add a Gadget then
Step 6: Click the HTML/JavaScript then
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>
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.
0 comments:
Post a Comment