How To Show Off Follower Counts For RSS, Twitter and Facebook Followers

You have seen many mind blowing widgets on wordpress blogs but its now time to make Blogger a better place! Presenting to you just another beautiful and yet useful widget that displays the current number of your blog subscribers, twitter and facebook followers. This widget is based solely on pure CSS and HTML with no JavaScript involved therefore you just need to update the counts manually. At present I am learning programming too so as soon as I develop some good command in programming, I will automate all MBT widgets but at present bear with me as a designer only :p

Take a look on how the widget will look like on a blog with narrow sidebar (The screenshot above is taken on a blog with wide sidebar)

Follow the Steps Below To Add The Follower Counter To Your Blogger Blogs

1. Go To Blogger > Layout
2. Choose Add a Gadget or Add a Page element
3. Select HTML/JavaScript widget
4. Paste the code below inside it,

<style>
.rss-mbt {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh19WdS_UzTabZAP08LgPcbXrgsEOsQgt1MDClxOwS-61PVJD0NnZ8KKcSb6PTkR6T-P5EwowGgW9PRFOUnM1H-86fkMHEgkul6cd9bgLvmsjsHKZDMPrbtojM1Sjvh98OPwuTWND8eoGM/s800/RSS1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}
.twitter-mbt {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4vu6tT_T2qqzr64O2BipxPlTU2mc5C9XijxTCMohu5wWIDhOvy4SsNqerIFEmZy60F9ERZNrGVsJ54re1dYH3NcbVt43h9Uu3eNLCvMjxL0BMREXy4CYhO-FxjwNLKXrzrPZb-rn9dRM/s800/TWITTER1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}
.facebook-mbt {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8n1zk_WFEZq53T6-53CMTNls1hSCAmGFkNU5ZUnZDU3_9wuMCm9-DZinjH8JmZ0RpmRQ_oZhIbmHT-lZyJ7BFDrhMuyW8tKAUEBGXrcn2UQ_qMwC4ttMytMhPaI5ewFJDKX9DDLwSPUc/s800/FACEBOOK1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}
.follower-rss, .follower-twitter, .follower-facebook {
    font-family: Georgia,  sans-serif, Times;
    font-size: 1.1em;
        font-style:italic;
        color:#289728;
}
.follower-rss span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#FFB93C;    
}
.follower-twitter span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#6DB6E6;    
}
.follower-facebook span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#3889BA;    
}
</style>
<div class="rss-mbt">
<div class="follower-rss"> <span>515</span> loyal readers
</div>
<a href="ADD-RSS-FEED-URL-HERE" rel="nofollow">RSS feed</a>
| <a href="ADD-RSS-EMAIL-FEED-URL-HERE" target="_blank" rel="nofollow">E-mail</a>
</div>
<div class="twitter-mbt"><div class="follower-twitter"><span>1058</span> followers</div>                           
<a href="ADD-YOUR-TWITTER-URL-HERE" target="_blank" rel="nofollow" title="I definitely follow you back">Follow us on Twitter!</a>
</div>                       
<div class="facebook-mbt">                       
<div class="follower-facebook"><span>260</span> followers                            </div>                           
<a href="ADD-YOUR-FACEBOOK-URL-HERE" target="_blank" rel="nofollow">Join us on Facebook!</a>
</div>

NOTE:- Make sure to replace the bolded text with the required details (links of your Feedburner, twitter and facebook accounts) and replace the bolded numbers with your current follower counts. For example replace 515  with your current number of Subscribers, replace  1058 with the number of your twitter followers and replace 260 with the number of your facebook followers

     5.    Save and you are done! Now view your blog to see a stunning widget hanging on your sidebar :D

Customization:

I hope it was not difficult to add :). You can replace the images used in this widget with the image links of your choice.

 Kindly let me know how useful do you find this new stylized widget. I would be more than happy to help you with any query you may have. Take good care of your selves and of your dearest ones. Enjoy! :>

How To Get/Find Facebook Profile Id

Your facebook profile is important for you to know, because the are some cases whereby you want to create a application and you will be required to provide it
 such as adding new facebook comment box to your blog/site, and make sure you use a correct id for you to receive notification directly to your facebook account.

Easily find your Facebook numeric personal ID for fb:admins social plugins and more!

How To Get Facebook Profile Id

• Open your Browser
• Type this Addreess http://findmyfacebookid.com/
• Enter your personal Facebook profile URL: or Fan Page Url
• Then Click "Lookup Numeric ID"
• on the next page you will see digits.

Now done you did this this is your Facebook Profile ID.

Add Stylish Subscription Box With Share Buttons Below Post

dding subscription box below your each post is another best way of increasing your blog subscribers. This widget comprises of a subscription box, RSS link, twitter link, facebook link, and google + link. It will appear at the bottom of your post and this is one of the best way to get your readers attention.

How To Add The Subscription Box

• Go to your blogger dashboard
• Click on "Design" > "Edit HTML" > Back up your template
• Mark/Tick "Expand Widget Templates"
• Use crtl F to find the code below

<div class='post-footer'>

Now paste the code below immediately Before the code above

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.RBstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJrYbQ97FO3F8F-OKxltgj31tVvNT0zS_9tdK62qSU-4aMclI126xsdB6Su25Xre9Z8UwPM_coSYgyPZKx-lrfgvhpUdXdeIA9Ebp9Ewd4XhaVs6UuhM_RCicFpDP1C2LgRrwwCNnKEbox/s400/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.RBsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>

<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>

<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=HowToAllToolsTopTutriolsToolsAndTips&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='Realcombiz'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='RBstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>

<input alt='' class='RBsubmit' title='' type='submit' value='Submit'/>
</form>
</td>

<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=HowToAllToolsTopTutriolsToolsAndTips' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyE_twNF_lbzDlHYBsK-CDA5Z-vO5i3flfGzvahgEvw_M3-Ss_jYW4yoryWEHuyEgnKBHiDpBtsnUWNnogrdctoRMEUJUe983YGQA2FkldPq-Nq9pCv6u48iqF3-2KyOQKSuEb9NjwxVI/s1600/rss-30×43.png'/></a>

<a href='http://twitter.com/Howtoalltools' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1jZQZPTRgekApzK250fVGxTnTT8QeMcLDk0HNaYy2hJuzIOyBWIfPX1_aH0QPe0gL0Owq-mUk44nD-w2wyGCUW-brfsS3M9umFY9k2wwrLTmXTgCvessbSJvkQOpWSoqIUFWdaIrUsq0/s1600/twitter-30×43.png'/></a>

<a href='http://www.facebook.com/Howtoalltools' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJGV3gUHhjh0rq1s3nZ1n625ynOItVQyCooIOiCtAM_3JBKkAHXs2F_Jn_mGZjEjelklUyUKeq7M923pin6nRW0PCZw4aXsSefue9JPh58HzajIPoGisE2ahN3WW2BTEY8kuTT2ZQuBA/s1600/facebook-30×43.png'/></a>

<a href='https://plus.google.com/u/0/114198260034907980206/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt3BzEhoFeipo-3yhh3L9WLi51_SRgObWFp3jtW4bfkqXdTQY7fbDyyqi5t6wnm8L3EQUJtd_7qzui7NpEQ7OxEoZXPHlYIcAuPDWmYoaWim9a7e79IStQnbyywymA5fAipVMxUEJuhQg/s1600/googleplus-30×43.png'/></a>

</td>
</tr>
</tbody></table>
<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://howtoalltools.blogspot.com/2013/02/add-stylish-subscription-box-with-share.html' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>
</div></div>
</center>
</b:if>

• Replace http://feedburner.google.com/fb/a/mailverify?uri=HowToAllToolsTopTutriolsToolsAndTips with your your feedburner url
• Replace http://twitter.com/Howtoalltools with your twitter profile url
• Replace http://www.facebook.com/Howtoalltools with your facebook page url
• Replace https://plus.google.com/u/0/114198260034907980206/ with your google + profile url
• Click "SAVE TEMPLATE"

Hope you love this eye-catching subscription box? share your view about this. Don't forget to subscribe and share this post.

How to Add Floating ( Sliding ) Share Buttons To Blogger Sidebar

Hi friend you are her today to learn How to Add Floating ( Sliding ) Share Buttons To Blogger Sidebar. you must have seen in many wordpress or other blogs. Now i will tell you for Blogger how to add a floating share buttons widget.It will appear outsid of your post sections and as you scroll the page, this widget will also scroll with some animation effects.

How to Add Floating ( Sliding ) Share Buttons To Blogger Sidebar :

•  To Add this follow these steps.
• Login to your Blogger Account.
• Goto Design>>Page Elements.
• Now click on Add a Gadet.
• Now select  HTML/Javascript
• Now copy this folwoing Red code in Content the box.

<!-- floating share bar Start blogger4ever.com-->
<style type="text/css">
#pageshare {
float:left;
margin-left:-80px;
background: #fafafa;
position:fixed;
bottom:20%;
border:1px solid #e5e5e5;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
#pageshare:hover {
background-color:#ffffff;-webkit-box-shadow:0px 2px 2px rgba(0,0,0,.1);-moz-box-shadow:0px 2px 2px rgba(0,0,0,.1);box-shadow:0px 2px 2px rgba(0,0,0,.1);}
#pageshare .sbutton {
float:left;clear:both;margin:5px 5px 0 5px;}</style>

<div id='pageshare' title="Get this Widget from    How To All Tools.com">
<div class='sbutton' id='tweet'>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="YOUR TWITTER USERNAME">Tweet</a> </div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone> </div>
<div class='sbutton' id='fbshare'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="true" data-layout="box_count" data-width="50" data-show-faces="false"></div></div>
<div style="clear: both;font-size: 10px;text-align:center;"><a href="http://howtoalltools.blogspot.com/2012/01/how-to-add-floating-sliding-share.html">Get Widget</a></div><!-- Do not remove this link --> </div>
<!-- floating share bar End --> 

• Save it.
• Drag it under Blog Post section.
• You done it, Alway comment and subscribe us.

How to Add Facebook share Button for Blogger

Hi Friend, As you know that Twitter has Retweet Button, Now a time Facebook Also have Share Button. How it Works? Vistors from the world of your site when comes on your blog they can easily share your blog posts on facebook. This is aslo a Good way of SEO and increase your blog traffic.

Preview of Button :

.:: How to Add Facebook share Button ::.

This button will apear on the top right side of your blogger.

1. Follow this guide on How To Edit Your Blog Template

2. Find THis code. (CTRL+F)  <data:post.body/>

3. Add these codes ABOVE  <data:post.body/>

<!-- FACEBOOK SHARE BUTTON -->
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right; margin-left:10px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<b:else/>
<div style='float:right; margin-left:10px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
</b:if>
<!-- FACEBOOK SHARE BUTTON -->

4. Click Save Template
it's Done and always comments 

How to Add Retweet Button for Blogger

Hi Friend, you are here today because you want to aad Retweet button to your Blogger. Today i will tell you how to add retweet button to blogger. This is very easy and very helpful to improve your Blog traffic also.

1. Follow this guide on How To Edit Your Blog Template


 2. Find(CTRL+F)  <data:post.body/>

3. Add these codes ABOVE  <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
    <div style='float:right; margin-left:10px;'>
        <script type="text/javascript">
            tweetmeme_url = '<data:post.url/>';
        </script>
        <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>
    </div>
<b:else/>
    <div style='float:right; margin-left:10px;'>
        <script type="text/javascript">
            tweetmeme_url = '<data:post.url/>';
            tweetmeme_style = "compact";
        </script>
        <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>
    </div>
</b:if>

4. Click Save Template

And you're done! The retweet button will appear at the Top right side on your post.


Always comment and subscribe us.....!

How to Upgrade The Old facebook Comments Box in New style in Blogger.

Hi all, As we all know that  facebook released an upgrade version of the comments box plugin, with  great features, So all users of my site who used the old tutorial was wondering how to upgrade the comments box without loosing the current comments,

How to Upgrade Old Facebook Comment Box to New One

Please note: This post only explain how to upgrade the Old Facebook comments box for the users who already installed Old Facebook Comment box Plugin, If you want to install it from the starting, Then follow this tutorial.

Warning : Before you start applying any changes to your blogger template code, We encourage you to Backup it, by clicking on Download Full Template link.

Now just go to your blogger account, and then goto Blogger Dashboard >>> design >> >edit html , and then check expand template widgets box, Now find the following code, ( press Ctrl + F to find )

<fb:comments 

And replace it with

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <fb:comments migrated='1' 

please make sure to copy all the code including the space after the code,
Now click Save Template , It's Done.
To View the new comments box Tutriol and features, Then View this tutorial.

Always comment and Subscibe us.

How to add an Animated Twitter Bird to Blogger and WordPress

I think u r on this post because u see Flying Twitter Bird on this blog and you might have noticed that bird is following you where u navigate on the blog. This make your blog looks Awesome and attrective and also help getting some tweets and followers on twitter. See the image for an idea of the bird.

How to Add the Animated Twitter bird to Blogger/Blogspot
* First Login and go to Dashboard >> Design >> Edit HTML.
* Search for  

</body>

* Copy the code below and paste it just below </body>

<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js"> </script> <script type="text/javascript"> var twitterAccount = "howtoalltools"; var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> "; tripleflapInit(); </script>

Be sure to change ‘howtoalltools‘ to your twitter username.

* Save Template. and it's Done...!