In this article i will tell you how to add rounded share buttons to blogger blogspot. I have already added these share buttons in my blog; you can check it for a demo. I have added share buttons like facebook, twitter, google plus, Pin & whatsapp. If you want more share buttons then suggest me i will add more share buttons. I have provided below Html & Css codes. Just add these codes carefully. So follow the below steps to add these share buttons to your blog.
Steps to add rounded 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 click on Theme.
2. Now click on Backup/Restore on top of the page & download your file.
3. Now click on Edit Html.
4. Click on anywhere in 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.
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.
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 @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.
){kind=link}
0 Comments
What do you have to say?
Emoji