Wednesday, 17 July 2013

Tagged under: ,

Add jQuery Social Sharing Followers Count Widgets in Blogger

Jquery Social sharing count Widget for blogger
No doubt that social sharing widgets play a vital role and uses in blogosphere. These are the words everyday searched by billions of users on the internet world. You already know each single day that there,s out dozens of widgets and plugins created by top pro bloggers and webmasters. Newbies could easily bookmarked such plugins and widgets for theirs blogs and websites without hard-breath. So we have already shared so many Blogger Widgets and Plugins in our precious tutorial but today we have yet another interesting jquery social sharing widget for blogger blog. You might have seen this gadget on some popular websites. So after receiving too many requests from our readers they have voiced to share some jquery lighter gadgets for us  today we finally come across to  share this splendid out gadget with you. So in this article we will show you how to add jquery social sharing count widget to Blogger.

Why To Use Jquery Social Sharing Widgets

Jquery is next generated language after Java and javascript, Jquery is basically scripting language which has the highest priority in all scripting modes language accessing fast loading webpages. There are also many mores advantage of using jquery scripting widgets. what robots says about fast loading pages ?
I like Those who grab me Fast and First. Robot love and appreciate all these blogs having faster scripting and lighter gadgets. Moreover it  will also help in  positioning your blog and posts pages at the top of popular search engine results. So after reading and knowing all these advantages why you are still thinking about the ideas just go and replace all the JavaScript gadget by Jquery friendly widgets. 

How to Add jQuery Social follower Count widget in Blogger?

So finally you have decided to interchanged all the javascript widget by Jquery faster widgets in your blogger blog. Lets see how we can add this plugins in your blogger blog. Below are the simple steps just follow carefully and implement on your blog.

Step 1:

  • Go to Blogger Dashboard: 
  • Go to Template >>> Edit/Html:
  • Now find for ]]></b:skin>
  • Past the Below given Css code before ]]></b:skin>


    /*--- PBT jQuery Social Follower Count Plugin --- */

    .pbtsocial-container{
    font-size: 13px;
    color: #666;
    font-family: arial,sans-serif;
    line-height: 25px;}

    .pbtsocial-container a,.pbtsocial-container a:visited
    {color:#45BAF5;
    text-decoration: none;}

    .count
    {font-weight:bold;}

    .row{
        position: relative;
        width: 320px;
        margin: 20px 0px;
        height: 100px;
    }

    .col_4{
        width: 155px;
        float: left;
        margin: auto;
        text-align: center;
    }

    .box{
        width: 130px;
        height: 100px;
        margin: auto;
        border: 1px solid #E5E7EB;
        background: #F1F3F8;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius:3px;
    }

    .cell_1{
        width: 30px;
        height: 80px;
        position: relative;
        float: left;
        margin: auto;
    }

    .cell_2{
        font-size: 30px;
        height: 80px;
        width: 80px;
        text-align: center;
        line-height: 80px;
        font-family: arial, sans-serif;
        font-smooth: always;
        position: relative;
        margin: auto;
        color: #333;
    }

    .cell_3{
        height: 20px;
        width: 132px;
        float: left;
        margin: auto;
        line-height: 20px;
        font-size: 12px;
        color: #999;
        background: #ccc;
        margin-left: -1px;
        -webkit-border-bottom-right-radius: 3px;
        -webkit-border-bottom-left-radius: 3px;
        -moz-border-radius-bottomright: 3px;
        -moz-border-radius-bottomleft: 3px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .icon{
        width: 40px;
        height: 40px;
        margin-top: 17px;
        border: none;
    }

    .facebook-blue{
    background-color: #5074BF;
    background-image: -moz-linear-gradient(top, #88AEFC, #3B5998);
    background-image: -ms-linear-gradient(top, #88AEFC, #3B5998);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#88AEFC), to(#3B5998));
    background-image: -webkit-linear-gradient(top, #88AEFC, #3B5998);
    background-image: -o-linear-gradient(top, #88AEFC, #3B5998);
    background-image: linear-gradient(top, #88AEFC, #3B5998);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#88AEFC', endColorstr='#3B5998');
    border-color: #23487E;
    color: #fff;
    text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);
    }

    .twitter-blue{
    background-color: #44B8F2;
    background-image: -moz-linear-gradient(top, #96DCFF, #2BA6E3);
    background-image: -ms-linear-gradient(top, #96DCFF, #2BA6E3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#96DCFF), to(#2BA6E3));
    background-image: -webkit-linear-gradient(top, #96DCFF, #2BA6E3);
    background-image: -o-linear-gradient(top, #96DCFF, #2BA6E3);
    background-image: linear-gradient(top, #96DCFF, #2BA6E3);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#96DCFF', endColorstr='#2BA6E3');
    border-color: #149BDE;
    color: #fff;
    text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);
    }

    .green {
    background-color: #41AD2B;
    background-image: -moz-linear-gradient(top, #4FDE33, #368F24);
    background-image: -ms-linear-gradient(top, #4FDE33, #368F24);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4FDE33), to(#368F24));
    background-image: -webkit-linear-gradient(top, #4FDE33, #368F24);
    background-image: -o-linear-gradient(top, #4FDE33, #368F24);
    background-image: linear-gradient(top, #4FDE33, #368F24);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4FDE33', endColorstr='#368F24');
    border-color: #1B7808;
    color: #fff;
    text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);
    }

    .black {
    background-color: #333;
    background-image: -moz-linear-gradient(top, #666, #000);
    background-image: -ms-linear-gradient(top, #666, #000);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#666), to(#000));
    background-image: -webkit-linear-gradient(top, #666, #000);
    background-image: -o-linear-gradient(top, #666, #000);
    background-image: linear-gradient(top, #666, #000);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
    border-color: #000;
    color: #fff;
    text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);
    }

    #mycontent{
    color:#a1a1a1;
    text-align:center;
    line-height: 1.9;
    width:310px;
    border: 1px solid #E5E7EB;
    background: #F1F3F8;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius:3px;
    }

Step 1 has done: click on save template >> Now come to Step 2:



Step2:

  • Go to Blogger >> Click on Add gadget:
  • Select the Html/JavaScript from the List:
  • Now Download the below given file: 
  • Copy and past the downloaded codes into gadget:




Make the Following Customization

Afer downloading the file when you open it just replace the following links.
For Twitter Follower:
  • You have to Replace probloggertricks with your Twitter username.
  • Replace http://www.twitter.com/ProBlogerTricks with your Twitter fan page URL.
For Facebook Share/Likes:
  • You have to Replace ProBloggertrick with your Facebook Fan username.
  • Also Replace the http://www.facebook.com/ProBloggertrick with your Facebook fan page URL



Do,not Miss: Scrolling Like Social Sharing widget for Blogger

 

Need Help

Hi buddies this was little descriptive Tutorial on How could we add lighter jquery social followers widget in blogger. We have described everything easier as we can. We hope you will not face any difficultly in implementation. By the way if you have found and bugs or facing any problem then do not hesitate just post your valuable comments we will soon resolve your issue. Thanks Pals.Thanks & happy blogging

18 comments:

  1. These is really a nice widget.. But don't you think using more of this could slowdown our blog loading time?

    ReplyDelete
    Replies
    1. Victor Noah

      Dear i have answer of this question
      I don't think so that this will effect on your blog loading time
      this look's like 'lite widget' and this will help you also...
      Best of Luck

      Delete
    2. Victor Bro Try to read my Second Para you will be aware of why we use JQuery widget in blog. This stylishly social sharing followers widget is created in JQuery and Query language does not compel blog on loading time....thats why pro bloggers also suggested to use Jquery instead of JavaScript. hope you it could cover your answer.
      Also read Rizwan's statements.

      Delete
  2. Nice widget.....but it should ve subscription box under it, btw thanks for sharing :)
    OEWAYS

    ReplyDelete
    Replies
    1. Bro Your Idea is good. we must have to insert chunk of code to redesign..thanks.....
      Warning: do not insert url in comment body next time.

      Delete
  3. Elegant dear Hafeez. What a hard work have you done with your blogger widget. One thing more I appreciate your template customization. Thanks for sharing. Dear I invite you to join my blog if you have time for, it is an honor to me to be with me.

    ReplyDelete
    Replies
    1. Dear, Slangi Bro i have joined your blog along with communities....Thanks for Praising our Blog Designing..Once again thanks for landing on JQuery social followers widgets..

      Delete
  4. nice post hafeez..keep sharing useful wdgets!

    ReplyDelete
    Replies
    1. Happy to See you again and again..my boy. keep loving PBT.

      Delete
  5. Hafeez Nice Sharing Brother...
    Jquery Social Sharing Widget Hmm Look like professional.
    Thanks For Sharing this Beautiful Widget with us keep posting like this
    Best of luck
    Regards
    R.S

    ReplyDelete
    Replies
    1. Yup This widget will look professionally and have attractive view.

      Delete
  6. nice sharing and countdown widget is best....

    ReplyDelete
  7. Nice Widget

    Regards ,
    Rizwan @ Envy Blogging

    ReplyDelete
  8. Social sharing widget help bloggers to increase social fan following. Thanks for sharing brother.

    ReplyDelete
    Replies
    1. Yes bro it will surely increase your social followers. just include this widget in your blog.

      Delete
  9. Sir this process show error when we save template. so tell me what i do ,suggest about related plugin.

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism