Flat Social Share Button for Blogger - install this widget in your blog. In this tutorial i will share, how to install flat social share button in blogger like above image. This is simple social share widget for blogger. Sometimes some users looking for a unique, minimal, flat and simple social share buttons for their blog. In this blogger tutorial i will share a awesome and most popular CSS social share button for blogspot blog.
Flat Social Share Button for Blogspot Blogger
A social share buttons is a important part in every blog. Its the greatest way to increase every blog traffic. When users are found your blog post in helpful then they will to share your posts on social media. In your blog's has a attractive social share icons, then they easily share your content in their account.
Also Read: Animated Social Share Button For Blogger with CSS
Importance of Social Share Button - No need explain about importance of social share button. However saying, a social share button can grow up visitor for your blog. Social share button help to holding visitor in your blog. Every blogger have must need to add social share button in their blog. Cause, it's a great method to increase blog traffic. Now a days, social media is easiest and common method to communicate each others. So, you should got a much number of visitors from social media.
Now come to the main part. In this tutorial i share with you this important widget. Follow the below steps.
Step1: Go to Blogger Dashboard > Template > Edit HTML and copy past below CSS code before </style>
/* CSS Share Button */
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;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:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.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}
Step2: Now past below code before </head> tag.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Step3: Now add this code right after <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='sharepost'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + 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='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
</ul>
</div> </b:if>
Now Save Template.
That's it. Now refresh page and see results. If you found any problem, then inform me on comment section and keep sharing our posts. Thanks you...
¿Demo?
ReplyDeleteMy apology, This widget will be like above image... :)
DeleteBlog a 5 barer moto acha. kon tate bosabo. Ak ata kaj korta ca na
ReplyDeleteআপনি Edit HTML এ দিয়ে এই কোডটি সার্চ করুন। তারপর এটার নিচে শেয়ার বাটনের কোড গুলো বসিয়ে দিন।
ReplyDeleteWhere do I paste the first set of code? You say before style. Where is it?
ReplyDeleteGo to Blogger Dashboard > Template > Edit HTML and find Style
DeleteI cannot find and style tag. Please advise.
DeleteI can only find head, script and body closing tags.
DeleteThen try to find ]]> and past above CSS code before following tag and Save Template
DeleteWe are in the same delima, no style in blogger default template I thing, which there is help, I need this
DeleteStill no luck. It's not working. I am using Blogger's own template Simple.
ReplyDeleteKaj korca na... default ja share button aca sa gula asha.
ReplyDeleteager gulo remove kore nen
DeleteHow To?
DeleteFind previous share buttons code and remove it.
DeleteI only need FB, Twitter and G+, how?
ReplyDeleteThanks...
ReplyDeleteআমি তেমন HTML জানি না একটা প্রশ্ন টেমপ্লেটে তো অনেক জায়গায় /style আছে
ReplyDeleteএখন কোন /style এর আগে CSS কোডটা পেষ্ট করবো?
Use any one Style tag
DeleteThis comment has been removed by the author.
ReplyDeletebro give me techtunes like chain tune system
ReplyDeleteHere's a link to our share buttons: https://shareaholic.com/pub...
ReplyDeleteYou can add all the buttons you need, and have them appear on the top and/or bottom of posts.
For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
http://www.thesocialmediaha...
Of course, you can customize your buttons in a variety of ways in your Settings.
If you have any technical issues, feel free to reference our support center (http://support.shareaholic.... but if you can't find what you're looking for, submit a request and we'll be glad to help.