How to add social media share buttons to blogger posts [Rounded Buttons]

By admin On Jan 12, 2019

In this newsletter i can tell you a way to add rounded share buttons to blogger blogspot. i have already brought these share buttons in my weblog; you can test it for a demo. i’ve introduced share buttons like fb, twitter, google plus, Pin & whatsapp. in case you need greater proportion buttons then advise me i will add more percentage buttons. i have furnished below Html & Css codes. simply upload these codes cautiously. So comply with the under steps to feature those proportion buttons on your weblog.

Steps to feature rounded share buttons to blogger:

[Before modifying codes first take a backup of your blogger template. because if you may do any mistake then you can repair it]

First login to Blogger, then click on [Theme button].
Now click on Backup/repair on pinnacle of the web page & download your template.

Now click on on Edit Html.

click on anywhere in the code location & press for Ctrl+F key. you may get a searchBox.

Now input <head> in searchBox and search it.

Then copy & paste the below codes after <Head> the tag.

CSS Codes:

<b:if cond=’data:blog.pageType == “item”‘> </b:if>
[ads-post]

upload share buttons coding under post footer:

Now look for this code <div class=’post-footer’> and paste the Html codes below the above codes. again search for the above code; in case you find again the copy and paste the Html codes again after the above codes.

in case you can not locate these codes on your template then look for this code <div class=’post-footer-line post-footer-line-1′> and copy and paste the Html codes underneath the codes. once more search for the above code; if you locate those code line again; then reproduction and paste the Html codes below the above codes.

HTML Code

<b:if cond=’data:blog.pageType == “item”‘> </p><br /> <div><br /> <p><strong>Share this:</strong></p><br /> <p><mobileshare> <a expr:href='”http://www.facebook.com/sharer.php?u=” + data:post.url + “&t=” + data:post.title’ rel=”nofollow noopener noreferrer” target=’_blank’ title=’Facebook Share’> <i class=’fa fa-facebook’/></a></mobileshare><mobileshare1> <a expr:href='”https://plus.google.com/share?url=” + data:post.url + “&t=” + data:post.title’ target=’_blank’ title=’Google Share’ rel=”noopener noreferrer”><i class=’fa fa-google-plus’/></a></mobileshare1><mobileshare2> <a expr:href='”https://twitter.com/intent/tweet?url=” + data:blog.url + “&text=” + data:post.title + ” via @raidastgeer – “‘ rel=”nofollow noopener noreferrer” target=’_blank’ title=’Tweet This’><i class=’fa fa-twitter’/></a></mobileshare2><mobileshare3> <a expr:href='”http://pinterest.com/pin/create/button/?url=” + data:post.url + “&media=” + data:post.thumbnailUrl + “&description=” + data:post.title’ target=’_blank’ title=’Pin It’ rel=”noopener noreferrer”> <i class=’fa fa-pinterest’/></a></mobileshare3><mobileshare5> <a expr:href=””whatsapp://send?text=”+ data:post.title + ” ” + data:post.url” href=”//webdevelopmentscripts.com” rel=”nofollow noopener noreferrer” target=”_top” title=”Share to whatsapp”><i class=’fa fa-whatsapp’/></a></mobileshare5> </div><br /> <p></b:if>

Now goto Html part codes; that you have added in your theme and add your twitter name in place of my twitter user name @raidastgeer

Then save your theme

Share button

Send me an email when this page has been updated

Comments

0 comments