September 11, 2011

Notification Bar For BlogSpot With Facebook Like Button


notification barMost of you liked the new sticky notification bar which is an important way of seizing visitor attention towards an important headline, news or any update or announcement you may wish to share. Today we will take a step further by adding Facebook like button to the sticky bar. This is a great way of increasing your fans on FB. All visitors will be able to see the bar at the top of your blogger header and it will stay fixed their and would scroll as the user scrolls down. It will always be attracting your visitors to like your blog. Lets first see a demo.

Scroll to the bottom of this demo page to see it:

Live Demo

Add Notification bar to Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for this,

]]></b:skin>

4. Just above it paste the follow code,

#mbt-stickybar{
background:#FF0000 url('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px;

line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;

}

#mbt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}

#mbt-stickybar a:hover{
text-decoration:underline;
}
#mbt-stickybar p {margin:0; list-style:none;}
#mbt-stickybar img {vertical-align: middle;
      margin-right: 6px;}

To change the background color of the sticky bar, simply change  #FF0000  with any hexadecimal color of your choice. Try our color chart.

5.  If you wish to add the bar above header then search for this code

<body>

else if you wish to add the bar below footer then search for this code

</body>

and  Just below it paste the following code,

<div id='mbt-stickybar1'>
<div style='float:left; width:400px;'>
<a href='#'>Receive Free Updates Via Email. Subscribe Now!</a>
</div>

<div style='float:right; width:300px;'>
<table style='margin:0; padding:0;'>
<tr>
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='BLOG LINK' layout='button_count' send='false' show_faces='false' width='80'/>
</td>
</tr>
</table>
</div>
</div>

Replace with your RSS link and replace

Replace BLOG LINK with your blog homepage URL. If you wish to replace the link with your Facebook like page URL then better read the post on link like button to like page.

   6.   Save your template and you are all done!

Visit your blog to see it hanging either at top or at bottom as you may have set it up. Have fun buddies. do let me know if you needed any help. :>





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

12 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Really good post dude! I will try it right now!

    ReplyDelete
  2. great work ! getting this like notification to real use buy face book likes to make your blog pages more popular . more the likes more the notifications and more the networking.

    buy facebook likes

    ReplyDelete
  3. The Problem I've found
    1. div id='mbt-stickybar1'
    I think it should be div id='mbt-stickybar'
    2. There is no Position:fixed so the bar didn't 'sticky'
    3. It worked perfectly when I place it below body but didn't below /body
    so I decide to place below body then manipulate the position with
    posisition:fixed;top:510;

    ReplyDelete
  4. Mohammad you're legend, i wish your success

    ReplyDelete
  5. Mohammad,
    the stikeybar is not stretching across my website, not sure why,
    www.realestatesnatch.com, any idea why could be the reason.
    Regards
    Samir Safadi

    ReplyDelete
  6. very nice post
    http://www.aurangabadtravel.info

    ReplyDelete
  7. Thanks, I'm gonna use it in my Blogger Regards

    ReplyDelete

  8. buy cheap likescongratulations guys, quality information you have given!!!

    ReplyDelete
  9. It's been good to see your blog when I always look for such type of blogs. It’s great to discover the post here.
    how to become instafamous

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!