Get Latest Tweaks via Facebook, Twitter, Google+ & FeedBurner
    Subscribe:
    Subscribe Twitter Facebook

    Friday, June 3, 2011

    Add Floating Social Media Sharing Buttons To Blogger

    SOCIALIZE IT →

    Add floating social media blogger

    1. Login to your Blogger account.
    2. Go to Design > Page Elements.
    3. Click Add A Gadget.
    4. In Add A Gadget window, select HTML/Javascript .
    5. Copy the code below and paste it inside the content box.


    <!-- floating share bar Start cybertweaks.com-->
    <div class='post-outer'>
    <style> 
    .mbt_social_floating{ 
        position:fixed; bottom:10%; margin-left:-80px; 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; 
    } 
    .mbt_social_floating .mbt_side_social_button{ 
        margin-bottom:5px; 
        float:none; 
        height:auto; 
        width:60px; 
    } 
    .mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{ 
        margin-left:5px; 
    } 
    .mbt_social_floating .st_fblike_vcount{ 
        margin-left:5px; 
    } 
    .mbt_social_floating .stButton_gradient{ 
        background:none !important; 
        height:21px !important; 
        padding-left:0 !important; 
    } 
    .mbt_social_floating .chicklets, .mbt_social_floating .stMainServices { 
        background:url('http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/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('http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif') !important; 
    } 
    .mbt_social_floating .st_twitter_vcount .st-twitter-counter{ 
        background-position:0 -58px !important; 
    } 
    .mbt_social_floating  .stButton_gradient{ 
        border:none !important; 
    } 
    .mbt_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; 
    } 
    .mbt_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; 
    } 
    .mbt_social_floating .stBubble{ 
        background-position: 21px 31px !important; 
        height:35px !important; 
    } 
    </style>
    <div class='mbt_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'></script>
    <script type='text/javascript'>stLight.options({onhover:false, doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
    <span class='st_fblike_vcount' displaytext=''></span>
    <span class='st_twitter_vcount' displaytext='' st_via='CyberTweaks'></span>
    <div style='margin:5px 0 0px 0;'>
    <center><a class='pin-it-button' count-layout='vertical' href='http://pinterest.com/pin/create/button/?url=http://www.cybertweaks.com/2011/06/add-floating-social-media-sharing.html'>Pin It</a>
    <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'></a>
    <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
    <script type='text/javascript'> 
    function run_pinmarklet() { 
    var e=document.createElement('script'); 
    e.setAttribute('type','text/javascript'); 
    e.setAttribute('charset','UTF-8'); 
    e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999); 
    document.body.appendChild(e); 
    } 
    </script>
    </center>
    </div>
    <div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''></span>
    </div>
    <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
    <a class='addthis_counter'></a>
    </div>
    <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'></script>
    <script type='text/javascript'> 
    var addthis_config = { 
         ui_cobrand: "CyberTweaks", 
    ui_header_color: "#ffffff", 
         ui_header_background: "#0080FF" 
    } 
    </script>
    <span class='st_email' displaytext=''></span>
    
    <div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.cybertweaks.com/2011/06/add-floating-social-media-sharing.html">widget</a></div>
    <!-- Do not remove this link -->
    
    </div>
    <!-- floating share bar End -->
    

    1. Save the gadget.
    2. Drag the gadget and reposition it under Blog Posts gadget.
    3. Click Save button on upper right corner.

    Update: we have made little changes in this code. new pinterest button and bookmark and share button have been added.


    6 comments:

    1. مشكووووووووووور
      http://top-new-now.blogspot.com/2012/06/add-floating-social-media-sharing.html
      تم التطبيق والشرح باللغة العربية

      ReplyDelete
    2. I will definitely bookmark this blog for future reference and further viewing. Thanks a bunch for sharing this with us! certainly informative and contains useful content

      Web developer Singapore

      ReplyDelete
    3. I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.Jang Jobs Ads

      ReplyDelete
    4. YES! Great piece, keep up the terrific work. This is the type of information that should gain recognition for it’s craft. More writers should learn from you. This is right on the money. great site i must say....very enjoyable stuff is placed here in a very appropriate way...thanks for publish this site…thanks for publish it..its a good attempt..
      Become Ordained Online

      ReplyDelete
    5. A great article written with great hard work...i must say....Thanks for posting this article. I am definitely tired of struggling to find relevant and intelligent commentary on this subject. Everyone nowadays seem to go to extremes to either drive home their viewpoint or suggest that everybody else in the globe is wrong. Thanks for your concise and relevant insight a great work of your which shows...I like your site its quite informative and i would like to come here again as i get some time from my studies. i would like to invite my other friends to this site, as you have done a great job.i must say...keep it up guys..Thanks for the information.I apriciate each and every point of your article.Really great information .Keep sharing …..Well done

      career opportunities

      ReplyDelete