Add Social Media Sharing Buttons Below Every Post in Blogger

0
19

Just writing and publishing interesting articles on your blog won’t overnight start bringing in that tons of readers to the blog. You need to put in some extra effort in making sure your visitors have the ability to share the contents they find interesting in your blog without having to leave the blog. Sharing your blog posts and articles helps create more awareness about the blog thus bringing in that traffic you have been expecting your interesting and very informative articles to be generating. One of the best means to keep this in check is to add share buttons below every your blog’s post so that once visitors are done reading the article and found it to be interesting, they can just simply share it with others on the different social media by clicking on a logo representing the such social media they want to share to.

This simple widget which has a fade out effect is made purely of CSS and can be added below every post in your blog by following the procedure as I have outlined below;

  • First of all, log into your Blogger Dashboard.
  • Go to Template >>> Edit HTML.
  • Click anywhere inside the Edit HTML page and with the help of Ctrl + F, search for the below code

]]></b:skin>

  • Copy the CSS code below and paste just above/before it.
.EdHelper img{ width: 45px; height:45px; float: left;

border: 5px solid #ccc; margin: 2px; -webkit-

transition: margin 0.5s ease-out;

-moz-transition: margin 0.5s ease-out; -o-

transition: margin 0.5s ease-out; }

.EdHelper img:hover { margin-top: -8px; zoom: 50px;

opacity: 0.5; -webkit-transition: transition:

opacity .15s ease-in-out}
  • Next search for

<data:post.body/>

OR

<div class=’post-footer-line post-footer-line-1′>

OR

<div class=’post-footer-line post-footer-line-2′>

OR

<div class=’post-footer-line post-footer-line-3′>

  • Copy the code below and paste just below/after it.
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.url == data:blog.homepageUrl'><div

class='EdHelperLab'><span style='color:

red;'><u><i><span style='font-size: 30px; text-

decoration: blink; opacity:10.5; border-

radius:10px;border:10px solid

#EE872A;'><b>Share this post with your friends and

family</b></span></i></u></span></div>

<br/>

<div class='EdHelper'>

<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.open

(this.href,&apos;sharer&apos;,&apos;toolbar=0

,status=0,width=626,height=436&apos;); return

false;' rel='nofollow'><img src='https://www.educativehelper.com/wp-content/uploads/2019/10/EdHelper_facebook.png' title='facebook'/></a>

<a expr:href='&quot;http://www.twitter.com/

share.php?v=4&amp;src=bm&amp;u=&quot; +

data:post.url + &quot;&amp;t=&quot; +

data:post.title ' onclick='window.open

(this.href,&apos;sharer&apos;,&apos;toolbar=0

,status=0,width=626,height=436&apos;); return

false;' rel='nofollow'><img src='https://www.educativehelper.com/wp-content/uploads/2019/10/EdHelper_twitter.png' title='twitter'/></a>

<a expr:href='&quot;http://

www.plus.google.com/share.php?

v=4&amp;src=bm&amp;u=&quot; +

data:post.url + &quot;&amp;t=&quot; +

data:post.title ' onclick='window.open

(this.href,&apos;sharer&apos;,&apos;toolbar=0

,status=0,width=626,height=436&apos;); return

false;' rel='nofollow'><img src='https://www.educativehelper.com/wp-content/uploads/2019/10/EdHelper_googleplus.png' title='google'/></a>

<a expr:href='&quot;http://www.pinterest.com/

share.php?v=4&amp;src=bm&amp;u=&quot; +

data:post.url +   &quot;&amp;t=&quot; +

data:post.title ' onclick='window.open

(this.href,&apos;sharer&apos;,&apos;toolbar=0

,status=0,width=626,height=436&apos;);

return false;' rel='nofollow'><img src='https://www.educativehelper.com/wp-content/uploads/2019/10/EdHelper_pinterest.png' title='pinterest'/></a>

<a expr:href='&quot;http://

www.stumbleupon.com/share.php?

v=4&amp;src=bm&amp;u=&quot; +

data:post.url +   &quot;&amp;t=&quot; +

data:post.title ' onclick='window.open

(this.href,&apos;sharer&apos;,&apos;toolbar=0

,status=0,width=626,height=436&apos;);

return false;' rel='nofollow'><img src='https://www.educativehelper.com/wp-content/uploads/2019/10/EdHelper_stumbleupon.png' title='stumbleupon'/></a>

<a expr:href='&quot;http://www.Delicious.com/

share.php?v=4&amp;src=bm&amp;u=&quot; +

data:post.url +   &quot;&amp;t=&quot; +

data:post.title ' onclick='window.open

(this.href,&apos;sharer&apos;,&apos;toolbar=0

,status=0,width=626,height=436&apos;);

return false;' rel='nofollow'><img src='https://www.educativehelper.com/wp-content/uploads/2019/10/EdHelper_delicious.png' title='delicious'/></a>

<a expr:href='&quot;http://www.Linkedin.com/

share.php?v=4&amp;src=bm&amp;u=&quot; +

data:post.url +   &quot;&amp;t=&quot; +

data:post.title ' onclick='window.open

(this.href,&apos;sharer&apos;,&apos;toolbar=0

,status=0,width=626,height=436&apos;);

return false;' rel='nofollow'><img src='https://www.educativehelper.com/wp-content/uploads/2019/10/EdHelper_linkedin.png' title='linkedin'/></a>

<a expr:href='&quot;http://www.reddit.com/

share.php?v=4&amp;src=bm&amp;u=&quot; +

data:post.url +   &quot;&amp;t=&quot; +

data:post.title ' onclick='window.open

(this.href,&apos;sharer&apos;,&apos;toolbar=0

,status=0,width=626,height=436&apos;);

return false;' rel='nofollow'><img src='https://www.educativehelper.com/wp-content/uploads/2019/10/EdHelper_reddit.png' title='reddit'/></a>

<a expr:href='&quot;http://

www.technorati.com/share.php?

v=4&amp;src=bm&amp;u=&quot; +

data:post.url +   &quot;&amp;t=&quot; +

data:post.title ' onclick='window.open

(this.href,&apos;sharer&apos;,&apos;toolbar=0

,status=0,width=626,height=436&apos;);

return false;' rel='nofollow'><img src='https://www.educativehelper.com/wp-content/uploads/2019/10/EdHelper_technorati.png' title='technorati'/></a>

  </div></b:if></b:if>
  • Finally click on Save Template and you are done.

Any questions? Feel free to ask. Enjoy!