Skip to main content

How to add Floating Social share buttons to blogger

How to add Floating Social share buttons to blogger

No one denies the importance of social sharing in recent world. Social Media play significant role to bring quality traffic to your website or blog. Today’s post, I am introducing your best vertical social sharing buttons to bloggers. Floating buttons have the edge of the header or footer static buttons. It catches the eyes of your post reader and he can easily share it. Moreover, it's a vertical float with the page and your readers easily share it with a single click. According to analyses of social share button providers, vertical floating buttons more share as compared to static buttons.

How to add Floating Social sharing Buttons,

  • Firstly, make the backup of your blogger template. 
  • Login to your blogger dashboard, >>go to Template>>Edit HTML 
  • Find <html leave a space and add the following code after it. 
                            xmlns:fb=http://ogp.me/ns/fb# Now it looks like that
                       <html xmlns:fb=http://ogp.me/ns/fb#
  • If it already exists, you don’t need to do it.
  •  Now search for “<data:post.body/>” and if it finds more than one, Now find for “<div class='post-footer-line post-footer-line-1'/>” 
  •  In addition, just below it paste the following code.
<b:if cond=’data:blog.pageType == &quot;item&quot;’><!–Start Floating Share Buttons with Pinterest–><style type=’text/css’>#dc-float {position:fixed; bottom:15%; right:10px; float:left;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border:1px solid #BBBBBB;background-color:#FFFFFF;-webkit-box-shadow: #B3B3B3 5px 5px 5px;-moz-box-shadow: #B3B3B3 5px 5px 5px;box-shadow: #B3B3B3 5px 5px 5px;padding:0 0 2px 0;z-index:10;}#dc-float .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}.fb_share_count_top {width:48px !important;}.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}</style><div id=’dc-float’ title=’Share with your friends’><div class=’sbutton’ id=’rt’><a class=’twitter-share-button’ data-count=’vertical’ href=’http://twitter.com/share’>Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=’text/javascript’/></div><div class=’sbutton’ id=’su’><script src=’http://www.stumbleupon.com/hostedbadge.php?s=5′/></div><div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’>&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;&lt;script&gt;(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0
];  if (d.ge
tElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=167544263382192&quot;;  fj
s.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;<div class=’fb-like’ data-layout=’box_count’ data-send=’false’ data-show-faces=’false’ data-width=’48′/></div><div class=’sbutton’ id=’gplusone’><script src=’https://apis.google.com/js/plusone.js’ type=’text/javascript’/><g:plusone size=’tall’/></div><div class=’sbutton’ id=’gb’><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 nru_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></div><div class=’fb_button_share’>&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;&lt;script&gt;(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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=112973755438933&quot;; // appId must be validfjs.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;&lt;fb:share-button type=&quot;box_count&quot;&gt;&lt;/fb:share-button&gt;</div><br/><!–End Floating Share Buttons with Pinterest–></b:if>



Now save the template and you add the floating buttons in your blogger.

The default sharing buttons appear on the right side, if you want to show on the left side, find dc-float {position:fixed; bottom:15%; right:10px; float:left;

Replace above code with it.
dc-float {position:fixed; bottom:15%; left:10px; float:left;
At last, I hope you ike the post and share it on social media
Labels:

Comments

Post a Comment

Popular posts from this blog

How to increase backlinks in 2015? Free backlink builder

A backlink is one type of algorithm that refers to incoming links to your site or pages. Backlinks play significant role to improve your search engine ranking and get more audience. They help to earn good money from the internet. Today’s post I am introducing top 10 backlinks building sites in 2015. Many online websites allow you to build some backlinks for your site. Let us view the sites to create free backlinks Imtalk . Org Imtalk basically a forum and offers many tools. It submits your sites more than 2500 pages. It offers many worthy tools like site directory submitter, bookmarks page etc. Imtalk create pages on different sites with a backlink to your site. Freebacklinkcreator . Com It submits your site thousands of do follow backlink websites. It offers speedy backlinks to your blog or website. A2z-Seo-Backlinks.Com It is a powerful tool to submit your link on different sites. The great feature of this backlink generator is that it also ping your link to search eng
13 comments
Read more

Best web hosting sites for WordPress in 2015

It is important for us to have the best website or blog for the business promotion. A good blog or website depends upon the good hosting company. Only a right web hosting company fulfills our dreams. Thousands of web hosting companies are available in their global market and their number raising day by day. Among those who many companies available in the market, in this article I introduce you top 10 hosting companies. 1. BlueHost It is always recognized as the leader in the industry. Its rates very cheap and low-cost. It is approximately 20,000 website or blog hosts every month in the market. They are in business since 1996 and become the one of the best hosting company. It has excellent servers, customer support center and good hosting packages. It offers unlimited disk space, unlimited domain hosting, unlimited email accounts and many more. Another beneficial feature is that it offers a good referral program for earning money. 2. Hostgator It is one of the greatest webs
Post a Comment
Read more

10 Best Creative Domain Name Generator Tools

Domains are very significant part of a commercial enterprise and its branding. Attractive and easy domain name also helps to get huge traffic. If you want to create a new website or blog and do not have an idea about selecting a good domain name, then there is an easy solution to your problem. In this post, I describe 10 Best Creative Domain Generator Tools that help you to get ideas for your new domain. 1. NameBoy This is a worthy and reliable creative domain name generator tool. Thousands of people all over the world use NameBoy. Boy recommends you numerous domain name when you entered primary and secondary word of your domain. You can also find sold domain names by this generator. 2. DomainsBot DomainsBot an immediate and trusted domain name generator tools. It helps you to find the domains based on extensions. The main advantage is that you can check premium domains and free domain lookup to get owner’s information. 3. Dot-o-mator Dot-o-motor is much relating to NameBo
Post a Comment
Read more