LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Social Sharing / Website / Website Social Sharing » Lite Loading Social Sharing Buttons Without Any JavaScript

Lite Loading Social Sharing Buttons Without Any JavaScript

Lite Loading Social Sharing Buttons Without Any JavaScript

Hi, this time we are with a new code that is actually for a social sharing widgets. Its a alternate of official social sharing button that are 99.99% in JavaScript or JQuery that can make your site load time too hight but here we have the same feature in HTML-CSS only. Here there is no JavaScript or JQuery added in our code. Yet It coded in official way but with hidden tricks. In real official social sharing buttons are too heavy so a normal site owner who want his site superfast can’ do it so still he want to add social sharing as its the most wanted code in new er of web designing or blogging.

In our codes, there are many mentioned-able features like we have this code for two platform. You can add it in blogger and website too. In blogger, you don’t have to edit any code, Just copy paste because it will do the rest as official buttons do. In website, you have to add your that page url that you want to share or on which page you added it.

So without any more preface, here just have a look on the screenshoot in the above image and click below to see the live DEMO. After liking these, have a look in the feature list of this widget and et the code of your desired platform from below.

Features:

1.) Lite, Quick And Fast Loading.
2.) Top Sites Like Facebook, Twitter, GooglePlus, LinkedIn, PinIt Button Added.
3.) No JavaScript Or JQuery.
4.) Work With Cross Browsers.
5.) No Platform Limitation.
6.) Pure HTML-CSS Coded.
7.) Short Coded.
8.) Available For Blogger And WebSites.
9.) Auto Detect Every Page URL In Blogger.
10.) Just Have To Add One Time In Blogger Template.
11.) In Website, You Have To Add Different URL Manually.
12.) Stylish Design Of Original Colors Codes.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search <data:post.body/> Code.
7.) Now Copy The Below Code And Paste It After The Above Code..
8.) Click “Save Template” And Done.

<!-- This Is A Copyright "Lite Loading Social Sharing Buttons" Widget Codes And Owned By EXEIdeas, Use It With HTML Copyright Comment And Don't Try To Theft It Otherwise... -->
<style type="text/css">
/*
Lite Loading Social Sharing Buttons
Copyright (c) 2014 EXEIdeas International - support@exeideas.com
View Tutorial At: www.exeideas.com
----------------------------------------------- */
#exe_light_share{padding:5px;height:20px;}
.exe_light_share_DIV{text-align:center;width:120px;padding:5px 0px;float:left;margin-left:5px;color:#fff;text-decoration:none;}
.exe_facebook-like{background-color:#3b5998;}
.exe_facebook-share{background-color:#3b5998;}
.exe_twitter-tweet{background-color:#00aced;}
.exe_pintrest-pin{background-color:#cb2027;}
.exe_googleplus-share{background-color:#dd4b39;}
.exe_linkedin-share{background-color:#007bb6;}
</style>
<div id="exe_light_share">
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target="_blank" title="Share This Post On Facebook" class="exe_facebook-share exe_light_share_DIV">Send</a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target="_blank" title="Tweet This Post On Twitter" class="exe_twitter-tweet exe_light_share_DIV">Tweet</a>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target="_blank" title="Share This Post On GooglePlus" class="exe_googleplus-share exe_light_share_DIV">G+Share</a>
<a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.thumbnailUrl' target="_blank" title="Pin This Post On Pintrest" class="exe_pintrest-pin exe_light_share_DIV">Pin It</a>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet' target="_blank" title="Share This Post On LinkedIn" class="exe_linkedin-share exe_light_share_DIV">InShare</a>
</div>
<!-- This Is A Copyright "Lite Loading Social Sharing Buttons" Widget Codes And Owned By EXEIdeas, Use It With HTML Copyright Comment And Don't Try To Theft It Otherwise... -->

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between “<body></body>” Anywhere.
3.) Save It, Now You Are Done.

<!-- This Is A Copyright "Lite Loading Social Sharing Buttons" Widget Codes And Owned By EXEIdeas, Use It With HTML Copyright Comment And Don't Try To Theft It Otherwise... -->
<style type="text/css">
/*
Lite Loading Social Sharing Buttons
Copyright (c) 2014 EXEIdeas International - support@exeideas.com
View Tutorial At: www.exeideas.com
----------------------------------------------- */
#exe_light_share{padding:5px;height:20px;}
.exe_light_share_DIV{text-align:center;width:120px;padding:5px 0px;float:left;margin-left:5px;color:#fff;text-decoration:none;}
.exe_facebook-like{background-color:#3b5998;}
.exe_facebook-share{background-color:#3b5998;}
.exe_twitter-tweet{background-color:#00aced;}
.exe_pintrest-pin{background-color:#cb2027;}
.exe_googleplus-share{background-color:#dd4b39;}
.exe_linkedin-share{background-color:#007bb6;}
</style>
<div id="exe_light_share">
<a href="http://www.facebook.com/share.php?u=http://www.exeideas.com" target="_blank" title="Share This Post On Facebook" class="exe_facebook-share exe_light_share_DIV">Send</a>
<a href="http://twitter.com/share?url=http://www.exeideas.com/" target="_blank" title="Tweet This Post On Twitter" class="exe_twitter-tweet exe_light_share_DIV">Tweet</a>
<a href="https://plus.google.com/share?url=http://www.exeideas.com/" target="_blank" title="Share This Post On GooglePlus" class="exe_googleplus-share exe_light_share_DIV">G+Share</a>
<a href="http://pinterest.com/pin/create/button/?url=http://www.exeideas.com/" target="_blank" title="Pin This Post On Pintrest" class="exe_pintrest-pin exe_light_share_DIV">Pin It</a>
<a href="http://www.linkedin.com/shareArticle?url=http://www.exeideas.com/" target="_blank" title="Share This Post On LinkedIn" class="exe_linkedin-share exe_light_share_DIV">InShare</a>
</div>
<!-- This Is A Copyright "Lite Loading Social Sharing Buttons" Widget Codes And Owned By EXEIdeas, Use It With HTML Copyright Comment And Don't Try To Theft It Otherwise... -->

Customization:

1.) In Blogger Code, You Don’t Have To Edit Anything. 🙂
2.) In Website Codes, You Have To Add Your Desired URL Instead Of http://www.exeideas.com/.
3.) Save And Done.

Last Words:

This is what we have. If you liked it then share it with your friends and leave your comment and if you still have any quires then feel free to ask us. Thanks to be with us, will be with you on next codes. Be with us…

You Like It, Please Share This Recipe With Your Friends Using...

4 Responses to “Lite Loading Social Sharing Buttons Without Any JavaScript”

  1. NICE BLOG I GOT SO MANY NEW THINGS FROM THIS ARTICLE THIS WILL HELP MY BLOG SEO http://guruofmovie.blogspot.in

Leave a Reply

Your email address will not be published. Required fields are marked *