--> Notification Bar For BlogSpot With Facebook Like Button | Experience Lab - Online business creation and development guide for bloggers and startups

Notification Bar For BlogSpot With Facebook Like Button

Most of you liked the new sticky notification bar which is an important way of seizing visitor attention towards an important headline, new...

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ3F0QSxqHVD17U5tp9UAHD5OL8USF1y7HqpvdlIv8rtNJYRJeu4o5HeH3OQHHbVB6-lF5YaloLae4R9azB34VAI16VUItvDPeVGfSybzl0g_Aq7744jtGmSTB7tAq6cMWOh-JRbsG6ww/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. :>

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Notification Bar For BlogSpot With Facebook Like Button
Notification Bar For BlogSpot With Facebook Like Button
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9-fw6-Ao88-mEUvuUNUecgSDWMq0Q6BF6muTNfG2D5wWg-4OiXgz7tZLs8bnvIt12oDaAuVwB9oEDcCN2nxIgLcsXUJIzbI9gpOY3fV9vSNi3XYgTe3L2Os02OEMC2HTs9GhXfI7xtQs/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9-fw6-Ao88-mEUvuUNUecgSDWMq0Q6BF6muTNfG2D5wWg-4OiXgz7tZLs8bnvIt12oDaAuVwB9oEDcCN2nxIgLcsXUJIzbI9gpOY3fV9vSNi3XYgTe3L2Os02OEMC2HTs9GhXfI7xtQs/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/09/notification-bar-for-blogspot-with.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/09/notification-bar-for-blogspot-with.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy