Ads Top

Slideout Menu For Blogger Mobile Site With Social Buttons

Slideout Menu For Blogger Mobile Site With Social buttons

My recent post for mobile blogging was about a slide down menu which is really appreciated by visitors as it got more than 1000 views so I decided to create another menu for blogger mobile site. Slide down menu was too simple and it didn't have other features like social media buttons and search box so I decided to create a menu which have these features and an exiting look. As responsiveness is also very important for a menu so i made it responsive too. You can read its major features below. For a live demo you can visit 101Helper's mobile site. I am sure you'll like this menu. Don't forget to give your feedback by leaving a comment below.

Slideout Mobile Menu Features:

☆ Easy installation.
☆ Responsive design.
☆ Social media buttons ready.
☆ Fast(doesn't affect blog's loading speed).
☆ Low size.
☆ Responsive search box.
☆ Compatible with all smart phones.
☆ Scrollable tabs and floating on page scroll.
☆ It fits all screen sizes(ipad,iphone,tablets etc).
☆ It has space for Logo.

See Live Demo


slide out menu for blogger mobile site

How To Add Slide Out Menu In Blogger?

Its very easy to install this menu in your blog. You just have to follow below steps. Note that we have to hide blog header in mobile site as this menu has a space for logo so you don't need blog header in mobile site any more so we will hide the header in mobile site too while installing this menu. Lets begin!

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

how to add a gadget in blogger blog

Step 2: Click on add a gadget below your blog's header in the layout.

`how to add slide out menu in blogger tutorial

Step 3: Click on Html/Javascript.

how to add gadgets and ads in blogger

Step 4: Copy the below code and paste it into Html/Javascript window.
<link rel="stylesheet" type="text/css" href="" />
<nav id="nava" role="navigation" class="sticky-nav" style="top: 0px;">
<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>
<img id="hide-search" src="" />
<div id="search-height"></div>
<div class="prl-container">
<div class="nav-wrapper clearfix">
<img id="show-search" src="" />
<div style="float:left;">
<div class="nav_menu_control"><a href="#" data-prl-offcanvas="{target:'#offcanvas'}"><img src=""/></a></div>
<div class="container">
<div class="left">
<a href="/?m=1"><img src="" class="logo" alt="101Helper"/></a>
<div class="clear"></div></div></div></div></nav><div style="clear: both;"></div>

 <div id="offcanvas" class="prl-offcanvas">
<div class="prl-offcanvas-bar">
<div class="social-icons" style="padding-top: 5px;background: #fff;padding-left: 5px;">
<p>Follow us:</p>
<a href=""><img border="0" src="" /></a>
<a href=""><img border="0" src="" /></a>
<a href=""><img border="0" src="" /></a>
<a href=""><img border="0" src="" /></a>
<nav class="side-nav">
<ul id="nav-list" class="nav-list">
<li><a href="/?m=1">Home</a></li>
<li><a href="/search/label/Blogger%20Tips%20And%20Tricks?m=1">Blogger tips and tricks</a></li>
<li><a href="/search/label/Blogger%20Seo%28Search%20Engine%20Optimization?m=1">Blogger seo</a></li>
<li><a href="/search/label/Google%20Webmaster%20Tools%20tutorials?m=1">Google webmaster tools tutorials</a></li>
<li><a href="/search/label/Bing%20Webmaster%20Tools%20Tutorials?m=1">Bing webmaster tools tutorials</a></li>
<li><a href="/search/label/Blogger%20menus?m=1">Blogger menus</a></li>
<li><a href="/search/label/earn%20money%20blogging?m=1">Earn money blogging</a></li>
<li><a href="/search/label/Blogger%20Widgets%20And%20Gadgets?m=1">Blogger gadgets</a></li>
<li><a href="/search/label/Beginner%20to%20blogging?m=1">How to's/Blogging</a></li>
<li><a href="/search/label/Mobile%20Blogging?m=1">Mobile blogging</a></li>
<li><a href="/p/menusitemap.html?m=1">Sitemap</a></li>
<a class="abt" href=""><img src=""/>101Helper</a>
<script type='text/javascript' src=''></script>
<script src=""></script>
<script type='text/javascript' src=''></script>
<div id='menu-height'/></div>

Step 5: Replace the highlighted piece of code with your blogs info eg:
  • Replace green color links with your fan pages links.
  • Replace orange color link with your blog's logo image link.
  • Make changes in tabs e.g change links and text of your menu tabs - (Highlighted with yellow color).
Note: You can see a link in the menu highlighted with red color, don't try to remove it its against 101Helper Copyright Policy, if found your blog will be reported for copyright violation and action will be taken.

<a class="abt" href=""><img src=""/>101Helper</a> // Copyright link ---- Don't remove this!

Step 6: Click on save button.

Step 7: Go to template and Edit html.

how to edit html in blogger

Step 8: Jump to header and type mobile='no' after locked='true' as shown in below image:

how to hide header in blogger

Step 9: Search for the id of your mobile menu gadget and find it in your template.

Check out: How to find ID of a gadget in blogger

Step 10: After finding your mobile menu gadget in your templae type mobile="only" after locked='true' as shown in below image.

how to show gadgets in blogger mobile site

Step 11: Now cut the mobile menu gadget and paste it below header as shown in below image. This is the most important step if you skip it or don't do it right your menu tabs will be irregular. You have to do it in two steps see below images for instance.

Step A: Jump to your menu gadget by its id and cut menu gadget code:

slide out menu in blogger

Step B: Jump to header and paste the copied code below it:

slide out menu in blogger 101helper

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


Open your blog in your phone and check if your menu is working fine or not. If you have any question or confusion ask me in comments or contact me at If you found this post helpful please recommend it on Google and share it with others. Thanks for visiting 101Helper. Keep visiting us. Follow and subscribe to stay updated.

Search tags: responsive menu css,jquery,slide out menu ios,android,slide out menu for website,blogger slide out menu, mobile site navigation 101helper,menus for blogger


  1. It is not working for me, pls am using default mobile template...
    Tell me what to do

    1. Have you enabled custom template for mobile site after adding this menu?

  2. Sir, just exactly the way your site is, on mobile it is different and on desktop view too your site is different. when i enabled my custom template, it started displaying my desktop view on mobile, and i dont like it that way, i want it to be like yours... i want my mobile view to be like your mobile view pls how can i do that? i will be greatful

    1. Ok you can do it bro no problem at all... first tell me which template are you using? Is it the blogger template or you have installed it from other site?

  3. Click to see what i'm talking about,
    i want to design my mobile view, ive tried severally adding HTML Including this post you created, but they dont work, and i love my desktop view that way i dont want it to affect my desktop view.

    Pls send me any of your social account so that we can discuss more further. THanks Boss

    1. Ok I have checked your site and I have figured out the problem. The template you are using is well optimized for mobile site, this type of templates don't need a separate mobile site. All you need to do is to turn off mobile template. When you do that and visit your site form mobile you will see that the same template will fit the mobile screen so you don't need to add personal menus. This menu is just for blogger templates not for other. Though it can work on all templates but you need to turn off mobile template and then try this menu. Hope this is answer to your problem! If not Email me @

  4. Oh.. Okay, but i dont like my design on mobile view at all:( ..
    I see some sites designing Their mobile view yet their desktop view is no different as mine.. Like adding related post, etc.. Bro is there no solution to this? i feel you have great ideas about this pls figure it out for me...pls

    1. Yeah you can do it bro, you can add this menu in your mobile view but the site design will be same as your desktop and you have to hide the built-in menus of your template in mobile site to avoid it from affecting this menu... i can do it for you but i will need your password and email for 10-20 minutes... if you trust otherwise you have to do it on your own...

  5. I thought i could just design my mobile view without using custom...
    I dont want to use my desktop view as my mobile view... the design isnt good...

    1. You can't do it in blogger bro, you need to use custom template to design it so you have to use blogger template or enable the desktop for mobile there is no other way.

  6. But i think there are some codes that works for mobile view without using custom templates, apart from Blog archieve, author profile etc, am talking about some codes you put in HTML, pls is this possible sir?

  7. Okay Thanks alot. Please also link me on how you removed powered by blogger attribution on your mobile view. I think i can do that without using custom template?

  8. Hello... How can I edit the menu.. The color, size, height etc.

    1. You need to call the css file which I stored in github and then you need to make changes in css but don't do this otherwise your mobile site will slow down because you won't be able to store your own code until you read a post about it in this site

  9. mine is showing on some browsers while on some it will show white, I mean the menu the floating is okay.
    Check here to be sure

    1. Its because your template have some css code that is interfering with the menu

  10. How to make only the drop down icon show let the logo don't cover the header

    1. Unfortunately you can't do it because it needs alotbof changes such as you have to remove css and html of certain things and as all codes are stored externally so its not recommended to do that

  11. Assalaaamualaikum Mr Admin.

    Nice sharing. Thank you so much.

    I've implemented this great tutorial of yours to myhumbleblog

    really love this article.
    Thanks again :D

  12. how can we show the drop down menu option on the left? the and search only showin

    1. Re install the menu, and don't remove any thing ... i am using the same code for my blog and my menu is absolutely ok, if you want you can check on my mobile site.

  13. how to (remove theme designed by...) that comes below in mobile, reply

    1. Go to your theme > click on Edit Html and search for this text, remove it and save your theme.

  14. Hi, everything here seems to have worked for me except that my slideout menu is white and I can't read any of the the links... any advice?

    1. You may have some CSS code that is overriding the current CSS code,kindly remove it or leave your blog link here so that i can figure it out and help you.

  15. Bro one thing i love your template more than ever any other templates available on any blog which were hosted on blogger (talking about all popular bloggers)
    Damn your mobile view what to say just fond off....everyday more than 30 times I visit just to crack some information..... While night I tried to play with your different codes of different posts but at last I do some mistake.
    The code which you provided is great but could you let me know how to add that "trend" one this is the one which facinate me so much and mostly your blogger mobile menu style.... Just awesome...:) wished to give the site of my link but till yet i am not able to do all that tweaks which I wanted to...hope I may succed...

    1. Hello pritam, Thanks for such good words, I am really happy that you like my blog so much. That "Trend" is actually an Iframe and hosted on webhosting and a simple JavaScript and HTML code and many people asked me to share its code and Soon I will do it, So please wait for it.


Powered by Blogger.