Preview
Installation
- 1. Go to Blogger Dashboard.
- 2. Back up your template
- 3. Click Edit HTML
- 4. Click Proceed
- 5. Click Expand Widget Template
- 6. Now find the below code using Ctrl + F
<b:includable id='post' var='post'>
- 7. Now below it paste the following code :
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.SS_social_floating{
position: fixed;
top: 21%;
margin-left: -65px;
float: left;
width: 65px;
background-color: white;
padding: 5px 0 0px 0px;
border: 1px solid #ddd;
z-index: 9999px !important;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.SS_social_floating .SS_side_social_button{
margin-bottom:5px;float:none;
height:auto;width:60px;
}
.SS_social_floating .st_twitter_vcount,
.SS_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.SS_social_floating .st_fblike_vcount{
margin-left:5px;
}
.SS_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.SS_social_floating .chicklets,
.SS_social_floating .stMainServices {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0tKsM7XQShiHhZ8xRzji-hGHsJY2zak1uye5sl6HnJwZz9aJw0Ky8ns_OozuKhHQ4q6Gn1k4fNbnioVmOqK7mpr_V4P_9CyJFdIjdoBDnKzDg0jqsLj-iEbCO7Qux8MLEys2hf6qglCgl/s400/gc_social_sprite.gif') no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0tKsM7XQShiHhZ8xRzji-hGHsJY2zak1uye5sl6HnJwZz9aJw0Ky8ns_OozuKhHQ4q6Gn1k4fNbnioVmOqK7mpr_V4P_9CyJFdIjdoBDnKzDg0jqsLj-iEbCO7Qux8MLEys2hf6qglCgl/s400/gc_social_sprite.gif') !important;
}
.SS_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.SS_social_floating .stButton_gradient{
border:none !important;
}
.SS_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.SS_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}
.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}
.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.SS_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}.SS_social_floating .st_pinterest_vcount{
margin-left:5px;
}
.SS_social_floating .st_pinterest_vcount .st-pinterest-counter{
background-position:0 -19px !important;
}
.SS_social_floating .st_pinterest_vcount .stBubble_count{
color:#FF0505;
background-color:#fbf8f8 !important;
}
.SS_social_floating .st_pinterest_vcount .stBubble{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlqzLRYPKsyxVfYktyym5soGV-9-3FDPxsZZRaEX7XebCKmiV1dSgWHhJ_uFeJcvabTgQT1n21pgaih-vk0yqzHAlCH5i7Wt0DSpuYBixgj3AiG_U6JFak_fvTtYy3nP6BGfLR4b_KH4tz/s400/bubble_arrow_pinterest.png') !important;
}
.st_pinterest_vcount{
margin-bottom: 0px;
display: block;
}
</style>
<div class='SS_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='selvasathya'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: "Sathya Selvaraj",
ui_header_color: "#ffffff",
ui_header_background: "#0080FF"
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://sathyaselvaraj.blogspot.in/2013/04/floating-social-widget-for-blogger.html'>Widgets</a></p>
</div>
</b:if></b:if>
- 8. Now replace "selvasathya" with your twitter username,
- 9. Thats it. Save and enjoy floating social bar on your post page J