Monday, May 1, 2017

How To Add Flat Social Share Buttons To Blogger

Flat social Share Buttons For Blogger is a nice widget that allows your blog visitors to share your post on their social accounts. If you are looking for a Good social share widget for Blogger then you should try this one. By adding this widget you can show social share button at the end of each post of your Blog. And adding this widget is really easy for those who can edit their templates. Because we can't add this widget from the layout. So follow the below steps for adding this cool social share widget to Your Blogger Blog. You may like: How To Add A Signature To Blogger Post In Just A Few Minutes.
Flat Social Share Buttons For Blogger



Add Flat Social Share Buttons To Blogger Blog

  1. Go to the Blogger.com and log in your account.
  2. From the list of your blogs select your desired blog where you want to show social share buttons.
  3. Now from your Blog dashboard click on the theme
  4. From the next page click on the Edit HTML button.  
    Flat Social Share Buttons For Blogger
  5. Now you will see your template code click anywhere on the code. 
    Flat Social Share Buttons For Blogger
  6. And paste the following code anywhere between <head></head>.


<style>/* CSS Share Button */
.sharepost li{list-style:none;width:20%;padding:0;}
.sharepost li a{opacity:0.9;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#333;border:double #fff;}
.sharepost li .twitter{background-color:#0793fe;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Now Press CTRl+F and search <data:post.body/> After finding this tag paste the following code right after the <data:post.body/>. Finally click on the save template button.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='sharepost'>
                <ul>
                <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
                <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
                <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
    <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
                <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
                </ul>
         </div> </b:if>

That's it Flat social share Button is added to your Blog. Now Go to any post and see how is looking. Read Also: 10 Responsive Cute And Best Blogger Template Free Download

Thanks for reading my this post and keep visiting for more useful Blogger tricks, Blogger widgets, and templates. If you have any question about this post feel free to ask me by dropping your comment below.



6 comments:

  1. This comment has been removed by a blog administrator.

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

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

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

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

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

    ReplyDelete

Template Designed By 92TRICKS © Copy Rights All Right Receved
Scroll to Top