Jquery Slide Down Mobile Menu For blogger

A successful blogger is that who knows the importance of a mobile site. As blogger has no gadgets for mobile site therefore you have to add them manually. Basic things which are important for a mobile site are a search box, a related posts widget and a menu. If your mobile site has these gadget then your site is ready for mobiles.

In blogger page list is commonly used as a menu as it becomes a selector in mobile site. But it doesn't look professional and most of the visitors don't like it. So today I have a stylish jquery slide down menu for your blog's mobile site. It works on jquery so it works properly in all mobiles either it is iphone or Microsoft mobile or something else. But if you are using a phone which doesn't support javascript or jquery then this menu won't work on it.

In this post I will share my first mobile menu for blogger and show you how to add it in your blog's mobile site. So follow below mentioned steps to add this menu in your blog you can see a live demo of this menu above.

How To Add Stylish Jquery Menu In Blogger Mobile Site?

Step 1: Go to blogger dashboard > layout and click on "add a gadget" below header.

Step 2: Give a title to your gadget e.g mobile menu. Because it will help you in finding this gadget in your template in coming up steps.

Step 3: Find Html/Javascript and click on it.

Step 4: Copy below code and paste it into Html/Javascript window.

Tip: Click inside the code container and use Ctrl+A to select code and Ctrl+C to copy it!

Step 5: Click on save, go to template and click on Edit Html.

Step 6: Click inside the code and search for the name which you have given to your menu in step 2. I am searching for Mobile Menu as I've given it to my gadget.

You can also use jump this gadget to jump to your widget but its possible only if you have ID of your widget.

You Might Also Like Reading: How To Find ID Of A Gadget In Blogger

Step 7: Type mobile='only' beside locked='false' and click on save template.

Thats it! you are done. Now open your blog in your phone and try your menu.

You Might Also Like:

• Why A Website And Mobile Site Is Important?
• Link/Text Only Related Posts Widget For Blogger Mobile Site.
• How To Earn Money With Chitika In Blogger.
• Tips To Get More Clicks On Ads
• How To Add Scrolling Recent Posts Gadget In Blogger

How To Edit This Menu?

You can't edit this gadget as you do others because after adding mobile='only' you have commanded blogger to show this gadget in your blog's mobile view only so if you check your layout now you will not see any gadget below header as it is shifted to mobile site. So to edit this menu and add your custom tabs in it follow below steps.

Step 1: Login to your blogger account first and then go to your blog's mobile site using below link:

http://yourblog.blogspot.com/?m=1

Step 2: Now find the edit image(wrench and screw driver) below your menu as shown in below image:

Step 3: Click on it and Html/Javascript window will be opened, now you can make changes in your gadget. Click on save after making changes and you are done.

Customization:

You can change its color font, font-size and every thing if you know CSS but I recommend you to use it as it is. Do only slight changes like font color or font family.

The important thing which needs customization is adding new tabs and links or removing existing tabs. So read below to add or remove any tab.

To Add A New Tab:

You can add a new tab using below piece of code:

<li><a href="Your tab's link">Your Tab's Text Or Name</a></li>

Replace Your tab's link with your link and Your Tab's Text Or Name with your tab name. For example:

<li><a href="http://101helper.blogspot.com/">Home</a></li>

To Remove A Tab:

Remove its code from <li> to </li> for example to remove Home button I will remove:

<li><a href="http://101helper.blogspot.com/">Home</a></li>

Important Note: Add or remove a tab between <ul> id="nav" style="display: none;"> and </ul> in the given code.

Menu Not Appearing?

You might face a common problem of gadget not appearing in mobile view so for that you have to use custom mobile template. If you haven't switched to custom mobile template yet then go to blogger dashboard template and below the mobile template click on the edit icon. Now switch to custom template as shown in below image;

I hope you like this post and this menu is working properly in your blog if not please ask me by leaving a comment below. Share this post with others. Follow and subscribe for more blogger gadgets, menus, tutorials etc. Thanks for visiting 101Helper.

Search Tags: Mobile Menu For Blogger,Jquery menu for mobile site,Blogger mobile view gadgets,Blogger slide down menu for mobile site,101helper menus for blogger blogs,iphone mobile menu.

Read More

Link/Text Only Related Posts Widget For Blogger With 6 Different Styles

"Simple Related Posts Widget For Blogger" is the most frequently searched on search engines because it is a very important gadget for blogger. It helps visitors to reach more posts on your blog and hence it helps you to multiply your traffic. Related posts widget plays a role of internal linker as it link one post with other so it has a great impact on your traffic as well as seo. Because internal linking is a part of off-page seo. As this gadget is so important for blogger therefore some websites are also formed which provides related posts plugin for your blog but if a website's plugin is used then it may slow down your blog which is not good.
People wish to add related posts widget to multiply their traffic but without affecting there blog's speed so most of the bloggers use simple/link/text only related post widget because it doesn't slow down blog and boost traffic.

I also recommend to use simple/link only related posts widget because thumbnails loads so slow and visitors hate slow loading. I have shared many types of related posts widgets for blogger and in this post I am back with simple/link only related posts widget with 6 different styles.

I hope you will like this post. I would like to know how was this post so leave a comment below the post. To add this widget in your blog and start multiplying your traffic follow below steps:

Click Here To Add Simple Related Posts Widget In Blogger Mobile Site!

Step 1: Go to blogger dashboard.

Step 2: Navigate to template and click on edit html.

Step 3: Search for </head>.

Step 4: Copy code of desired related posts widget from below and paste it above </head>.

Style 1:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {margin: 10px 5px;}
#related-posts h2 {letter-spacing: 1px;font-size: 18px; color: #222;margin-bottom: 15px;position: relative;left: 5px; top: 10px;}
#related-posts a {font-size: 14px; color: #999;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #555;}
#related-posts ul {list-style-type: none; margin: 0 0 0px 0;padding: 5px;}
#related-posts ul {list-style-type: none;}
#about {position: absolute;right: 1%;font-weight: bold;}
#related-posts li {padding: 12px;border-bottom: 2px solid #fff;border-left: 5px solid #BCC2B9;background-color: #F4F4F4;}
#related-posts li:hover {background: #F4F4F4;font-weight:bold;background-color: #eee;border-left: 5px solid #188DD7;}
</style>
<script type='text/javascript'>
  var relatedpoststitle=&quot;You Might Also Like Reading:&quot;;
</script>
<script src='http://googledrive.com/host/0B-3SIKm-BBF_cWhGT2ptWHZUOE0' type='text/javascript'/>
</b:if>

Style 2:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {margin: 13px 5px;background-color: #20DD71;}
#related-posts h2 {color: #FFFFFF;margin-bottom: 13px;left: 7px;top: 10px;font-family: Trebuchet ms;}
#related-posts a {font-size: 14px;color: #999;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #555;}
#about {position: absolute;right: 1%;font-weight: bold;}
#related-posts ul {list-style-type: none;margin: 0 0 0px 0;padding: 5px;}
#related-posts li {padding: 12px;border-bottom: 3px solid #eaeaea;background-color: #FFFFFF;}
</style>
<script type='text/javascript'>
  var relatedpoststitle=&quot;Related Posts:&quot;;
</script>
<script src='http://googledrive.com/host/0B-3SIKm-BBF_cWhGT2ptWHZUOE0' type='text/javascript'/>

</b:if>

Style 3:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#about {display: none;}
#related-posts {margin: 10px 0px;background-color: #eee;}
#related-posts h2 {letter-spacing: 1px;font-size: 18px;color: #222;margin-bottom: 10px;position: relative;left: 10px;top: 10px;}
#related-posts a {position: relative;bottom: 4px;font-size: 15px;color: #999;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #555;}
#related-posts ul {list-style-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_NQCxQzej2kmPY3nM3EhNE24vFcuGG5JAnavywDgF8epSqDBnlxTHpk-2lZn8Ijp6xtBxOJQdjq6qSpWPw5uMy8iE_xe3kN7wm2otNR6NI-oTHz0wcYebceQt7RwuFWA28ENF6n_ziyY/s1600/rsz_1rsz_icon256.png');margin: 0 0 0px 0;padding: 5px;position: relative;left: 30px;}
#related-posts li {width: 94%;}
#related-posts li:hover {font-weight:bold;}
</style>
<script type='text/javascript'>
  var relatedpoststitle=&quot;You Might Also Like Reading:&quot;;
</script>
<script src='http://googledrive.com/host/0B-3SIKm-BBF_cWhGT2ptWHZUOE0' type='text/javascript'/>
</b:if>

Style 4:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#about {display: none;}
 #related-posts { margin: 10px 0px; background-color: #eee; }
#related-posts h2 { letter-spacing: 1px; font-size: 18px; color: #222; margin-bottom: 10px; position: relative; left: 10px; top: 10px; }
#related-posts a { position: relative; bottom: 5px; font-size: 15px; color: #666; text-transform: uppercase; }
#related-posts a:hover { text-decoration: none; color: #555; }
#related-posts ul { list-style-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsTVlvebv0a2xQg2ltkYJ9QKIcz6G6YWsLUHAbbLLjvjvAv8qsQ_xPmQx6xu8nOiQwLE_JV3IZhyphenhyphenjHk99LkoZQ_VcCmPADspTB3-8D34UuGbF_-hWZnw85zrpddt9fQ9ncFC3rNMUv9EM/s1600/rsz_logo-favicon-large.png&#39;); margin: 0 0 0px 0; padding: 5px; position: relative; left: 30px; }
#related-posts li { padding: 0%; margin-bottom: 7px; width: 94%; border-bottom: 1px dashed #666; }
#related-posts li:hover { font-weight:bold; }
</style>
<script type='text/javascript'>
  var relatedpoststitle=&quot;You Might Also Like Reading:&quot;;
</script>
<script src='http://googledrive.com/host/0B-3SIKm-BBF_cWhGT2ptWHZUOE0' type='text/javascript'/>
</b:if>

Style 5: 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts h2 {letter-spacing: 1px;font-size: 18px; color: #222;margin-bottom: 15px;position: relative;left: 5px; top: 15px;}
#related-posts a {font-size: 14px; color: #fff;text-transform: capitalize;text-decoration:none;}
#related-posts ul {list-style-type: none; margin: 0 0 0px 0;padding: 5px;}
#related-posts ul {list-style-type: none;}
#related-posts li {border-radius: 2px;padding: 10px;margin-top: 3px;background-color: #777777;    border: 1px solid #777777;}
#about {position: absolute;right: 1%;bottom: 50px;font-weight: bold;}
#related-posts li:hover {background: #F4F4F4;border: 1px solid #3079ED;background-color: #4D90F0;}
</style>
<script type='text/javascript'>
  var relatedpoststitle=&quot;You Might Also Like Reading:&quot;;
</script>
<script src='http://googledrive.com/host/0B-3SIKm-BBF_cWhGT2ptWHZUOE0' type='text/javascript'/>

</b:if>

Style 6:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts h2 {letter-spacing: 1px;font-size: 18px; color: #222;margin-bottom: 15px;position: relative;left: 5px; top: 12px;}
#related-posts li {font-size: 15px;}
#about {position: absolute;right: 1%;bottom: 65px;font-weight: bold;}
#related-posts a,a:hover {text-decoration:none;color: #2288bb;}
</style>
<script type='text/javascript'>
  var relatedpoststitle=&quot;You Might Also Like Reading:&quot;;
</script>
<script src='http://googledrive.com/host/0B-3SIKm-BBF_cWhGT2ptWHZUOE0' type='text/javascript'/>
</b:if>

Step 5: Now search for below piece of code:

<div class='post-footer'>

Step 6: Copy below code and paste it just above the above code:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a href="http://101helper.blogspot.com/2015/08/linktext-only-related-posts-widget-for-blogger.html" id="about" rel="nofollow" style="color: #888;">101Helper</a></div></b:if>

You may find <div class='post-footer'> several times but you have to paste above code above the second one.

Step 7: Click on save template and you are done!

Note: Make sure to label every post of your blog otherwise this widget will not work.

Customization:

Number of posts:

To change number of posts change 6 with desired number of posts in maxresults=6

Title of related posts:

To change title of your related posts widget just replace "You Might Also Like Reading" with your desired title.

How To Show Simple Related Posts Widget In Blogger Mobile Site Under Posts?

If you are wishing to show show a simple related posts widget below your posts in mobile view too then follow below steps. Don't worry it won't effect your mobile site speed! You don't need to follow all steps again, once you have installed this widget in your desktop site then you just have to use the code of step 6 with a little bit changes(I have made). So follow below steps

See Live Demo

Step 1: Optimize your blog for mobiles first (Use Custom Blogger Mobile Template).

To use blogger custom template go to Blogger Dashboard > Template > Click on Blogger Mobile Settings Icon as shown in below picture.

Now switch your mobile template to Custom.

Step 2: Copy below code:

<b:if cond='data:blog.isMobile == &quot;true&quot;'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a href="http://101helper.blogspot.com/2015/08/linktext-only-related-posts-widget-for-blogger.html" id="about" rel="nofollow" style="color: #888;">101Helper</a></div></b:if></b:if>

Step 3: Go to template > Edit Html and find below piece of code in your template:

<b:if cond='data:top.showMobileShare'>

Step 4: After finding <b:if cond='data:top.showMobileShare'> scroll a little bit up and find below code:

<div class='post-footer'>

Step 5: Just above paste the copied code(step 2).

Step 6: Click on save and you are done!

I hope you like this post and it was helpful to you. If you have any question ask me in comments. Share this post and help others. Follow and subscribe for latest blogging tutorials, gadgets, widgets, tips and tricks. Thanks for visiting 101Helper.

Search tags: Simple related posts widget blogger,Related posts widget for blogger,stylish related posts widget,links,text only related posts widget,101helper blogger gadgets

Read More

Related Posts Widget For Blogger Mobile

A very important factor of off page seo is internal linking, it means to inter link other posts with the post you write. Internal linking is good for seo as well as it increases your page views because it is the way by which visitors reach to your posts. Internal linking is of two types one is to mention links of older posts in new post and the second is to add a related, recent, recommendation or featured posts widget in your blog. It helps visitors to reach to more posts and read them. Related post widget is most popular in desktop sites but now you can add related posts widget in your blogger mobile site to engage your mobile visitors to your blog. So in this post I will show you how to add related posts widget in blogger mobile site. 

You can see a live demo of this widget in my blog either in your smartphone or on desktop. Just visit my blog's mobile site by this link 101helper.blogspot.com/?m=1 

Before we start, first optimize your blog's mobile site by reading this post. After optimizing your blog for mobiles just follow below steps to add related posts widget in your blog(mobile site).

Also Read: Text Only/Links Only Related Posts Widget For Blogger Mobile Site.

Step 1: Go to blogger dashboard and navigate to layout > add a gadget > Html/javascript.

Step 2: Copy code of mobile related posts widget from below link.

https://googledrive.com/host/0B-3SIKm-BBF_T1ZaR05QampqV3c

Tip: Use Ctrl+A to select the full code and use Ctrl+c to copy it.

Step 3: Paste the copied code into Html/javascript and click on save.

Step 4: Grab the newly added gadget(related post mobile widget) and drop it at the bottom in the layout page. As shown in below image.

Widget Not Appearing In Mobile Site?

If the related post widget fails to show in your blog's mobile site then follow below steps.

Step 1: Go to blogger dashboard, navigate to template and click on Edit Html.

Step 2: Jump to the widget(related posts mobile) by its id or find it by using Ctrl+F

Step 3: Search for a line similar to this:

<b:widget id='HTML7' locked='false' title='' type='HTML'>

Step 4: Add this piece of code mobile='only' before locked='false' like this:

<b:widget id='HTML7' mobile='only' locked='false' title='' type='HTML'>

Step 5: Click on save template and you are done. Open your template and scroll to the end to see your related posts widget!

I hope this widget is working fine on your blog, if you are facing any problem tell me by leaving a comment below. Follow and subscribe to get latest news about blogger widgets. 

Search Tags: Related Posts Widget For Blogger Mobile,blogger widgets and gadget,related posts widget,random posts,featured posts,thumbnails,text only,blogger widgets

Read More

How To Optimize Blogger Blog For Mobile Phones

Many blogging networks like wordpress, weebly, hostgator etc provides mobile sites to their users, similar to them blogger also provides this feature to its users. Blogger provides mobile site as well as templates for mobile sites which are well made for all mobile phone screens. Although blogger is good for blogging as it has desktop and mobile sites but like desktop template you have to optimize your blog for mobile phones. And for this you need to add some Gadgets, so that you could get benefit of your desktop as well as mobile site. 

Initially all blogger mobile sites have simple or default templates which allow only specific gadgets such as: 

• Header(logo)
• Footer(powered by blogger)
• Page list
• Blog(posts)
• Adsense
• Profile

So you can't get full benefit of your mobile site until you have optimized it. So in this post I will help you to optimize your blog for mobiles so that you could get benefit from your mobile visitors.

In this post you will learn following things:

• How to optimize mobile template(basics).
• How to hide all useless things in mobile site which shouldn't appear on mobile site.
• How to show essential gadgets in mobile template(Related posts, Ads, Follow/Share buttons, Search box).

So lets begin, we will start from optimizing mobile template.

Optimizing Mobile Template In Blogger:

Blogger has many mobile templates e.g simple, dynamic, picture view, Awesome inc, Water mark tec.

And all the templates have different views, all blogger templates have an awesome look but they do not give you full benefit as they don't allow ads and other custom gadgets. So you can't add related posts widget(which is essential to increase page-views). 

So you need to use custom template and optimize it. Follow below steps to switch on your custom mobile template.

Step 1: Go to template and click on the icon shown below mobile template.

Step 2: Choose the custom template and click on save.

Congratulations! you have successfully switched on custom template for your blogger mobile site.

Hiding Things In Blogger Mobile Site:

Every blog has something that should be only on desktop such as a gadget. But when a blogger mobile template is switched to custom every thing you have added in your blog template will start appearing in mobile view too. Here I have to mention that only those things appear in mobile sites also if you have added it in template, but if you have added something in layout as a new gadget, it won't appear in mobile site until you have enabled it. So here I am going to show you how to hide something in mobile view of blogger by using xml.

Step 1: Go to template and click on edit html.

Step 2: Click inside the code and search for something which you want to show only in desktop and hide it in mobile site.

OR

Add something to your template for example a gadget or a comment or a picture.

Step 3: Now just before the code which you want to hide in mobile site paste the following piece of code:

<b:if cond='data:blog.isMobile == &quot;false&quot;'>

and after the code(which you want to hide in mobile site) type </b:if>

Explanation:

For example you have following code and you want to hide it in your mobile site:

<html>
<body>

<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>
</html>

Then according to above method your code should look like below code:

<b:if cond='data:blog.isMobile == &quot;false&quot;'>

<html>
<body>

<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>

</html> 

</b:if>

Gadgets For Blogger Mobile Site:

Blogger gadgets created by blogger or other websites aren't compatible with mobile sites so you have to use special gadgets for blogger mobile site you can find some mobile site gadgets here.

Showing Things Only In Blogger Mobile Site:

If your blog has something that you would like to show in mobile site only then its possible now, how? Just use the below piece of code above the content which you would like to show only in mobile site:

<b:if cond='data:blog.isMobile == &quot;true&quot;'>

and after it just add this piece of code:

</b:if>

For example I want to show this line in mobile site only "I am fahim, you can call me FK" then in my template it should be like this:

<b:if cond='data:blog.isMobile == &quot;true&quot;'>
I am fahim, you can call me FK
</b:if>

Now it will be shown only in mobile site. You can use this to show related posts widget in blogger mobile site.

Check out: More Mobile Blogging Tutorials To Improve You Mobile Site!

Hope you like this post. If you have any question please help me know by leaving a comment below.

Seach tags: Blogger mobile site,Blogger mobile site,Optimize Blogger Blog For Mobile Phones,Blogger mobile site gadgets,101helper

Read More

Search Box For Blogger Mobile Site

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:

<!-- Search box for blogger mobile by 101helper.blogspot.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 101helper.blogspot.com -->

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.

Related post: How to find widget id of gadgets in blogger?

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 http://myblog.blogspot.com/?m=1 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.

Read More