Sunday, July 31, 2016

Add a floating social media sharing buttons (V-2) widget for your Blogger site

A few days ago, the same kind that we share with you as a Floating Social Media Sharing Button, which you can also come here to see- How to add floating social media sharing butttons in your blogger?The title of this post is a good idea; it's an improved version of him, which we write as V-2. This is the last post sharing buttons that we have gotten better, the more attractive you will feel. We'll try to make it better in the future.



Today, I will share it with Floating Social Media Sharing widget Facebook Like, Facebook Share, Twitter Share, Pinterest Pin Button, Google+ and sharing Add This button has been added to nearly 300 items. These buttons are designed in a variety of different Like and Share box will count. Moreover, you can also add more buttons on it. You can customize it to your wishes.

How to use this widget?

To add it to your web design ideas will not be any different. Who has not dwelling on any day blog more easily be able to add it.

  1. First, log in to your Blogger account.
  2. Then go to your blog dashboard.
  3. Add a Gadget from the left side of the Layout options to clean.
  4. The HTML / JavaScript and clean.
  5. Now, copy the following codes HTML / JavaScript paste into the box.
    <style>
    .prozokti_social_floating{
    position: fixed;
    bottom: 40%;
    margin-left:-60%;
    float: left;
    background-color: #fff;
    border-top: 1px solid #F3F3F3;
    border-left: 1px solid #F3F3F3;
    border-bottom: 1px solid #F3F3F3;
    width: 70px;
    padding: 5px 0px 0px 3px;
    border-radius: 5px;
    }
    .prozokti_social_floating .prozokti_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
    }
    .prozokti_social_floating .st_twitter_vcount, .prozokti_social_floating.st_plusone_vcount, .st_email{margin-left:5px;}
    .prozokti_social_floating .st_fblike_vcount{margin-left:5px;}
    .prozokti_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
    }
    .prozokti_social_floating .chicklets, .prozokti_social_floating .stMainServices {
    background:url('http://3.bp.blogspot.com/-DluDWPztONI/VVH8B72yY7I/AAAAAAAAEbU/Hxl8ocf8H84/s1600/buttons.png') no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
    }
    .st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url('http://3.bp.blogspot.com/-DluDWPztONI/VVH8B72yY7I/AAAAAAAAEbU/Hxl8ocf8H84/s1600/buttons.png') !important;
    }
    .prozokti_social_floating .st_twitter_vcount .st-twitter-counter{background-position:0 -58px !important;}
    .prozokti_social_floating .stButton_gradient{border:none !important;}
    .prozokti_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;
    }
    .prozokti_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;}
    .prozokti_social_floating .stBubble{background-position: 21px 31px !important;height:35px !important;}
    .prozokti_social_floating .st_pinterest_vcount{margin-left:5px;}
    .prozokti_social_floating .st_pinterest_vcount .st-pinterest-counter{background-position:0 -19px !important;}
    .prozokti_social_floating .st_pinterest_vcount .stBubble_count{color:#FF0505;background-color:#fbf8f8 !important;}
    .prozokti_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('http://2.bp.blogspot.com/-bqL6dppWC8Q/VVH8B7vnRCI/AAAAAAAAEbY/oadlOC-ILGA/s1600/bubble_arrow.png') !important;
    }
    .st_pinterest_vcount{margin-bottom: 0px;display: block;}
    </style>

    <div class='prozokti_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>
    <div style='margin:0px 0 0px 10px;'>
    <div class='fb-like' data-action='like' data-href='' data-layout='box_count' data-share='true' data-show-faces='false'></div>
    </div>
    <div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''></span>
    </div>
    <span class='st_twitter_vcount' displaytext='' st_via='prozokthi'></span>
    <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#pubid=xa-4fb7d6f86229e7da' type='text/javascript'></script>
    <script type='text/javascript'>var addthis_config = {ui_click: true}</script>
    </div>

        • Now click Save. That's all.

        Note
         
        After completing all steps in the right way at the top of Facebook button does not appear, then the following code to your Blogger Template </ body>tag, click on the Save Template paste. 
        <div id='fb-root'/>
        <script>
        //<![CDATA[
        (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
        //]]>
        </script>

        Customization

        1. Code on bottom: 40% of the Vertical alignment. This is what you are trying to keep on top or below. This is likely to increase as the number goes up to the top.
        2. Margin-left: -60% of the Horizontal alignment. What are you trying to keep it on the right or the left. This is likely to increase as the number will move to the left.
        3. Change Twitter setting, Simply replace "Tutorialgift" with your own twitter name.
        Previous Post
        Next Post

        0 comments: Post Yours! Read Comment Policy ▼
        লক্ষ্য করুনঃ
        পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

        Post a Comment

         
        Copyright © Poisa Click Registered Surf. Modified: PC Team, Server Hosted: GSE