Few months agone a user left a comment on MBL suggesting us to practise a widget that automatically updates the followers count.
Wali Khan Commented:
Faizan, truly this widget together with similar you lot already published on your spider web log would hold upward ameliorate if they would own got an auto increment function.. but without that it is exactly headache to update them when followers are increased..
Let me know if I'm wrong!
That’s what our Founder Syed Faizan Ali Replied to the to a higher house comment.
Syed Faizan Ali Replied:
Well, you lot are quite correct that nosotros own got widget similar to the 1 which nosotros own got shared today. However, it has to a greater extent than elegant look.
Coming dorsum to point, Well to brand it auto update nosotros own got to utilisation API of Different Social Websites. Which is indeed a hard TASK. Nonetheless, nosotros would endeavor to practise a auto Updating Social Networking widget.
Since, Blogger is non flexible enough. That why nosotros ever prefer custom. Self updating widgets.
After viewing this gadget, everyone would mean value that what is uniqueness inwards this thing? There are tons of same gadgets available on dissimilar nooks together with corners of the web. However, this gadget has the functionality which other does non have. It updates the followers count on automation addition an elegant design. What else you lot want?
How to Install jQuery Social Count Plugin inwards Blogger?
The instructions mentioned below are extremely straightforward, together with would accept less than 2 minutes to consummate the integration. Remember: This widget has the flexibility to piece of occupation on whatever sort of platform that supports HTML. Therefore, nosotros tin also utilisation it on WordPress, Jhoomla together with etc.
Go to Blogger.com >> Template >> Edit HTML >> Proceed.
In the Template coding search for]]></b:skin> together with exactly to a higher house it glue the next CSS coding. There is no demand to practise whatever customization inwards the CSS coding. Therefore, maintain it every bit it is.
/*--- MBL jQuery Social Follower Count Plugin --- */.mblsocial-container{font-size: 13px;color: #666;font-family: arial,sans-serif;line-height: 25px;}.mblsocial-container a,.mblsocial-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 company #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 company #E5E7EB;background: #F1F3F8;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius:3px;}
That's All Save the Template yesteryear Pressing "Save Template" Button together with maintain to the side yesteryear side step.
How to add together Automatic jQuery Social Follower Count Plugin for Blogger?
- Go to Blogger.com >> Layout >> Add a Gadget.
- From the listing select Add HTML/JavaScript.
- Now inwards the HTML Box glue the next coding.
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery-1.7.1.min.js"></script><script>$(document).ready(function(){$('#shared').mblsocialcount({'service':'facebook','countof':'shares','query':'http://www.mybloggerlab.com','callback':'formatCount'});$('#tweets').mblsocialcount({'service':'twitter','countof':'tweets','query':'mybloggerlab','callback':'formatCount'});$('#fblikes').mblsocialcount({'service':'facebook','countof':'likes','query':'mybloggerlab','callback':'formatCount'});$('#followers').mblsocialcount({'service':'twitter','countof':'followers','query':'mybloggerlab','callback':'formatCount'});});business office formatCount(element,count){var display_count='';count=parseInt(count,10);if(count>1000000){count=count/1000000;count=count.toFixed(1);display_count=count+'m';}else if(count>1000){count=count/1000;count=count.toFixed(1);display_count=count+'k';}else{display_count=count;}element.html(display_count);}</script><div class="mblsocial-container"><div class="row"><div class="col_4"><a href="http://www.facebook.com/mybloggerlab" target="_blank" rel="nofollow"><div class="box"><div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikK7BY55D800xT1cGjQklOppeiiKlf_j_macLZTfFXzpQchylG9PshYuwe6rQWZe5Y5r4KAwrGmiZAKCLmdNb0eAvgNrYOqcgteFP9ZMXq5djEzRUMhtsQGFT6iOEltwpud1G0AdmZoFQ/s100/facebook.png" class="icon"/></div><div class="cell_2"><span id="fblikes" class="count"></span></div><div class="cell_3 facebook-blue">Likes</div></div></a></div><div class="col_4"><a href="http://www.mybloggerlab.com" target="_blank" rel="nofollow"><div class="box"><div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikK7BY55D800xT1cGjQklOppeiiKlf_j_macLZTfFXzpQchylG9PshYuwe6rQWZe5Y5r4KAwrGmiZAKCLmdNb0eAvgNrYOqcgteFP9ZMXq5djEzRUMhtsQGFT6iOEltwpud1G0AdmZoFQ/s100/facebook.png" class="icon"/></div><div class="cell_2"><span id="shared" class="count"></span></div><div class="cell_3 green">Shares</div></div></a></div></div><div class="row"><div class="col_4"><a href="http://www.twitter.com/mybloggerlab" target="_blank" rel="nofollow"><div class="box"><div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgut7ssnaNNM3qLuQOeWRqwYUTtnXTqukRAH7_6oWYxQZU6iH09cm-lODwYTl759BVNJijJh6JFaE6Z5jrtgcliPvGtOco0g3MlevhnahPUF83Zlv9_XLvlzeoUoBiseRNpTBO8VNbQNVo/s100/twitter.png" class="icon"/></div><div class="cell_2"><span id="followers" class="count"></span></div><div class="cell_3 twitter-blue">Followers</div></div></a></div><div class="col_4"><a href="http://www.twitter.com/mybloggerlab" target="_blank" rel="nofollow"><div class="box"><div class="cell_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgut7ssnaNNM3qLuQOeWRqwYUTtnXTqukRAH7_6oWYxQZU6iH09cm-lODwYTl759BVNJijJh6JFaE6Z5jrtgcliPvGtOco0g3MlevhnahPUF83Zlv9_XLvlzeoUoBiseRNpTBO8VNbQNVo/s100/twitter.png" class="icon"/></div><div class="cell_2"><span id="tweets" class="count"></span></div><div class="cell_3 black">Tweets</div></div></a></div></div><div id="mycontent">Created By <a href="http://www.mybloggerlab.com">MyBloggerLab.com</a></div></div><script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/mblsocialcount.js"></script>
Customization:
For Twitter Share/Follow:
- Replace mybloggerlab with your Twitter username.
- Replace http://www.twitter.com/mybloggerlab with your Twitter fan page URL.
For Facebook Share/Likes:
- Replace mybloggerlab with your Facebook Fan username.
- Replace http://www.facebook.com/mybloggerlab with your Facebook fan fage URL
ATTENTION: Don't take the credit link. Anyone who take the link, together with thence it could destroy his Blog maliciously. Therefore, maintain the credit links intact. If you lot failed to practise so, together with thence nosotros would non concur whatever responsibleness because legal activity would hold upward taken against him. However, if anyone desire to buy a Legal licence together with thence he tin contact us.
From the Editor's Desk:
Combining the API alongside the Gadget was an uphill task. Our squad did a lot of hard piece of occupation altogether together with the effect was exactly outstanding. We would certainly give thank you lot our Reader who suggested us to piece of occupation over such a pregnant gadget. What are your thoughts nearly the innovation? Yeah, nosotros know WordPress already has it but what nearly Blogger huh?. Take a lot assist till then, Peace, Blessings together with Happy Socializing.
No comments:
Post a Comment