How to Create Social Share Buttons Without Javascript
If you feel loading a blog a bit heavy or slow, one of the causes is the presence of javascript. Maybe one of them is social share buttons on your blog.
Usually we use social share buttons from third parties like AddThis.com and others.Well to reduce the loading loading blog, you can replace this social share buttons with social share button without javascript.
This means that share buttons are built using CSS code by including links for sharing articles to social media such as Facebook, Twitter, and Google+.
If you are interested in trying to use it, please copy the code below:
1. Social Share Buttons Without Javascript With Images.
<b:if cond='data:blog.pageType == "item"'>
<div style='border-top:3px solid #ccc; border-bottom:1px solid #ddd; width:100%;height:35px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>
<div style='float:left;padding:6px 0 10px 0;margin-right:15px;font:bold 14px Arial;color:#777'>
<strong>Share this article</strong> :
</div>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank' title='Share to Facebook'><img alt='Facebook' height='30' src='https://lh3.googleusercontent.com/-ErgrNe7VaTM/T4ywntBsxGI/AAAAAAAAJHA/79YM4bBqnf4/s57/Facebook%2520alt%25202.png' width='30' title='Share to Facebook'/></a> <a expr:href='"http://twitter.com/share?url=" + data:post.url' style='margin-left:10px' target='_blank' title='Share to Twitter'><img alt='Twitter' height='30' src='https://lh5.googleusercontent.com/-jZW7xfQfo5c/T4ywo5r5yBI/AAAAAAAAJHM/4ZtK0i8IXyA/s57/Twitter%2520alt%25204.png' width='30' title='Share to Twitter'/></a> <a expr:href='"https://plus.google.com/share?url=" + data:post.url' style='margin-left:10px' target='_blank' title='Share to Google+'><img alt='Google+' height='30' src='https://lh5.googleusercontent.com/-l682ZOmTPl8/T4ywn1Z13TI/AAAAAAAAJG8/ncHs61veQOo/s57/Google%252B%2520alt%25202.png' width='30' title='Share to Google+'/></a>
</div>
</b:if>
2. Social Share Buttons Without Javascript Pure CSS.
<b:if cond='data:blog.pageType == "item"'>
<div style='border-top:3px solid #ccc;border-bottom:1px solid #ddd;width:100%;height:24px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>
<div style='float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#777'>
<strong>Share this article</strong> :
</div>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank' title='Share to Facebook' style='color: #fff; background: #3b5998; text-decoration: none; border: 1px solid #313c7d; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;'>Share on fb</a> <a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank' title='Share to Twitter' style='color: #fff; background: #4099FF; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;'>Tweet</a> <a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank' title='Share to Google+' style='color: #fff; background: #c0361a; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;'>Share on G+</a>
</div>
</b:if>You just replace your old social share buttons HTML code with one of the code above.
Actually you can create more, can be with your own pictures or add hover effect, and others, so it looks might be better.Hopefully with this power of creativity and your imagination grows.
If you want more complete visit his blog mas Fajrin Ilham H. blog is Master Jin HERE .
If you want more complete visit his blog mas Fajrin Ilham H. blog is Master Jin HERE .
Related Articles
