Tuesday, July 26, 2016

How to add floating social media sharing buttons in your blogger?

Social Media Sharing blog or website is the most attractive and popular Floating Social Media Sharing. As can be seen in almost the entire top level of this is Social Media Sharing button. This blog styling, as well as to increase the firing of your Social Media will help to share blog posts easily. As a result, Social Media increases the chances of getting a lot of visitors

Today, I will share it with the Floating Social Media Sharing widget Facebook Like, Twitter Share, Google+ and StumbleUpon buttons have been added. Like and Share buttons in the separate box will count. Moreover, you can also add more buttons on it.

Add Floating Social Share Buttons To Blogger

Do you want to know how to add floating share buttons on Blogger? Follow the steps I am going to list out.
Step 1: As you all know the first step is logging into blogger.com and being in the dashboard of the blog on which you want to add the floating share buttons.
Step 2: We are not going to edit your template. So, you don’t have to worry about anything. Here, you will be adding a widget to the blog that can be removed anytime.
Click on the Layout link on the left sidebar of the dashboard.


Step 3: Now you can see all the widgets you have placed on your blog so far. Click on Add widget link (no matter from where you click, be it sidebar, after the post, header or footer).


Step 4: You will be provided with a number of predesigned widgets. For adding a customized code to integrate a new widget, you must select HTML/Javascript from the options.



Step 5: Two fields are what you will see in this step. One is Title and the next one is Content. You can leave the first field as empty because a title is not needed for a floating share bar.

  •  Paste the following code inside the Content field and click Save. 

      <style type="text/css">
    #social-buttons {
    position:fixed;
    bottom:30%;
    margin-left:-740px;
    float:left;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background-color:#fff;
    padding:0 0 2px 0;
    border:2px solid #000000;
    z-index:10;
    }
    #social-buttons .button-share {
    float:left;
    clear:both;
    margin:5px 5px 0 2px;
    }
    </style>
    <div id='social-buttons' title="Get This From www.prozokti.com">
    <div class='button-share' id='like' style='margin-left:7px;'>
    <div id="fb-root"></div>
    <script>(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/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
    </div>
    <br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='Tutorialgift' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
    <br />
    <div class='button-share' style="margin-left: 3px;" id='su'>
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
    </div>
    <div class='button-share' style='margin-left:3px;' id='gplusone'>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    <g:plusone size="tall"></g:plusone>
    </div>
    <div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://www.tutorialgift.com/2016/07/how-to-add-floating-social-media_27.html">widget</a></div></div></div>

          Conclusion

          • Hurray. You now know how to add floating social share buttons on Blogger.

          Note: You can change the vertical alignment by putting a value instead of 15% and horizontal alignment by inserting altering -721px (check the highlighted texts). And it will lead to malfunctioning of the social share bar if you proceed to edit the code other than those two alignment items. Username Enter your Twitter account in place of the "tutorialgift". If you like, you can delete the Widget of a button. If you wish to be able to take without having to add new buttons.
          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