Welcome back to another interesting article. In this article, we are going to discuss how to add floating share buttons for blogger, without any third party java-scripts.
Most of the bloggers depend upon websites like share this etc but these websites utilize the javascript to load the widget. We know that blogger API has some limitation we cant optimize at the back end like in WordPress.
Most of the bloggers depend upon websites like share this etc but these websites utilize the javascript to load the widget. We know that blogger API has some limitation we cant optimize at the back end like in WordPress.
Javascript is always the problem behind lazy loading and customized theme would be already loaded with so many scripts, so it is best to avoid further java-scripts. In this article, I would like to share the non-java-script HTML based floating share buttons for blogger.
But here we are utilizing the normal CSS to integrate the floating social share button for blogger and thus don't worry about javascript anymore.
∎ High-Speed Loading
∎ No Javascript
∎ No Stylesheet
Table of Contents
Floating Share Buttons for Blogger
We all know that third-websites like share this utilizes the javascript and stylesheet embedded in our blog to integrate the floating share button. If you are aware of the website loading factors like render blocking scripts, most of the third party scripts would contain this element.But here we are utilizing the normal CSS to integrate the floating social share button for blogger and thus don't worry about javascript anymore.
∎ High-Speed Loading
∎ No Javascript
∎ No Stylesheet
Floating Social Media Buttons HTML Code
Before going to the code make sure that you have already configured font-awesome icons in blogger. If not please paste the below link in between <head> and </head/> and proceed. Font awesome icons are required for all social icons so don't forget to add it.
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
1.Copy the below code and paste below the <div class='post-footer'> in your theme.
You will find 2 post-footer div elements, go for the second one.
<div class='float-pcweek'><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'/></a><a class='whatsapp' expr:href='"whatsapp://send?text=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/></a><a class='telegram' expr:href='"https://telegram.me/share/url?url=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-telegram'/></a>
</div>2. Add some CSS to make it float and align vertically.
.float-pcweek a
{
display: block;
text-align: center;
padding: 8px;
color: white;
font-size: 20px;
}
.float-pcweek a:hover{background-color:#fff;color:#222}
.float-pcweek .facebook{background-color:#003471}
.float-pcweek .twitter{background-color:#00BFF3}
.float-pcweek .pinterest{background-color:#C6393D}
.float-pcweek .linkedin{background-color:#0077B5}
.float-pcweek .whatsapp{background-color:#27D367}
.float-pcweek .telegram{background-color:#2FA7DB}★ Keep in mind that the margin: -71px is configured for my theme and if you encountered any error please increase the value. So let me show you how you can do this without any difficulty. After that add the below CSS for icons too.
.float-pcweek a
{
display: block;
text-align: center;
padding: 8px;
color: white;
font-size: 20px;
}★ This might mess up with our mobile view so it is better to hide this in small screen devices. So add below CSS too
@media only screen and (max-width: 768px)
{
.float-pcweek{display:none}
}◩ So if you can't understand the above procedure please watch the below tutorial. It is explained in detail.
Final Minified CSS
If you don't want to modify the code, please copy the minified CSS and paste it above the </b:skin>..float-pcweek{position:fixed;margin:-71px;top:50%;z-index:99;background-color:#000;}.float-pcweek a:hover{background-color:#fff;color:#222;}.float-pcweek .facebook{background-color:#003471;}.float-pcweek .twitter{background-color:#00BFF3;}.float-pcweek .pinterest{background-color:#C6393D;}.float-pcweek .linkedin{background-color:#0077B5;}.float-pcweek .whatsapp{background-color:#27D367;}.float-pcweek .telegram{background-color:#2FA7DB;}.float-pcweek a{display:block;text-align:center;padding:8px;color:white;font-size:20px;}@media only screen and (max-width:768px){.float-pcweek{display:none;}}Video Demonstration of Floating Share Buttons for Blogger
Here is the video tutorial on how to add floating share button for blogger without javascript and third-party website. And consider subscribing our channel for more upcoming blogging tutorials like this.
Coming Soon!
Conclusion
I hope that this article helped you to add java-script free floating share buttons for blogger. By using this you can minimize the loading speed. If you find this article is helpful please share to your fellow blogger.
You can freely comment on your doubts and queries below. If you liked this article, then please share this with your friends. You can also find us on Twitter, Facebook, YouTube, and Instagram.
DISQUS
Disqus Comments
FACEBOOK
Disclaimer : Muhammed Fasil K is a participant in the Amazon Services LLC Associates Program, an affiliate program to earn commission by advertising and linking sites to Amazon products.