Add Fixed Sticy Bar At Top With Close And Share buttons In Blogger

This tutorial will show you How to add Add Fixed Sticy Bar At Top With Close And Share buttons In Blogger. So I’ve created this sticky bar embedded with share and close buttons for Blogger with which visitors can easily share posts directly from the bar.

Fixed Sticky bar at top with Share Buttons Demo

LIVE DEMO

How To Add Fixed Sticky bar at top with Share Buttons To Blogger

• Go to Blogger Dashboard --> Layout --> Add A Gadget
• Select HTML/Javascript and paste the code shown below in it

<style type='text/css'>
#latesthack-stickybar {
background: none repeat scroll 0 0 #AC0101;
border-bottom: 2px solid #F3F3F3;
box-shadow: 0 2px 7px #000000;
color: #FFFFFF;
font-size: 10px;
height: 30px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 100;
}
#latesthack-stickybar a {
color: #FFFFFF;
line-height: 30px;
list-style: none outside none;
text-decoration: none;
}
</style>
<script src="http://js.howtouses.com/blogger/latesthackstickybar1.js"></script>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<script src='//platform.twitter.com/widgets.js' type='text/javascript'/>
<div id="latesthack-stickybar">
<div style="float:right;padding:4px;">
<a href="#" id="latesthackclose"  onclick="return false;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioFQxBVKiWAmjQk5vU9amsUy4folIUcd0_lfY_SUggVu4Uy3JjAxgXJQhASvL4cm1vuBznpYzG55fSHm6m7iFC3_FJ17ESdthTkg9LXc11XpflgvY00zorz7CPxzdOBoJS23eGCpdbmIQ/s1600/cancel.png"/>
</a>
</div>
<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-via='latesthack' data-lang='en'></a></div>
<div style="float:right;padding:4px;">
<g:plusone size="medium"></g:plusone>
</div>
<div style="float:right;padding:4px;">
<fb:like layout="button_count" show_faces="false" ></fb:like>
</div>
<div style="float:left;padding:5px 0 0 76px;font-family: 'droid sans',sans-serif;font-size: 15px;font-weight: bold;">
Your Text Here</div>
</div>

• Replace latesthack with your twitter username and Your Text Here with the text you want to show on sticky bar

Like it? Share it.