BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

How To Add Social Share Buttons for Blogger

1 comment

How To Add Social Share Buttons for Blogger
Today, We are going to learn "How To Add Social Share Buttons to Your Blogger Blog"
Social Share Buttons are very important for every blog as they are helpful in sharing your blog content on various social networks.

In Last Posts I've explained about "How To Add ShareThis Widget to Blogger" , "Stylish PO.ST Social Share Widget for Blogger" "How To Add AddThis Share Widget to Blogger" You should check above Social Share Widgets as they are really awesome.

This Social Share widget is fully optimized for Social Share with Custom CSS Effects, you can have a look at our live demo.

Live Demo


Liked above Share Widget? Don't Forget to Share it first.

This is Custom Social Share Widget by AllBloggerTricks.com my Friend Dhiraj Barnwal has designed this widget thanks to him.

How To Add This Widget To Your Blog ?
Just  follow our easy steps :
1. Go To Blogger > Template > Edit HTML.
2. Find The following line by pressing CTRL + F
<data:post.body/>
3. After finding this code , paste the following code.
<h2 class='title' style='background-color: white; border-bottom-color: rgbundefined238, 238, 238); border-bottom-style: solid; border-bottom-width: 4px; color: #333333; font-family: &apos;Bree Serif&apos;, serif; font-size: 19px; font-weight: normal; line-height: 20px; margin: 0px 0px 12px; padding: 0px; text-align: center;'>
Share This Post</h2>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<link href='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-social-anime.css' rel='stylesheet' type='text/css'/>
<ul class='abt-social' id='abt-cssanime'>
<li class='abt-facebook'>
<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.openundefinedthis.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='abt-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='abt-googlebuzz'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' target='_blank' title='Post on Google+'><strong>Google+</strong></a>
</li>
<li class='abt-stumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>
<li class='abt-digg'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Digg this!'><strong>Digg</strong></a>
</li>
<li class='abt-delicious'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>
<li class='abt-linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
</li>
<li class='abt-reddit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>
<li class='abt-technorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this on Technorati'><strong>Technorati</strong></a>
</li>
</ul>
</b:if>
<br />
<span style="font-family: Georgia, Times New Roman, serif; font-size: xx-small;"><a href="http://techethix.blogspot.com/2013/07/how-to-add-social-share-buttons-for-blogger.html" target="_blank">Get This Widget</a></span>
<br />
3. Now Click Save Template.
Note : You can Change Share This Post to any desired text you want.

Don't forget to drop your comment here and also you can Share this post. Keep updated by Subscribing Us via Email.

Want More Fun? Join TechEthix

1 comment :

Powered by Blogger.