Advertise Here

29

Here is the best (for me) floating social media buttons gadget that have a clean and simple design. Many Professional blogger too use this gadget..

Design 1: 




Click to Enlarge


How To Add It:


  • Go to your blogger dashboard
  • Select your blogger blog
  • Click on Layout from Drop Down menu (shown in picture)


  • A new Window appear
  • Click on Add gadget
  • And select HTML/JavaScript
  • Next Box of HTML/JavaScript will appear (shown in picture)
    


  • Now the box of HTML/JavaScript will appear when you click on the box.
  • Now paste the following code to install the gadget to your blog.

Code For Design 1:


<!-- Scrolling social Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a><a href="
http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html">Widget</a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script>
<!-- Scrolling social Button END --> 

Design 2:


Click to Enlarge


How To Add It:


  • Go to your blogger dashboard
  • Select your blogger blog
  • Click on Layout from Drop Down menu (shown in picture)


  • A new Window appear
  • Click on Add gadget
  • And select HTML/JavaScript
  • Next Box of HTML/JavaScript will appear (shown in picture)
    


  • Now the box of HTML/JavaScript will appear when you click on the box.
  • Now paste the following code to install the gadget to your blog.

Code For Design 2:



<!-- Scrolling social Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_delicious"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_digg"></a>
<a class="addthis_button_orkut"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_compact"></a><h6>
<a href="http://http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html">Widget</a></h6>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script>
<!-- Scrolling social Button END --> 

Design 3 :


Click to Enlarge


How To Add It:


  • Go to your blogger dashboard
  • Select your blogger blog
  • Click on Layout from Drop Down menu (shown in picture)


  • A new Window appear
  • Click on Add gadget
  • And select HTML/JavaScript
  • Next Box of HTML/JavaScript will appear (shown in picture)
    


  • Now the box of HTML/JavaScript will appear when you click on the box.
  • Now paste the following code to install the gadget to your blog.

Code for Design 3:


<!-- Scrolling social Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_delicious"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_digg"></a>
<a class="addthis_button_orkut"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_compact"></a><h6>
<a href="
http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html">Widget</a></h6>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script>
<!-- Scrolling social Button END --> 





Post a Comment Blogger Disqus

  1. I am also have Sevida theme as like as your page.Can you tell me how to add slider like your site.I can't.

    its' urgent.

    technologypublisher.blogspot.com

    ReplyDelete
    Replies
    1. Heyya Tanvir,

      Just see the manual provided with the template. go to the template folder>>documentations>>and open index file. All the details are given there..

      Keep Visiting..!!

      Delete
  2. super widget added on my blog - http://priyakitchenette.blogspot.in/

    ReplyDelete
  3. Social profile links are most important for any website to bring much social points to your social accounts. It never been easier to do so but adding code to the site or blog can bring much positive response to your site.
    website design

    ReplyDelete
    Replies
    1. Ya... and that is why this widget is recommended from my side...

      Delete
  4. Code works great for desktop Thanks!!! But the tweet button seems to take up a lot of space in the mobile version. Have you noticed that?

    ReplyDelete
    Replies
    1. well it depends on your cellphone's browser...

      Delete
  5. I would like to say this is an excellent site that I have ever come across. Very informative. Please write more so that we can get more details.

    Science technology news

    ReplyDelete
    Replies
    1. Hey suzane... thanks and stay tuned for more updates on PTP... :)

      Delete
  6. Thank you! It was very easily explained and it took me no time to update my blog! Thanks again :)

    ReplyDelete
  7. After so much struggle you made my day. Love you :)

    ReplyDelete
  8. How can i change title color in html?

    ReplyDelete
  9. I like your informative post..and also like your presence of way...Am got the best information from your post...Thank you for sharing the useful and helpful information...Website Design Companies in Bangalore | Website Development COmpanies in Bangalore

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. It's Very Easy Hossen. You have to go to corresponding css file there you have to search with your class.there you have to change the color.
    http://webiinnovation.com/website-design-company-bangalore.html

    ReplyDelete
  12. Thanks for sharing the insight. Social sharing icons are very important to have for any kind of information, be it personal personal, products or services based company. Ecommerce Development Services | Website Design Company, Bangalore India | Wordpress Website Development Service

    ReplyDelete
  13. Thank you for taking time & sharing the insights. Really a great post. Will share and bookmark the same. Appreciate the effort in educating us. Web design company bangalore | Web development company in bangalore

    ReplyDelete
  14. Very Good information which your have been shared Nice blog website design in bangalore / Ecommerce design in bangalore

    ReplyDelete
  15. Ultimate post and very informative, you have explained well with detailed explanation. You can also share these type of content on sites like OS Business Opportunities

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. Thanks for the info. It is good and easy technique to implement in blog or website - website design and web development - CWGS

    ReplyDelete
  18. Wow awesome information, actually i was looking for this feature from so long, Finally got it thanks. WebDreams India

    ReplyDelete
  19. The post is very informative. It is a pleasure reading it. I have also bookmarked you for checking out new posts. You can also share this valuable content on other platforms such as Blogspot, the famous Wordpress site, the innovative Tumblr site and also the sites like Medium and the famous Live Journal site.

    ReplyDelete
  20. Thank you for sharing this information. Come back again for more interesting stuff like this post. You can share this informative post in Social Media sites like the worldwide famous Facebook, the all-time favorite Twitter and the most interesting Google Plus site, business site LinkedIn and also to the Infographic site Pinterest to generate more traffic to your blog post.

    ReplyDelete
  21. I have analyzed your post. Excellent details you did here. I enjoyed reading your blog, and it is both instructional and enjoyable. Share this most interesting post in other sites like Free Samples 411, the innovative Asaim Japan site and also to the Jfissures site followed by Automation Associaltes LLC and lastly to the sites like Johny Adams sites.

    ReplyDelete

Get Free Updates...!!!

 
Top