Add a floating Horizontal Share Bar in the top and bottom of your blog

Tweet

Floating Share Bars are very common to find in some of the high ranking blogs. Previously, I have shown how to implement vertical floating share buttons. In this post, I will show how to implement a horizontal one.

(1) For the top of your page

i) Go to your blogger account,

ii) Template --> Edit HTML

iii) Using Ctrl+f, find </head>

iv) Copy and paste the following code just above the </head> line. 

<style type="text/css">
.stpulldown-gradient
{
background: #E1E1E1;
background: -moz-linear-gradient(top, #E1E1E1 0%, #A7A7A7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E1E1E1), color-stop(100%,#A7A7A7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E1E1E1', endColorstr='#A7A7A7',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #E1E1E1 0%,#A7A7A7 100%); /* opera */
color: #636363;
}
#stpulldown .stpulldown-logo
{
height: 40px;
width: 300px;
margin-left: 20px;
margin-top: 5px;
background:url("http://sd.sharethis.com/disc/images/Logo_Area.png") no-repeat;
}
</style>

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

v) Using Ctrl+f, find </body>

vi) Copy and paste the following code just before the </body> line.

<script>
var options={ "publisher": "ur-bd45e231-8be6-db76-dbdb-28d0cb64ea85", "scrollpx": 50, "ad": { "visible": false}, "chicklets": { "items": ["facebook", "twitter", "linkedin", "googleplus", "email"]}};
var st_pulldown_widget = new sharethis.widgets.pulldownbar(options);
</script>

vii) Save your template and view the blog to see the effect.

(2) For the bottom of your page

i) Go to your blogger account,

ii) Template --> Edit HTML

iii) Using Ctrl+f, find </head>

iv) Copy and paste the following code just above the </head> line.

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

v) Using Ctrl+f, find </body>

vi) Copy and paste the following code just before the </body> line.

<script>
var options={ "publisher": "ur-1e735022-c023-9902-6db0-989155f12d84", "logo": { "visible": false, "url": "", "img": "http://sd.sharethis.com/disc/images/demo_logo.png", "height": 45}, "ad": { "visible": false, "openDelay": "5", "closeDelay": "0"}, "livestream": { "domain": "", "type": "sharethis", "customColors": { "widgetBackgroundColor": "#FFFFFF", "articleLinkColor": "#006fbb"}}, "ticker": { "visible": true, "domain": "", "title": "", "type": "sharethis", "customColors": { "widgetBackgroundColor": "#9d9d9d", "articleLinkColor": "#00487f"}}, "facebook": { "visible": false, "profile": "sharethis"}, "fblike": { "visible": true, "url": "http://www.facebook.com/techcodes"}, "twitter": { "visible": false, "user": "sharethis"}, "twfollow": { "visible": true, "url": "http://twitter.com/lahaulseth"}, "custom": [{ "visible": false, "title": "Custom 1", "url": "", "img": "", "popup": false, "popupCustom": { "width": 300, "height": 250}}, { "visible": false, "title": "Custom 2", "url": "", "img": "", "popup": false, "popupCustom": { "width": 300, "height": 250}}, { "visible": false, "title": "Custom 3", "url": "", "img": "", "popup": false, "popupCustom": { "width": 300, "height": 250}}], "chicklets": { }, "shadow": "gloss", "background": "#000000", "color": "#FFFFFF", "arrowStyle": "light"};
var st_bar_widget = new sharethis.widgets.sharebar(options);
</script>

vii) Save your template and view the blog to see the effect.

Leave a comment for any problems. 

Posted in: blogging tips , CSS , HTML , Javascript , SEO