Saturday, September 19, 2020
Home Blogging Tips & Tweaks Add Social Media Sharing Buttons Below Every Post in Blogger

Add Social Media Sharing Buttons Below Every Post in Blogger

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!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments