How To Make Responsive Search Box For Blogger

How To Make Responsive Search Box For Blogger. Search box is very important widget for a blogger. When one cannot find what they are looking for via navigation menu, they turn to the search box. It is a place for visitor to search about other articles on your website. If you want to make your visitors catch the whole post easily, you have to put this widget in the right place. It can be shown from the Personal Computer, Mobile Phone, Tablet, etc. To make it happen you should add the script below, because i have designed it to be responsive. It will make your blog more attractive than before. The demo can be shown on below image, I put this widget on header and also sidebar. If you are interested with this widget, let's follow the tutorial carefully.

First, Go to Blog Title → Layout → Template → Edit HTML, you must put this script above ]]></b:skin> or </style>.

#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:#3b8686;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:#0b486b;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}#search-button:hover{background:#3b8686} 

I made ​​a simple illustration of this widget displaying, you can see the below image. Before you add the HTML script, I suggest you to make sure where is the best place for this widget. It can be added into your blog's header, footer and sidebar, it depends on your theme design.

Next step, Add Widget → HTML/JavaScript and paste the given code in the box opened. You can also put this script on your template, but you are be able to know about your template's elements.

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search now ...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form></div>

Finally, save your template and look! Your search box is appearing on your lovely blog. I will close this article with one statement "If you attention to a visitor you have to make them convenient for surfing on your website" Thanks for reading article about How To Make Responsive Search Box For Blogger.

Advertisement