Slideout Menu For Blogger Mobile Site With Social Buttons

My recent post for slide downwards menu which is actually appreciated past times visitors equally it got to a greater extent than than M views then I decided to practice closed to other bill of fare for blogger mobile site. Slide downwards bill of fare was likewise unproblematic in addition to it didn't cause got other features similar social media buttons in addition to search box then I decided to practice a bill of fare which cause got these features in addition to an exiting look. As responsiveness is also rattling of import for a bill of fare then i made it responsive too. You tin read its major features below. For a alive demo you lot tin see 101Helper's mobile site. I am certain you'll similar this menu. Don't forget to hand your feedback past times leaving a comment below.

Slideout Mobile Menu Features:

☆ Easy installation.
☆ Responsive design.
☆ Social media buttons ready.
☆ Fast(doesn't comport upon blog's loading speed).
☆ Low size.
☆ Responsive search box.
☆ Compatible amongst all smart phones.
☆ Scrollable tabs in addition to floating on page scroll.
☆ It fits all covert sizes(ipad,iphone,tablets etc).
☆ It has infinite for Logo.

See Live Demo

Screenshot:

How To Add Slide Out Menu In Blogger?

Its rattling slow to install this bill of fare inwards your blog. You only cause got to follow below steps. Note that nosotros cause got to shroud spider web log header inwards mobile site equally this bill of fare has a infinite for logo then you lot don't take spider web log header inwards mobile site whatever to a greater extent than then nosotros volition shroud the header inwards mobile site likewise piece installing this menu. Lets begin!

Step 1: Go to blogger dashboard in addition to navigate to layout.

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

`

Step 3: Click on Html/Javascript.

Step 4: Copy the below code in addition to glue 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD4ODgF0dyjgH7e-B4lnPUE-R1vR0TqvmTPp4gXd2FGadD-6Co7ofKS0OFd-XOb_UWf7mHkjTyfpvlLYfb6PX1yNI7sRQ1eDBmvnR8r19Neau4ZzuZO_XLDCTZmJSl9i6P9n8_SPPB9X8/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghtaCdao7W861efBZn3FDIESjnPM_eay2RVZinWuN7gv-ofKsqPioCRrU8HcZWViYmcQBZp7AA5Q5Mb2g9us1GJICSyhu__7aS7-y9sh9SZ7_EO741iFyRgO9-MQ4XrWVsDOVMjpCXUos/s1600/rsz_search-icon.png" />
<div style="float:left;">
<div class="nav_menu_control"><a href="#" data-prl-offcanvas="{target:'#offcanvas'}"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_AObkJB4TqKyLu-bitdZTgIVvr9x71YIes2NXEwSERn-qV4-eMR-DolauUlSJBSc-DUqko8RO7sK6AAtWuQ8WVCu3S0SAqtkmOo2JOfj2VVa35x4x0EFEadw3IiODi-t7LrVZdWHMh0/s1600/rsz_mobile-menu-icon.png"/></a></div>
</div>
<div class="container">
<div class="left">
<a href="/?m=1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisyhneOxNlHdNKcnJ3Z7steUHdJsNyIHwDFgsw3C6a0iiryIEsCgQj8Isx-TJfm5gl9Cfx0Vji9pVmnToTAKEvaCJd97nF_QMD6g92o5htv7zmepignPLKrrFr2pTi4UwkLD3r5HYiNCY/s1600/rsz_1101helper.png" class="logo" alt=Slideout Menu For Blogger Mobile Site With Social buttons Slideout Menu For Blogger Mobile Site With Social Buttons/></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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXhyphenhyphenUfgKA-u8m5XTdWEPwKpzWOx9tc7vDr07mJLa9dlype3INteO3CavTYdfiSSYHECPixJ1vOCpEF0hd5dzjEeT-ZIigmXu8vmQbBVzCN4Abp8NDpe83xB5Ll9QWBSxTx29Nizcf0gKE/s1600/facebook.png" /></a>
<a href="https://twitter.com/101helperblog"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfx0g50HcjRXgvxf27PkH4lR9vIYZMfho_nel0jJgOFSQFCvZ2b73syhPv1VbdlAikRP_SVGxc4RCCBM7jZ7AVK5vO571WvEMYV1U9TuTFnzHSDaOovKtdDflu7pdP6N6FT6r98yvL7Mo/s1600/Twitter-Logo.png" /></a>
<a href="https://www.pinterest.com/101helper"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiThcLzi3KVz-tmQ4yi7GQ6rudvmbrakKRjne3t8N09kwU3Px950NuwvtkKwcSGTz08oMV8YhqyuLVFHH51uEskbOV4o4UgRgCCBHKdv_CJ-YPHHzENt345m_lGh_WShO_pHMJ4_buaiLM/s1600/App-Pinterest-icon.png" /></a>
<a href="https://plus.google.com/+101helperBlogspot"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPSieKbTrDDSfduTWqj8iyCKMVsclZVoks_g9h5MX2KgBpEgcrhXwQiEqQmYy22Es9uq64CElP_I3t97q_QWk5tv8a9AZx8e9ps1BGBcfvzZ8Rbs5j4vSgFKqsg1_RXqf-_i-lnB0ip3s/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 in addition to 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 coin 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="https://seo-expert-tutorial.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV1C4UM9vGZQAVrsbewAfVlCez2kZgQyuxbEx8v63i7pCkj4cCAFOY63otCwKm3-6196k8ZXI7SGWxwLP0vv44epoOdS5P1_Rc5elJ9G7jjINca2msBykPIUUpO0A5EBoMCE-fRbiQaumo/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 slice of code amongst your blogs information eg:

• Replace green color links amongst your fan pages links.
• Replace orange color link amongst your blog's logo icon link.
• Make changes inwards tabs e.g alter links in addition to text of your bill of fare tabs - (Highlighted amongst yellowish color).

Note: You tin run across a link inwards the bill of fare highlighted amongst cherry color, don't campaign to take it its against 101Helper Copyright Policy, if institute your spider web log volition last reported for copyright violation in addition to activeness volition last taken.

<a class="abt" href=""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV1C4UM9vGZQAVrsbewAfVlCez2kZgQyuxbEx8v63i7pCkj4cCAFOY63otCwKm3-6196k8ZXI7SGWxwLP0vv44epoOdS5P1_Rc5elJ9G7jjINca2msBykPIUUpO0A5EBoMCE-fRbiQaumo/s1600/abt.png"/>101Helper</a> // Copyright link ---- Don't take this!

Step 6: Click on relieve button.

Step 7: Go to template in addition to Edit html.

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

Step 9: Search for the id of your mobile bill of fare gadget in addition to honor it inwards your template.

Check out: How to honor ID of a gadget inwards blogger

Step 10: After finding your mobile bill of fare gadget inwards your templae type mobile="only" after locked='true' as shown inwards below image.

Step 11: Now cutting the mobile bill of fare gadget in addition to glue it below header as shown inwards below image. This is the almost of import measuring if you lot skip it or don't practice it correct your bill of fare tabs volition last irregular. You cause got to practice it inwards 2 steps run across below images for instance.

Step A: Jump to your bill of fare gadget past times its id and cut bill of fare gadget code:

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

Step 11: Click on relieve template in addition to you lot are done!



WATCH MORE BLOGGING VIDEOS!

Open your spider web log inwards your cry upwards in addition to banking concern check if your bill of fare is working fine or not. If you lot cause got whatever interrogation or confusion inquire me inwards comments or contact me at fahimraza101@gmail.com. If you lot institute this post helpful delight recommend it on Google in addition to part it amongst others. Thanks for visiting 101Helper. Keep visiting us. Follow in addition to subscribe to rest updated.

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

Bagikan Artikel ini