Ads Top

Search Box For Blogger Mobile Site

Search Box For Blogger Mobile View

Like other blogging networks blogger also has mobile view for mobile users. It loads very quickly as it is in kilo-bites so mobile users can also read blogs by wifi connections or by mobile data. Blogger provides mobile view and also templates for it, but you have to optimize it in your way to get benefit of it e.g enabling ads, enabling essential gadgets(follow button, search box, related posts etc). It will help you to get more traffic as after optimizing your blog for mobile phones, you will be able to get mobile views too instead of loosing it. The default gadgets aren't optimized for mobile view so you need to use optimized gadgets for mobile view, One of the most essential gadgets(search box) which is powered by blogger doesn't work in all mobiles, it works only in smartphones like Iphone, Android, Htc, Nokia lumia phone etc but the phones which don't have android or ios aren't optimized for the common search box so you have to optimize search box to make it work in all mobile phones whether it is smart or not. Although the default search box works in smartphones but if it is used to search something, it works very slowly and the pages take too much time to load because the page is first searched for desktop fist and then converted to mobile view. So in this post I will share a well optimized search box for blogger mobile view which will work in all mobile phones.

How to add search box in blogger mobile view:

Step 1: Go to blogger dashboard and navigate to layout:


Step 2: Click on Add a gadget > Html/javascript.

Step 3: Copy below code and paste it into Html//javascript window:

Step 4: 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!

Related post: How to show a widget in mobile view only in blogger?

Step 5: Edit the mobile search box gadget which you added now and search for the widget id, see below image for instance.


Step 6: Note the widget ID and go to template > Edit Html:


Step 7: Click on Jump to widget and click on the widget ID of search box gadget which you found in step 5.

Step 8: After finding the widget type mobile='only' beside locked='false'.


Step 9: Click on save 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 to see your search box. This search box will work in all mobile phones and will work fast.

Hope you like this article and it was helpful to you, if you have any question please help me know by leaving a comment below.


  1. thank you for your helpfull information.if you want to know more information about this topics click here android mobile

  2. Since the button uses "go" instead of search, I have made a little change to the code and it looks a lot better. Thanks for the post.

    input name="q" placeholder="Search" type="text" id="search-in" size="19" required

    Now placeholder now shows search. Once again thanks. This post has been helpful. I still have to put the code without the tags since tag is not accepted here.

  3. I have added it and works fine. This article is very helpful.
    If I don't want it, how can I remove it?

    1. Remove mobile='only' and then save template. After this go to layout and remove it. Or you can go to your mobile site and edit it and remove it.

  4. nice Tutorial. It has any procedure to show search box in upper side in mobile. Thanks

    1. Drag the gadget above header in the layout, it will appear in upper side

  5. Fantastic post.

  6. I am really impressed with your writing skills .keep up the nice quality writing, it’s rare to see a great blog like this one nowadays.
    UK Mobile Wholesalers


Powered by Blogger.