 |
| How to Create a Responsive Search Box on Blog |
How to Create a Responsive Search Box on a Blog – For a blogger or blog owner, creating a search box is very important. Because, for a website or blog, we must have a search box because it can make it easier for visitors to find what articles they are looking for.
How to Create a Search Box on Blog – Actually, the blogger site already provides a default search widget system (Search box), but the search widget is not responsive or arguably not mobile friendly. So here I will give you a responsive and mobile friendly search box.
You can also put this search box wherever you want such as in the sidebar, footer or header. Well, 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 Blog
1. Go to your blogger dashboard.
2. Click a layout.
3. Add a widget, then copy and paste the script code that I gave below.
4. Paste in add widget html/java script.
Search…” 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 through Edit HTML.
1. Go to Dashboard.
2. Then click templates.
3. Edit HTML.
4. Then look for the code ]]> (Use CTRL + F for 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 see the results.
How to Create a Blogger Default Search Box.
1. Go to the dashboard.
2. Click layout, add widget.
3. Then search search.
4. Then the settings according to your wishes.
5. Save, Save the template. Done and see the result.
How to Make a Cool Search Box on a Blog
1. Go to dashboard.
2. Click layout, add widget.
3. Copy and Paste the script code below.
Search here…” required=”” />
4. Click Save, Save Template.
5. Change the red color to your liking and see the results.
Read also:
