To achieve this goal first thing we can do is providing social sharing buttons to the readers in our post so that they can easily share our content with more audience without and hassle. There are lot of social media sharing buttons available in the blog-o-sphere but they are not so attractive and eye catching that can encourage readers to share our content. So, today I bring a very stylish and fancy share buttons with twitter and Facebook This gadget is surely works to increase your fan base on major social media sites and help you to gain natural back links to grow your blogging business. So, let’s play the game. Find more widgets here.
Add Social Media Buttons to Blogger
To add this powerful social sharing widget in your blog you have to perform below steps.- Go to Blogger >> Edit HTML >> Expand Widget Templates.
- Now press Ctrl+F and search below code in your template.
- Now paste below code just before/above it.
- Now search this piece of code in your template.
- And paste below code just after it.
- Save the template.
- You are done!
]]></b:skin>
/*--- Social Buttons by www.BloggerTipsTricks.com --- */
ul.share li.twitter {
width: 140px;
height: 40px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_XhnWEHztb8hLvfIISP8VE1PV0cV84QlexGjnw7mb9YFC6X7C7BsGCXXQCbrQZZA_QxjEBQfwQ1xeyRuc6keSXGzR4xo8QW0au31Pbv_LJxjp__Bb29He1gm8DOgy4qgpXh6tVHAMqpa/s1600/share-twitter.png) no-repeat scroll 0 0;
padding: 52px 0 0 14px;
}
ul.share li.facebook {
width: 128px;
height: 40px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-EXZVnlGwbGqhexIjhbccmJpWM2nXUOVgxYNR4ApxmMLA6BBv94Eh-3GPF-hg7OOINEAEeHyxPBPM0nm7_bZ1ds85S09I0aG4Xm19QITgIYiVtF2m9__6f17AjBFo3auDY4elnKwCgUwP/s1600/share-facebook.png) no-repeat scroll 0 0;
padding: 51px 0 0 17px;
}
<data:post.body/>
<ul class="share">
<li class="twitter">
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement (s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</li>
<li class="facebook">
<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=1amp;appId=357975364299768";
fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</li></ul>
This is not working. The icons are not showing
ReplyDeleteMay I see your blog URL please? Did you follow all the steps carefully?
Delete