X Close
T Friday, December 04, 2015

Slideout Menu For Blogger Mobile Site With Social Buttons

fahim raza 18 Comments so far
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.


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="https://rawgit.com/101Helper/docs/master/slideout-nav-public.css" />
<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="http://1.bp.blogspot.com/-tKEvMrl1rNg/VlHno1INErI/AAAAAAAAEDM/p6QC4v0mUGg/s1600/rsz_close-icon.jpg" />
<div id="search-height"></div>
</form>
<div class="prl-container">
<div class="nav-wrapper clearfix">
<img id="show-search" src="http://2.bp.blogspot.com/-JJaM7cFOVhQ/VlHnpNl_awI/AAAAAAAAEDU/DoJe685oe7w/s1600/rsz_search-icon.png" />
<div style="float:left;">
<div class="nav_menu_control"><a href="#" data-prl-offcanvas="{target:'#offcanvas'}"><img src="http://1.bp.blogspot.com/-pb2BSgtLzLA/VlHnpOZWKCI/AAAAAAAAEDQ/T3ujbHq-QXE/s1600/rsz_mobile-menu-icon.png"/></a></div>
</div>
<div class="container">
<div class="left">
<a href="/?m=1"><img src="http://1.bp.blogspot.com/-TUrBgPXnqEQ/ViFcpEM32HI/AAAAAAAADzQ/9cpaOhTyeFU/s1600/rsz_1101helper.png" class="logo" alt="101Helper"/></a>
</div>
<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="https://www.fb.com/pages/101Helper/623626157780837"><img border="0" src="http://2.bp.blogspot.com/-GQPoAuiBzH8/VkyJRB21uUI/AAAAAAAAECk/hu0P8MunxW0/s1600/facebook.png" /></a>
<a href="https://twitter.com/101helperblog"><img border="0" src="http://4.bp.blogspot.com/-fWnS_YBm4Fk/VkyJtu17mhI/AAAAAAAAEC0/7ujWxnTR9S0/s1600/Twitter-Logo.png" /></a>
<a href="https://www.pinterest.com/101helper"><img border="0" src="http://2.bp.blogspot.com/-Y4pUO8DhyRI/VkyJRMUnxFI/AAAAAAAAECs/3K3W7_XD4eM/s1600/App-Pinterest-icon.png" /></a>
<a href="https://plus.google.com/+101helperBlogspot"><img border="0" src="http://4.bp.blogspot.com/-JWK2kZI99O4/VkyJRB8aZYI/AAAAAAAAECo/rX64EboMhD4/s1600/rsz_circle-google-plus-128.png" /></a>
</div>
<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="https://4.bp.blogspot.com/-Et4EX_hsQDI/V35jh5bmRGI/AAAAAAAAFfU/bHaT1rx1d2AMPWWS-2nWKgrjytLxSfq-ACLcB/s1600/abt.png"/>101Helper</a>
</ul>
</nav>
</div></div>
<script type='text/javascript' src='https://rawgit.com/101Helper/docs/master/slideout_mobile_menu.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='https://rawgit.com/101Helper/docs/master/slideout_mobile_menu.js'></script>
<script>
$(document).ready(function(){
    $("#hide-search").click(function(){
        $("#searchbox").hide();
    });
    $("#show-search").click(function(){
        $("#searchbox").show();
    });
});
</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="https://4.bp.blogspot.com/-Et4EX_hsQDI/V35jh5bmRGI/AAAAAAAAFfU/bHaT1rx1d2AMPWWS-2nWKgrjytLxSfq-ACLcB/s1600/abt.png"/>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!



WATCH MORE BLOGGING VIDEOS!

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 fahimraza101@gmail.com. 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


18 comments :

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

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

      Delete
  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

    ReplyDelete
    Replies
    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?

      Delete
  3. Click http://www.gistsvilla.com 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

    ReplyDelete
    Replies
    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 @ Fahimraza101@gmail.com

      Delete
  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

    ReplyDelete
    Replies
    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...

      Delete
  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...

    ReplyDelete
    Replies
    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.

      Delete
  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?

    ReplyDelete
  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?

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

    ReplyDelete
    Replies
    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

      Delete
  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
    www.techypatch.com.ng

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

      Delete