How to Add Custom Share Button in Blogger
Hey Guys! Welcome back to Techly Series website.
Assuming You are observing the Custom Share Button Script on blogger. This is the Right Place to you. Since You can use this Script for free.
Today, in this article, I will Discuss with you about How to Add Custom Share Button in Your Blog Post.
How to Add
So, to add Custom Share Button on blogger you need to follow the following process below precisely.
What's more, with the help of these steps, you can easily add this feature in your blogger website.
- You will go to your - Blogger Dashboard
- Go to Theme
- Go to - Edit HTML
- Search - </head> or </head>
- Copy and paste on top of </head> or </head> the css of the share button that you want to add
- Paste the HTML code of the share button where you want to add that share button
Below is the CSS and HTML code of each share button provided
<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Fbbutton{background:#3b5998}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>
<a expr:href='"https://www.facebook.com/sharer.php?u=" + data:blog.url.canonical' rel='nofollow noreferrer'><button class='Sharebutton' id='Fbbutton'><i class='fa fa-facebook'></i>Facebook</button></a>
<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Whbutton{background:#25D366}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>
<a expr:href='"https://api.whatsapp.com/send?text=" + data:blog.url.canonical' rel='nofollow noreferrer'><button class='Sharebutton' id='Whbutton'><i class='fa fa-whatsapp'></i>Whatsapp</button></a>
<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Twbutton{background:#1DA1F2}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>
<a expr:href='"https://twitter.com/share?url=" + data:blog.url.canonical' rel='nofollow noreferrer'><button class='Sharebutton' id='Twbutton'><i class='fa fa-twitter'></i>Twitter</button></a>
| Telegram
<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Tebutton{background:#0088cc}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>
<a expr:href='"https://t.me/share/url?url=" + data:blog.url.canonical + "&text=" + data:post.title' rel='nofollow noreferrer'><button class='Sharebutton' id='Tebutton'><i class='fa fa-telegram'></i>Telegram</button></a>
<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Embutton{background:#008080}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>
<a expr:href='"mailto:?subject=" + data:post.title + "&body=" + data:blog.url.canonical'><button class='Sharebutton' id='Embutton'><i class='fa fa-envelope-o'></i>Email</button></a>
<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Pibutton{background:#E60023}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>
<a expr:href='"https://pinterest.com/pin/create/button/?url=" + data:blog.url.canonical + "&media=" + data:blog.postImageUrl' rel='nofollow noreferrer'><button class='Sharebutton' id='Pibutton'><i class='fa fa-pinterest-p'></i>Pinterest</button></a>
| Tumblr
<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Tubutton{background:#34526f}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>
<a expr:href='"https://www.tumblr.com/share/link?url=" + data:blog.url.canonical' rel='nofollow noreferrer'><button class='Sharebutton' id='Tubutton'><i class='fa fa-tumblr'></i>Tumblr</button></a>
<style>
.Sharebutton{width:130px;height:45px;font-size:14px;padding:5px 5px 5px 0;color:#fff;text-shadow:0 0 5px #000;text-shadow:0 0 5px #000;border:0;border-radius:3px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);transition:all 0.3s cubic-bezier(.25,.8,.25,1);outline:none}
.Sharebutton:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transform:translateY(-4px)}
.Sharebutton i,.Sharebutton span{margin:0 7px 0 0}
#Libutton{background:#0077b5}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>
<a expr:href='"https://www.linkedin.com/sharing/share-offsite/?url=" + data:blog.url.canonical' rel='nofollow noreferrer'><button class='Sharebutton' id='Libutton'><i class='fa fa-linkedin'></i>Linkedin</button></a>
Final Words
You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.
I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.
Assuming you experience any issues while copying this script you can impart me by Telegram and I'll attempt to help.
Post a Comment