How to create floating social media widget for Blogger

There are so many methods available on internet; however the one that I am listing below is quite simple and more effective.

Steps – Considering you have already an account on www.blogger.com

1)  Go to your blogger account.

2)  Click on your desired blog name from the dashboard.

3)  Click on Template à Edit HTML à Proceed and then tick the Expand Widget Templates.

4)  Find below code.

<b:includable id='post' var='post'>

5)  Paste following code just below the above code.

<!-- Begin floating Social Media Bar blogspothelp4u.blogspot.com -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

    .blogspothelp4u_social_floating

    {

        position: fixed;

        bottom: 10%;

        margin-left: -60px;

        float: left;

        width: 60px;

        background-color: #f7f7f7;

        padding: 5px 0 0px 0px;

        border-top: 1px solid #ddd;

        border-left: 1px solid #ddd;

        border-bottom: 1px solid #ddd;

        z-index: 9999px !important;

        border-radius: 5px;

        -moz-border-radius: 5px;

        -webkit-border-radius: 5px;

    }

    .blogspothelp4u_social_floating .blogspothelp4u_side_social_button

    {

        margin-bottom: 5px;

        float: none;

        height: auto;

        width: 60px;

    }

    .blogspothelp4u_social_floating .st_twitter_vcount, .blogspothelp4u_social_floating.st_plusone_vcount, .st_email

    {

        margin-left: 5px;

    }

    .blogspothelp4u_social_floating .st_fblike_vcount

    {

        margin-left: 5px;

    }

    .blogspothelp4u_social_floating .stButton_gradient

    {

        background: none !important;

        height: 21px !important;

        padding-left: 0 !important;

    }

    .blogspothelp4u_social_floating .chicklets, .blogspothelp4u_social_floating .stMainServices

    {

        background: url(&#39;http://blogspottips4u.googlecode.com/files/blogspothelp4u_social_media.png&#39;) no-repeat !important;

        height: 19px !important;

        width: 45px !important;

        padding: 0 !important;

    }

    .st_email .chicklets

    {

        background-position: 0 -77px !important;

        background-image: url(&#39;http://blogspottips4u.googlecode.com/files/blogspothelp4u_social_media.png&#39;) !important;

    }

    .blogspothelp4u_social_floating .st_twitter_vcount .st-twitter-counter

    {

        background-position: 0 -58px !important;

    }

    .blogspothelp4u_social_floating .stButton_gradient

    {

        border: none !important;

    }

    .blogspothelp4u_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;

    }

    .blogspothelp4u_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;

    }

    .blogspothelp4u_social_floating .stBubble

    {

        background-position: 21px 31px !important;

        height: 35px !important;

    }

</style>

<div class='blogspothelp4u_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='a1ashiish'/>

<div style='margin:5px 0 0px 0;'>

<center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>

<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

<script type='text/javascript'>

function run_pinmarklet() {

var e=document.createElement(&#39;script&#39;);

e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);

e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);

e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);

document.body.appendChild(e);

}

</script> </center>

</div>

<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: &quot;Blogspot Help 4 You&quot;,

ui_header_color: &quot;#ffffff&quot;,

     ui_header_background: &quot;#0080FF&quot;

}

</script>

<span class='st_email' displaytext=''/>

<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'>

<a href='http://blogspothelp4u.blogspot.com/2012/09/floating-social-media-widget-facebook-googleplus-tweet-pinit-for-Blogger.html' style='color:#CAC8C8;'>Widget4u</a></p>

</div>

</b:if>

<!-- End floating Social Media Bar - blogspothelp4u.blogspot.com -->

6)  Above code is customized for my tweeter id, just replace a1ashiish with your tweeter name.

7)  Now save the template by clicking on Save Template.

8)  Just check your blog. J

The original widget has been designed by MBT. I have just enhanced the code.  

Sharing is Caring »»

Tweet