How To Add A Search Box To Mobile View Of Blogger
The search box is the first thing your visitors want to see. So in this post, I will share a well-optimized search box for blogger mobile view which will work on all mobile phones like the one on this blog.
How to add search box in blogger mobile view:
1. Go to blogger dashboard and navigate to layout:
2. Click on Add a gadget > Html/javascript.
3. Copy below code and paste it into Html//javascript window:
<!-- Search box for blogger mobile by uchetechs.com -->
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" id="search-in" size="19" required />
<input name="m" type="hidden" value="1" />
<button type="submit" class="_54k8 _56bs _56b_ _56bw _56bu" id="u_0_1" data-sigil="touchable"><span class="_55sr">Go!</span></button>
</form>
<style>
form#searchbox {
position: relative;
left: -40px;right: 0px;margin-left: 24%;margin-right: 24%;width: 85%;}button#u_0_1 {position: relative;width: 45px;height: 25px;color:white;background:#4491f0;border-color:#4491f0;}input#search-in {height: 20px;}</style><!-- Search box for blogger mobile by uchetechs.com -->
4. Now click on save and you are almost done but it will show up in desktop so you have to hide it from desktop and show it only in mobile view, follow next step to move ahead!
5.Edit the mobile search box gadget which you added now and search for the widget id, see below image for instance.
6.Note the widget ID and go to Template > Edit Html:
7. Click on Jump to the widget and click on the widget ID of search box gadget which you found in step 5
8.After finding the widget type mobile='only' beside locked='false'.
9.Click on save the template and you are done.
If the search box still fails to appear in mobile view of your blog then go to template > Click on Customize mobile template icon > Switch default template to custom and click on save.
Open your blog by using this link https://uchetechs.blogspot.com/?m=1{use your own blog url} to see your search box. This search box will work on all mobile phones and will work fast.
Hope you like this article and it was helpful to you if you have any question you can use the comment box below.
If the search box still fails to appear in mobile view of your blog then go to template > Click on Customize mobile template icon > Switch default template to custom and click on save.
Open your blog by using this link https://uchetechs.blogspot.com/?m=1{use your own blog url} to see your search box. This search box will work on all mobile phones and will work fast.
Hope you like this article and it was helpful to you if you have any question you can use the comment box below.
Comments