Super light Social sharing buttons for blogger

2:19 AM DigitFreak 1 Comments

Social Sharing buttons are very crucial part of any website, but the problem is they slow down your website considerably. All the scripts that is being loaded to render the social buttons of different websites, it is bound to add extra time to overall website load time.
When we first started DigitFreak, there were very few notes and guidelines that could point us to the right directions. We started our journey with Google Blogger service (called blogspot back then) as well. We learned many things on our way that lead us to what we are today. This is the first post of DigitFreak Blogger Lab, and we wanted it to be something that could help every existing or newbie blogger.
If you are using blogger, be proud — you have made a right decision.
This is the superlight social sharing button that utilizes only a CSS file of approximately 9KB. No images or extra scripts are used to make these code visible on every post. Your website will never slow down again because of scripts and extra set of codes that social buttons load on your website.

Instructions:

To have these buttons on your blog, simply Go to Template >> click on "Edit Html"

and post this code just before </head> section.
<script src='https://raw.githubusercontent.com/lovedigit/bloggersharebutton/master/sharebutton.js'></script>


Put this code before ]]></b:skin>

/*Share Plugin*/
.plugin-share{display:block;padding-bottom:0;font-size:50px;font-weight:700;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;border:0 solid #FFF;text-align:center;margin-right:10px;margin-top:10px;float:left;line-height:13px}.plugin-share p{color:#7FC04C;margin:0}.plugin-share span{font-size:11px;font-family:Arial,sans-serif;color:#8A8C8E;display:block;padding-bottom:0;padding-top:10px}.fb-share-btn,.more-btn,.plugin-class a,.tw-share-btn{display:inline-block}.plugin-class a{line-height:44px;padding:0 4px;color:#FFF;border-radius:2px;vertical-align:middle;font-family:FontAwesome;font-weight:700;font-size:14px}.plugin-class a:hover{text-decoration:none}.plugin-class{margin:0 4px 0 0;font-size:22px}#fb-share-btn i,#tw-share-btn i{margin-right:5px}.fb-share-btn{background:#3b5998}.fb-share-btn:hover{background:#244872}.tw-share-btn{background:#26c4f1}.tw-share-btn:hover{background:#0eaad6}.plugin-more{display:none}.hide-btn,.more-btn{background:#C5C5C5}.more-btn,.plugin-more a{font-size:20px;cursor:pointer;color:#FFF;width:42px;height:44px;line-height:42px;text-align:center;border-radius:2px;padding:0!important}.plugin-class a{margin-right:4px;margin-bottom:4px;margin-left:0;float:left}.plugin-class i{font-size:20px}.more-btn i,.plugin-more i{margin:0}.gg-btn{background:#e93f2e}.gg-btn:hover{background:#ce2616}.lk-btn{background:#257BBA}.lk-btn:hover{background:#005983}.pi-btn{background:#DE0B30}.pi-btn:hover{background:#8a1119}.su-btn{background:#eb4823}.su-btn:hover{background:#BC3A1C}.dg-btn{background:#2952CC}.dg-btn:hover{background:#36F}.re-btn{background:#291400}.re-btn:hover{background:#544333}.de-btn{background:#296ACC}.de-btn:hover{background:#5C9DFF}
.plugin-class p {font-size: 50px; padding: 0}

Put this code just before  <data:post.body/>

<div class='plugin-class'>
    <div class='plugin-share' expr:ttdt='data:post.title' expr:url='data:post.url'>
        <p>0</p>
        <span>SHARES</span>
    </div>
    <a class='fb-share-btn' href='#' target='_blank'><i class='fa fa-facebook'/> Share on Facebook</a>
    <a class='tw-share-btn' href='#'><i class='fa fa-twitter'/> Share on Twitter</a>
    <div class='plugin-more'>
        <a class='gg-btn' href='#'><i class='fa fa-google-plus'/></a>
        <a class='lk-btn' href='#'><i class='fa fa-linkedin-square'/></a>
        <a class='pi-btn' href='#'><i class='fa fa-pinterest'/></a>
        <a class='su-btn' href='#'><i class='fa fa-stumbleupon'/></a>
        <a class='dg-btn' href='#'><i class='fa fa-digg'/></a>
        <a class='re-btn' href='#'><i class='fa fa-reddit'/></a>
        <a class='de-btn' href='#'><i class='fa fa-delicious'/></a>
        <a class='hide-btn' href='#'><i class='fa fa-minus'/></a>
    </div>
      <a class='more-btn' href='#'><i class='fa fa-plus'/></a>
  </div><div style='clear:both'/><data:post.body/></div></div>
If you need face any issue, or looking for help to set this up on your blog, don't hesitate to contact us.

1 comments: