How To Add Responsive Social Media Share Buttons To Blogger Blogspot

In this post i will tell you how to add Responsive Social media share buttons to Blogger Blogspot. Do you have any Blog and want to add share buttons to your Blog; then you are in the right place. Social sites are the best place to get more traffic to any Blog or webistes. The most popular social media's like Facebook and Whatsapp can make your Blog popular within short period of time. So not taking too much time i am telling about these share buttons.

These share buttons are fully Responsive. In smaller screen like Mobile platform these share buttons are shown as smaller icons and in bigger screen like Tables and PC's these are shown as Larger icons. These share buttons are fast loading and not takes too much time to load your page. I have added share buttons like Facebook, Google+, Twitter, Pinterest and Whatsapp. You can add these share buttons below post title or post footer. So follow the below steps to add these share buttons to your Blog.

Also Read: How to add social media share buttons to blogger (Rounded Buttons)

Also Read: How to add custom social share buttons to blogger posts

Steps to add Responsive share buttons to Blogger:-

(Before editing codes first take a backup of your theme. Because if you will do any mistake then you can restore it)

1. First login to Blogger, then goto Theme option

2. Now proceed to Backup/Restore on top of the page & download your file.

3. Now tap on Edit Html.

4. Inside the code area press for Ctrl+F key. You will get a search box.

5. Now enter <head> in search box and search it.

6. Then copy & paste the below codes below the <head> tag. (If you already have these codes in your theme then don't add this)

7. Now search for </head> & copy and paste the below CSS codes above the </head> tag.

CSS codes:-

<b:if cond='data:blog.pageType == "item"'>
 <style type='text/css'>
 /*--------------------------------------------
 Responsive Social Media Share Buttons for Blogger
 Designed by: https://sandeep980.blogspot.in
-----------------------------------------------*/

.s980sharemf  {
 text-align: center;
 }
 .s980sharemf a {
 background: #3a579a;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
margin-left: 15px;
 }
 .s980sharemf  a:hover{
 background: #314a83;
 }
 
.s980sharemg {
 text-align: center;
 }
 .s980sharemg a {
 background: #df4a32;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
 }
 .s980sharemg a:hover{
 background: #be3f2b;
 }
.s980sharemt  {
 text-align: center;
 }
 .s980sharemt a {
 background: #00abf0;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
 }
 .s980sharemt a:hover{
 background: #0092cc;
 }
.s980sharemp  {
 text-align: center;
 }
 .s980sharemp a {
 background: #cd1c1f;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
 }
 .s980sharemp a:hover{
 background: #ae181a;
 }
.s980sharemw {
 text-align: center;
 }
 .s980sharemw a {
 background: #34af23;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
 }
 .s980sharemw a:hover{
 background: #hover-color;
 }

.s980sharecf  {
 text-align: center;
 }
 .s980sharecf a {
 background: #3a579a;
 color: white;
 display: inline-block;
 font-size: 20px;
 padding: 5px 10px 5px 10px;
 text-align: center;
 margin: 0 2px 6px;
border-radius: 5%;
margin-left: 15px;
 }
 .s980sharecf a:hover{
 background: #314a83;
 }

.s980sharecg {
 text-align: center;
 }
 .s980sharecg a {
 background: #df4a32;
 color: white;
 display: inline-block;
 font-size: 20px;
 padding: 5px 10px 5px 10px;
 text-align: center;
 margin: 0 2px 6px;
border-radius: 5%;
margin-left: 15px;
 }
 .s980sharecg a:hover{
 background: #be3f2b;
 }

.s980sharect {
 text-align: center;
 }
 .s980sharect a {
 background: #00abf0;
 color: white;
 display: inline-block;
 font-size: 20px;
 padding: 5px 10px 5px 10px;
 text-align: center;
 margin: 0 2px 6px;
border-radius: 5%;
margin-left: 15px;
 }
 .s980sharect a:hover{
 background: #0092cc;
 }

.s980sharecp {
 text-align: center;
 }
 .s980sharecp a {
 background: #cd1c1f;
 color: white;
 display: inline-block;
 font-size: 20px;
 padding: 5px 10px 5px 10px;
 text-align: center;
 margin: 0 2px 6px;
border-radius: 5%;
margin-left: 15px;
 }
 .s980sharecp a:hover{
 background: #ae181a;
 }

</style>
 </b:if>

8. I have provided two ways to add these share buttons to your blog.

Also Read: How to add Facebook like and share buttons to blogger

If you want to Add these share buttons below your post title then follow the below steps:-

Add share buttons below post title:

Now search for this code <div class='post-header-line-1'/> & copy and paste the below Html codes(Part-1) below the above codes. Again search for the above codes and copy and paste the Html codes(Part-2) below the codes.

If you want to add these share buttons after your post end then follow the below steps to add these share buttons below your post footer.

Add share buttons below post footer:

Now search for this code <div class='post-footer'> and copy and paste the Html codes(Part-1) below the above codes. Again search for the above codes and copy and paste the Html codes(Part-2) below the above codes.

If you cannot find these codes in your theme then search for this code <div class='post-footer-line post-footer-line-1'> and copy and paste the Html codes(Part-1) below the above codes. Again search for the above code line and copy and paste the Html codes(Part-2) below the above codes.

Html Codes(Part-1):-

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div>
<p><strong>Share this:</strong></p>
<s980sharemf class='s980sharemf'>
 <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Facebook Share'> <i class='fa fa-facebook'/></a></s980sharemf>
<s980sharemg class='s980sharemg'>
 <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Google Share'><i class='fa fa-google-plus'/></a></s980sharemg>
<s980sharemt class='s980sharemt'>
 <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @sandeep980blog - &quot;' rel='nofollow' target='_blank' title='Tweet This'><i class='fa fa-twitter'/></a></s980sharemt>
<s980sharemp class='s980sharemp'>
 <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank' title='Pin It'> <i class='fa fa-pinterest'/></a></s980sharemp>
<s980sharemw class='s980sharemw'>
 <a class='whatsapp' expr:href='&quot;whatsapp://send?text=&quot;+ data:post.title + &quot; &quot; + data:post.url' href='whatsapp://send?text=http://webdevelopmentscripts.com' onclick='window.parent.null' rel='nofollow' target='_top' title='Share to whatsapp'><i class='fa fa-whatsapp'/></a></s980sharemw>
<br/>
<a href='https://sandeep980.blogspot.com/2018/09/how-to-add-responsive-social-media.html' rel='nofollow' target='_blank' style='font-size: 13px; float: right; margin: 5px;'>Share Buttons Widget</a>
<br/>
</div>
</b:if>

Html Codes(Part-2):-

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div>
<p><strong>Share this:</strong></p>
<s980sharecf class='s980sharecf'>
 <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Facebook Share'> <i class='fa fa-facebook'/> Share </a></s980sharecf>
<s980sharecg class='s980sharecg'>
 <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Google Share'><i class='fa fa-google-plus'/> Share  </a></s980sharecg>
<s980sharect class='s980sharect'>
 <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @sandeep980blog - &quot;' rel='nofollow' target='_blank' title='Tweet This'><i class='fa fa-twitter'/> Share  </a></s980sharect>
<s980sharecp class='s980sharecp'>
 <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank' title='Pin It'> <i class='fa fa-pinterest'/> Share  </a></s980sharecp>
<br/>

<a href='https://sandeep980.blogspot.com/2018/09/how-to-add-responsive-social-media.html' rel='nofollow' target='_blank' style='font-size: 13px; float: right; margin: 5px;'>Share Buttons Widget</a>
  <br/>
</div>
</b:if>

9. Now goto Html part codes; that you have added in your theme and add your twitter username in place of my twitter username @sandeep980blog

10. Then save your theme. Now Goto mobile theme and choose custom mobile theme in the drop down menu and save it. Now visit your blog & see how's it looking.

Share this:

Share Share Share Share

OffersTricks.in

Sunday 24 March 2019