1. First login to Blogger, then goto Theme.
2. Now proceed to Backup/Restore & 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)
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
7. Now search for </head> & copy and paste the below CSS codes above the </head> tag.
<style type='text/css'>
.mobileshare {
text-align: center;
}
.mobileshare 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;
}
.mobileshare a:hover{
background: #314a83;
}
.mobileshare1 {
text-align: center;
}
.mobileshare1 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%;
}
.mobileshare1 a:hover{
background: #be3f2b;
}
.mobileshare2 {
text-align: center;
}
.mobileshare2 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%;
}
.mobileshare2 a:hover{
background: #0092cc;
}
.mobileshare3 {
text-align: center;
}
.mobileshare3 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%;
}
.mobileshare3 a:hover{
background: #ae181a;
}
.mobileshare5 {
text-align: center;
}
.mobileshare5 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%;
}
.mobileshare5 a:hover{
background: #hover-color;
}
</style>
</b:if>
8. I have provided two ways to add these share buttons to your blog.
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 below the above codes. Again search for the codes if you find these codes again; then copy and paste the Html codes 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 below the above codes. Again search for the above code; if you find again the copy and paste the Html codes again 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 below the codes. Again search for the above code; if you find these code line again; then copy and paste the Html codes below the above codes.
<div>
<p><strong>Share this:</strong></p>
<mobileshare class='mobileshare'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Facebook Share'> <i class='fa fa-facebook'/></a></mobileshare>
<mobileshare1 class='mobileshare1'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Google Share'><i class='fa fa-google-plus'/></a></mobileshare1>
<mobileshare2 class='mobileshare2'>
<a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @your twitter adress - "' rel='nofollow' target='_blank' title='Tweet This'><i class='fa fa-twitter'/></a></mobileshare2>
<mobileshare3 class='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'> <i class='fa fa-pinterest'/></a></mobileshare3>
<mobileshare5 class='mobileshare5'>
<a class='whatsapp' expr:href='"whatsapp://send?text="+ data:post.title + " " + 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></mobileshare5>
<br/>
<a href='https://sandeep980.blogspot.com/2017/10/how-to-add-social-media-share-buttons.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 name in place of my twitter user name @your twitter adress
0 Comments