How to create a responsive search box on the blog
 |
| How to create a responsive search box on the blog |
How to Create a Responsive Search Box on a Blog – Creating a search box is very important for a blogger or blog owner. Because for a website or blog, we need a search field, as it can make it easier for visitors to find the articles they are looking for.
How to create a search box on the blog – In fact, the blogger site already offers a standard search widget system (search box), but the search widget is unresponsive or appears to be not mobile friendly. Well here I am giving you a responsive and mobile friendly search box.
You can also place this search field anywhere you like, e.g. B. in the sidebar, in the footer or in the header. Let’s get straight to the point and follow the tutorial How to create a responsive search box on a blog.
How to create a responsive search box on the blog
1. Go to your Blogger Dashboard.
2. Click a layout.
3. Add a widget, then copy and paste the script code below.
4. Insert HTML / Java script to add widgets.
Seek…“type =” text “/>
5. Change color Red with the words you want. Then click Save, save the template and see the results.
How to create a responsive search box by editing HTML.
1. Go to Dashboard.
2. Then click on Templates.
3. Edit the HTML.
4. Then look for the code ]]> (Use CTRL + F for an easier search).
# search-box {position: relative; margin: 0 auto; border: 1px solid #ccc; padding: 5px; border-radius: 4px} # search-form {height: 40px; background-color: #fff; overflow: hidden } # search-text {font-size: 14px; color: #ddd; border-width: 0; background: transparent; line-height: 15px} # search-box input[type=”text”]{width: 90%; padding: 10px 0 5px 1em; color: # 333; outline: none} # search-button {position: absolute; top: 5px; right: 5px; height: 40px; width: 80px; color: # fff; text-align: center; border-width: 0; background-color: # ff5848; cursor: pointer; text-transform: uppercase; border-radius: 3px; outline: 0} # search-button: hover {background: # 333}
6. Then click Save Template and view the results.
How to create a standard Blogger search box.
1. Go to the dashboard.
2. Click Layout, Add Widget.
3. Search then search.
4. Then the settings according to your requirements.
5. Save, save template. Done and see the result.
How to create a cool search box on the blog
1. Go to the dashboard.
2. Click Layout, Add Widget.
3. Copy and paste the script code below.
.cf: before, .cf: after {
Contents:””;
Display: table;
}
.cf: after {
Delete both;
}
.cf {
Zoom: 1;
}
/ * Form wrapper styling * /
.search-wrapper {
Width: 220px;
Margins: 45px automatic 50px automatic;
Box shadow: 0 1px 1px rgba (0, 0, 0, .4) inset, 0 1px 0 rgba (255, 255, 255, .2);
}
/ * Form text input * /
.Search wrapper input {
Width: 138px;
Height: 20px;
Padding: 10px 5px;
Float: left;
Font: bold 15px ‘lucida sans’, ‘trebuchet MS’, ‘Tahoma’;
Limits: 0;
Background: #EEE;
Edge radius: 3px 0 0 3px;
}
.search-wrapper input: focus {
Outlines: 0;
Background: #fff;
Box shadow: 0 0 2px rgba (0,0,0, .8) inset;
}
.search-wrapper input :: – webkit-input-placeholder {
Colors: # 999;
Font weight: normal;
Font style: italic;
}
.search-wrapper input: -moz-placeholder {
Colors: # 999;
Font weight: normal;
Font style: italic;
}
.search-wrapper input: -ms-input-placeholder {
Colors: # 999;
Font weight: normal;
Font style: italic;
}
/ * Button to submit the form * /
.Search wrapper button {
Overflow: visible;
Position: relative;
float right;
Limits: 0;
Padding: 0;
Cursor: pointer;
Height: 40px;
Width: 72px;
Fonts: bold 15px / 40px ‘lucida sans’, ‘trebuchet MS’, ‘Tahoma’;
Color white;
Text transformation: capital letters;
Background: # D83C3C;
Edge radius: 0 3px 3px 0;
Text shadow: 0 -1px 0 rgba (0, 0, 0, .3);
}
.Search wrapper button: hover {
Backgrounds: # e54040;
}
Search wrapper button: active,
.Search Wrapper Button: Focus {
Background: # c42f2f;
Outlines: 0;
}
.Search wrapper button: before {/ * left arrow * /
Contents: ”;
Position: absolute;
Frame width: 8px 8px 8px 0;
Frame style: massive solid solid none;
Frame color: transparent # d83c3c transparent;
top: 12px;
left: -6px;
}
.Search wrapper button: hover: before {
Frame-Right-Color: # e54040;
}
Search Wrapper Button: Focus: Before,
.Search wrapper button: active: in front of {
Frame Right Color: # c42f2f;
}
.search-wrapper button :: – moz-focus-inner {/ * Remove extra key spacing for Mozilla Firefox * /
Limits: 0;
Padding: 0;
}
Search here …“required =” “/>
4. Click Save, Save Template.
5. Change the red color to your liking and see the results.
Also read:
