Wednesday, November 20, 2013

Share It

Add awesome sticky footer menu to Blogger with simple HTML

Hi friends, I have already started blogger tutorials for you. Today I want to discuss about adding a sticky footer menu to blogger. Have you ever thought of having a sticky menu in your blog footer? If you like to have it then you have read this article. You will have to use simple css and html to add this to your blog. This menu looks very beautiful and it adds a perfect finishing to your blog. Add a sticky menu in  the footer of your blog and it will attract your readers and is very much easier to them to go through the links on your blog. It helps your readers to catch the links very sooner. This sticky menu also adds professional look to your blog.
Look at the image below to know how the sticky menu bar looks in your blog's footer.


You can also watch the live demo of this sticky menu bar here.

View LIVE DEMO



You may like to read:

 How to earn money with your facebook pages?

 How to add separate contact page to blogger?

How to add facebook like button below blogger posts?

Best practices to write titles for Search Engine Optimization(SEO)

Great tips to reduce loading time of your blog to increase more readers

Idiotic and funny ways you never know to promote your blog

How to earn money from blogs?

Add floating widget to your blogger blog

Get more viewers to your blog using facebook fan page



Now let me explain how to add this menu to your blog.
  • Login to your Blogger account
  • Go to Dashboard.
  • Select Template>Edit HTML.
Warning: First you need to restore your blogger template before editing your HTML code.
Search in your Template for the piece of code shown below.
]]></b:skin>
Just copy the code above and press CTRL+F in your browser to find and paste it in your browsers search box.
After finding that code you need to follow this method.
Just above/before
]]></b:skin>
Copy and paste the below given lines of code.
CSS Part:
#cmb-stickey_footer { /* This will make your footer stay where it is */
    background: none repeat scroll 0 0 #1D1D1D;
    border: 1px solid rgba(0, 0, 0, 0.3);
    bottom: 0;
    font-family: Arial, Helvetica, sans-serif;
    height: 40px;
    left: 50%;
    margin: 0 auto 0 -490px;
    padding: 0 10px;
    position: fixed;
    text-shadow: 1px 1px 1px #000000;
    width: 960px;
}
/* border curves */
#cmb-stickey_footer {
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
}
/* hover effect */
#cmb-stickey_footer:hover {
    background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#cmb-stickey_footer {
    -moz-box-shadow:0px 0px 11px #191919;
    -webkit-box-shadow:0px 0px 11px #191919;
    box-shadow:0px 0px 11px #191919;
}
#cmb-footer_menu {
    margin: 0;
    padding: 0;
    width:auto;
}
#cmb-footer_menu li {
    list-style: none;
    float: left;
    font-size:12px;
    padding: 12px 14px 14px 14px;
    border-right:1px solid rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.1);
}
#cmb-footer_menu .imgmenu {
    padding:5px 8px 3px 14px;
    float:left;
    background:url("http://2.bp.blogspot.com/-EKkCVeCxcns/UNf3vWEG5TI/AAAAAAAAEqo/VD8v7BV-u0c/s1600/home.png") 13px 5px no-repeat;
    width:36px;
    height:30px;
    border:none;
    border-right:1px solid rgba(0, 0, 0, 0.4);
    cursor:pointer;
}
#cmb-footer_menu li:hover {
    background:#202020; /* Fallback color for old browsers */
    background: rgba(0, 0, 0, 0.3);
}
#cmb-footer_menu .imgmenu:hover {
    background:url("http://4.bp.blogspot.com/-l9vfTKW5fOE/UNdWEvY4uII/AAAAAAAAEpo/2QsrtDMA4Bg/s1600/home_hover.png") 13px 5px no-repeat;
}
#cmb-footer_menu li a {
    display: block;
    color: #cccccc;
    text-decoration: none;
}
#cmb-footer_menu li a:hover {
    color: #ffffff;
}
#cmb-footer_menu li span {
    display:none;
}
#cmb-stickey_footer #cmb-social_icons {
    float:right; /* social icons positions */
    width:auto;
    margin:5px 15px 0px;
    padding:0px;
    overflow:hidden;
}
#cmb-stickey_footer #cmb-social_icons li {
    margin-right:12px; /* 12px is the space between each one of them */
    float:left;
    width:24px;
    padding:0px;
    height:32px;
    list-style:none;
    _margin-right:0px; /* this is for IE6 only */
}
Now find the ending tag of body i.e., </body> tag in your template.
Search for
</body>
and just above/before ending body tag place this HTML code.
<div id='cmb-stickey_footer'>
  <ul id='cmb-footer_menu'>
    <!-- Begin Footer Menu -->
    <li class='imgmenu'><a href='#'><span>Home</span></a></li>
    <!-- This Item is an Image, the "span" is hidden via CSS -->
    <li><a href='#'>Blogger Tutorials</a></li>
    <li><a href='#'>Blogger Templates</a></li>
    <li><a href='#'>CSS tricks</a></li>
    <li><a href='#'>HTML tricks</a></li>
    <li><a href='#'>Click My Blog3 Tricks</a></li>
    <li><a href='#'>Contact</a></li>
  </ul>
  <!-- End Social Icons -->
  <ul id='cmb-social_icons'>
    <!-- Social Icons -->
    <!-- The span is the text appearing on hover, use the tooltip class in the link -->
    <li><a href='#'><img alt='' src='http://3.bp.blogspot.com/-ZXH1xtzwSbA/UNdWGCZ1yII/AAAAAAAAEpw/QQSnq1ECoRI/s1600/twitter.png'/><span>Twitter</span></a></li>
    <li><a href='#'><img alt='' src='http://4.bp.blogspot.com/-p7vJgUS4sZk/UNdVs4nk9gI/AAAAAAAAEow/ta4DYyy7MpQ/s1600/digg.png'/><span>Digg</span></a></li>
    <li><a href='#'><img alt='' src='http://1.bp.blogspot.com/-KgpGEKqsBRE/UNdV-6aIQOI/AAAAAAAAEpQ/YuwKMLFWpYg/s1600/flickr.png'/><span>Flickr</span></a></li>
    <li><a href='#'><img alt='' src='http://1.bp.blogspot.com/-mHOLa9hHoNc/UNdV6OuT73I/AAAAAAAAEpA/Cz0cNMw1f4U/s1600/facebook.png'/><span>Facebook</span></a></li>
  </ul>
</div>
Now you have to save your template. Then you are done.
If you have any doubts regarding this tutorial you can comment below. If you have any suggestions please suggest me. Thanks for reading this tutorial. Please share it with your friends if you liked it.




Get Mobile Tricks, Free Balance tricks and all Computer solutions click here
Author: Bhanu Chander Bathini (CEO, Tricks Town.)
Hey friends, I am Bhanu Chander a Web Designer/Developer, Content writer, Freelance SEO analyst and a blogger. I am pursuing my M.Tech in Computer Science and Engg. You can contact me on bhanu4funn@gmail.com for web design solutions at low cost with effective SEO.

6 comments:

  1. Hi..i liked it very much..I want to modify little bit...I dont want sticky...just wanted to lye at bottom..please suggest me...YourKnowledgeportal.com

    ReplyDelete
    Replies
    1. Thanks for using this widget on your blog. Sorry for delay, I was busy and have seen your comment today. I have visited your blog now and I'm giving you the code that is needed to be edited.
      Just remove
      position: fixed;
      from the first block of your code i.e., you need to replace the below code

      #cmb-stickey_footer { /* This will make your footer stay where it is */
      background: none repeat scroll 0 0 #cmb-1D1D1D;
      border: 1px solid rgba(0, 0, 0, 0.3);
      bottom: 0;
      font-family: Arial, Helvetica, sans-serif;
      height: 40px;
      left: 50%;
      margin: 0 auto 0 -490px;
      padding: 0 10px;
      position: fixed;
      text-shadow: 1px 1px 1px #cmb-000000;
      width: 960px;
      }

      with

      #cmb-stickey_footer { /* This will make your footer stay where it is */
      background: none repeat scroll 0 0 #cmb-1D1D1D;
      border: 1px solid rgba(0, 0, 0, 0.3);
      bottom: 0;
      font-family: Arial, Helvetica, sans-serif;
      height: 40px;
      left: 50%;
      margin: 0 auto 0 -490px;
      padding: 0 10px;

      text-shadow: 1px 1px 1px #cmb-000000;
      width: 960px;
      }

      This will make your widget to lie at the bottom of your blog.
      When I made this change in the above code I found that the widget is lying at left most side of your blog. So I made a small change especially for you.
      I have removed
      margin: 0 auto 0 -490px;
      and replaced it with

      margin: -30pt 20px 20px -20px;

      The final code you have to apply is replace the first block of CSS code with

      #cmb-stickey_footer { /* This will make your footer stay where it is */
      background: none repeat scroll 0 0 #cmb-1D1D1D;
      border: 1px solid rgba(0, 0, 0, 0.3);
      bottom: 0;
      font-family: Arial, Helvetica, sans-serif;
      height: 40px;
      left: 50%;
      margin: -30pt 20px 20px -20px;
      padding: 0 10px;

      text-shadow: 1px 1px 1px #cmb-000000;
      width: 960px;
      }

      Please replace the first block of your CSS code with the above code. You are done. If you have any doubts/issues in applying this code, then please let me know. I'm always ready to assist you. Thanks

      Delete
  2. Thanks for your efforts...but actually it is not working properly..actually it lye at bottom but black background and shadow effects is not showing..

    Even if you see i have inserted that rolling post also "Recent Post"...that to also not working...i am tired to make changes...i m thinking to remove both the thing...

    ReplyDelete
  3. Hello there !! I am sanjay a blogger and I read your post how to add stiky footer and i tried it too. It was Awesome but i got a problem the footer was not stiky. Its all right it did not make difference at all but the main problem is that the color of my template is exactly matching your footer color and is nearly invisible. So i would be glad if you tellme how to change the colour of the menu and I am sorry for my English.

    ReplyDelete
  4. And my blog is http://gorkhalandpost.blogspot.com/

    ReplyDelete
    Replies
    1. Ok I have seen your blog. I'll make it for you to match your template. Thank you.

      Delete