Skip to main content

Tips To Get Sitelinks In Google Search Results - Blogger

Sitelinks are some links that are showing below site in search engines. Its not just in Google search results but in Bing, Yahoo and also in Yandex. There is no idea how to get sitelinks, even Google says that sitelinks are automatically generated links to help visitors reach important pages of your site. Also you have no control over which page you want in sitelinks and also there is no code which can do it. You might be thinking that if nothing is known about sitelinks, how am I going to get it for my site ? Well, the answer is simple you will get it as I got them ! What Are Google Search Result Sitelinks: Above is the sceenshot of sitelinks of my blog. If you search "101helper" oon Google you will see the sitelinks live. These are featured links from my blog and are shown to visitors to help them reach deeper pages or help them to reach the content of interest on a site. Note that sitelinks never remain the same they change time to time and we have no control over it. Goog
Post a Comment

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

Screenshot:

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="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/AVvXsEikT4hgTiIPS_msJo7GdR6kPMD0bxNkkdyIOK1WDoC5k5C0gvHc5EaZ5XsL5fHbS7UgICeP5Flci5ULzY2K2D-H9-xBm2XA0whUJgmwUE9UB1oalKXpttQ1QxNcbtcxSw48hPMgWpIXa2k/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/AVvXsEhkjq4J_CeTpU8dgnvT3k8b7VJ073a08R2OYXcf7dOkBzT8ihNRgK3S93ynrHMdFO3wU0G1PufG9xTWdgjWCv2eHlIWazJMGw9NyucGmyJp9FfwXyCLFv3iKxpXuDpNlegoCAGPau80Xzk/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/AVvXsEh7b_8cjRups11GCyU9fLasM4YQyVkTYSuROXwb8zc9izv9OXWfZBnO73pAkDdJqzyvQWLV_jCe72L5xGEBTntPxe6N3os7FOu1NGgxwT8ibCxxpnHxq20fQegKw5NDEEVSzKFUSqc708Y/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/AVvXsEjbTMyU1CEFagKM_a19D2X0pldphgKi-fA2GLjayHIvHh9Il8h9UCMo-KA6ei9sVLCzfO4K2RUeslXlV-s-1erO-m2yf6D3hVYIPPnybar08xJ0CbTe4SuHpnU_0sOPH4iN2V8LkF_wrb0/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5InxIeISl0oRcdVg3Sc_kAlbkB9RGySk8du4-z-5W6BQB6wHdjs0HxUiFnKAuP1Kg7rtDdTKMA-oJ-1WzUwvpLV7KG5YRhntldFh-WsS0DZA93dYp6xL8NAlDdz7a7i5fPK5VaugsVwE/s1600/facebook.png" /></a>
<a href="https://twitter.com/101helperblog"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGjk2DKimfRFUW3K4ouVmSAayqOVRzTiX2o0HPWRfdboPEOHn7mnmOt4p5OF9T1c5TKFQPz1-6WRfZOlIjUcWcbj0dpCUETXyTzraHR-lEx7p5-hVIRufFqgYclLJclAHcDoCC1yn3pZo/s1600/Twitter-Logo.png" /></a>
<a href="https://www.pinterest.com/101helper"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdi9bLDLFiIhVoCw569ph45n1JTgO50kpQfrKr2r4ymCSqj7Q35ygGtlFBnXPno-4EIcJ9tUHzjZx1L2VSb2-ZJ4wYVABiSIm2IbURo1q7rZIFpnYnQ2VpBNtikNDUa3c5raMWNnzX0qA/s1600/App-Pinterest-icon.png" /></a>
<a href="https://plus.google.com/+101helperBlogspot"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55UEhPDQmnhJCEh2XIWDib-6aAwtr4ZIibl_XOhJ4D6n8I-eR21UJv_fkIc25r2KiBBorEM8Exgsaf3NpYC1GAF_amU6ry_yzXaReIYJMJAvsdS43b0-8A0RX77n9F0nD6sxtJl15L2o/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="https://101helper.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOHr38IcfxrIi4O7zS380npFbo23NdrtOWHTveVEDbnuHAcWfQAXlmSnpKZGFCstE09vZKWe_ag8E1KfU6RkMpw54Wo3cks5kv_h4i69X_IxGbAVL0DapfqRYWopgYOOrOs8YlJDtksGDw/s1600/abt.png"/>101Helper</a>
</ul>
</nav>
</div></div>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOHr38IcfxrIi4O7zS380npFbo23NdrtOWHTveVEDbnuHAcWfQAXlmSnpKZGFCstE09vZKWe_ag8E1KfU6RkMpw54Wo3cks5kv_h4i69X_IxGbAVL0DapfqRYWopgYOOrOs8YlJDtksGDw/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
Labels:

Comments

Post a Comment

Popular posts from this blog

Addthis Pop-up Social Sharer Widget For Blogger

We all know that popups are really beneficial to get followers, likers and traffic and thats why tools like Hellobar is used by many. I also use Popups because my visitors give response more to popups rather than sliders or fixed content. Similarly its very hard to get content shared so popups work for it too. And its important to get content shared because more sharing equals to more traffic. Popup share buttons are not new, many of use have used them but popup have either 5 or 6 buttons so visitor is limited to share content only to some social networks and may be he or she is not using any of these networks so it will be a waste of time you will not get content shared. So I brought you a new idea, Why don't we use addthis popup sharer, it has all social buttons plus it doesn't need long coding and too many scripts so it doesn't slow down our blogs. So in this post I am going to share addthis popup sharer along with some customization. So you can get popup by the time whe
Post a Comment
Read more

5 Sites To Submit Your Posts To Boost Traffic Instantly

New bloggers often search "how to boost or increase traffic instantly" and don't find any answer or usually get answers that are not satisfactory. So they head towards fake traffic or seo. Fake traffic is obviously useless because you don't either get money and that traffic is limited because same visitors visit your site again and again for points(traffic exchange) and there is no ad network that pay you for ordinary traffic. So fake traffic is not beneficial that's why bloggers optimizes their blogs for search engines to get traffic that is organic and unique, but the fact is that once your blog is optimized for search engines you will not get traffic in one day but you have to wait for months or for year. Actually it depends on your blog's topic e.g if you have a blog about making money you will get more traffic in less time because every 2nd person is surfing on internet to earn money. So this post is about how can you increase your blog traffic instantly.
Post a Comment
Read more

How To Show Star Ratings In Google Search Results - Blogger

Google rich snippets allow you to make your site's search results view better to get maximum visitors. And it is seen that sites with rich snippets enabled get more visitor specially sites selling products or sites about review of any ad network or site with cooking recipes. Among Google rich snippets most popular are search box in search results and star ratings widget because most of sites are able to show them for their search results but not all! other rich snippets like logo of company or organization or social profiles in search results appear only for big companies or organization. So in this post I am going to show you how to show star ratings for all posts in Google search results. How to add Google Rich Snippet schema for star ratings in blogger? Step 1: Go to blogger dashboard, go to template and edit html. Step 2: Search for below code: <div class='post-footer'> You will find this code 2 times paste the below code above the second one. Step 3: Copy below c
Post a Comment
Read more