Blogger sticky bar with Facebook and Google plus one button

Friends now a days all websites or blogs are fully depending on social networks. But many developers are not know hot get traffic from the social networks. Friends its very easy. one thing peoples are visiting your blog for reading some valuable thing their are not coming to sharing your content. Now a days you can start your blog you get benefits because creating a blog not money needed. Friend now days Facebook and new launched Google plus has giving many traffic if you use the social net work for your best purpose. MBC will give you an sticky bar with Facebook and Google plus one button. Lets start and read how to add sticky bar.

How to add sticky bar to Blogger

1. First login to your blogger dashboard.


2. Go to Blogger design-Edit HTML


3. Download or backup your template.


4. Search for this by using (Ctrl + F)

]]></b:skin>

5. Just above it paste it following CSS code

/*MBC Stickybar*/

#mbc_bar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidhanDqtoPd1GrThYU-lt_FEqckFgvOxJN6AvvSNHNtQBq_k2ZHTq-PCOI0Bb8Dse5LY_BLbckbU0CtHScBmnsv5tZDXthzverRjyYdPjlohiFNIX7tApzqNH7SUkUHNDoJoE8PUDLVh0/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:3px 0 0 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; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:12px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#mbc_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbc_bar a:hover{
text-decoration:none;
}
#mbc_bar p {margin:0; list-style:none;}
#mbc_bar img {vertical-align: middle;
margin-right: 6px;}

6. Next search for and paste the following JavaScript code just above it

 <script type="text/javascript">// <![CDATA[

//<![CDATA[
var mbc_arr = new Arrayundefined);
var mbc_clear = new Arrayundefined);
function mbcFloatundefinedmbc) {
mbc_arr[mbc_arr.length] = this;
var mbcpointer = evalundefinedmbc_arr.length-1);
this.pagetop = 0;
this.cmode = undefineddocument.compatMode &#038;& document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbcsrc = document.all? document.all[mbc] : document.getElementByIdundefinedmbc);
this.mbcsrc.height = this.mbcsrc.offsetHeight;
this.mbcheight = this.cmode.clientHeight;
this.mbcoffset = mbcGetOffsetYundefinedmbc_arr[mbcpointer]);
var mbcbar = 'mbc_clear['+mbcpointer+'] = setIntervalundefined"mbcFloatInitundefinedmbc_arr['+mbcpointer+'])",1);';
mbcbar = mbcbar;
evalundefinedmbcbar);
}
function mbcGetOffsetYundefinedmbc) {
var mtaTotOffset = parseIntundefinedmbc.mbcsrc.offsetTop);
var parentOffset = mbc.mbcsrc.offsetParent;
while undefined parentOffset != null ) {
mbcTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbcTotOffset;
}
function mbcFloatInitundefinedmbc) {
mbc.pagetop = mbc.cmode.scrollTop;
mbc.mbcsrc.style.top = mbc.pagetop - mbc.mbcoffset + "px";
}
function closeTopAdsundefined) {
document.getElementByIdundefined"mbc_bar").style.visibility = "hidden";
}
//]]>
// ]]></script>

7. search for  and just below it paste the following HTML code

<div id="mbc_bar">

<span style="padding-right: 5px; float: right;"> <img style="cursor: pointer;" onclick="closeTopAdsundefined);return false;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnAafwlWo9Hd5U_MVwUNum-8mz8r9DznOTUMXe9wKB34IZo0gwCjUTniiNGJc_MJIFgnu1pazhg5vFYT6fkYsFSf1Azi8nhvVHncWAOYSUZGANnUKFJVIBaWcC48Nam1knuyNEyjcp9gg/s400/cancel.png" alt="" align="absmiddle" border="0" /></span>
<div style="float: left; padding-left: 10px;"><span style="color: red;">Stickybar with Facebbok and Google plus one button</span></div>
<div style="float: right; padding-right: 0px;">
<p style="font: bold 12px arial; float: left; margin: 5px;">Liked us?</p>
<iframe style="overflow: hidden; width: 80px; height: 21px;" src="http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2F&lt;span style=&quot;background-color: yellow; color: black;&quot;&gt;bloggerclub&lt;/span&gt;&amp;send=false&amp;layout=button_count&amp;width=80&amp; show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" frameborder="0" scrolling="no" width="320" height="240"></iframe>

</div>
</div>

 You can write any thing your choice by replacing the red text.

 Replace blogger club with your Facebook Fan Page Username  and replace our blog link with yours.

Save your template you are done!!!.

Visit your blog and see top of your blog.

Enjoy dear and get more traffic.

Best of luck!