Best Social Sharing Tool Box With Share Post Count Below Every Blog Post

In this tutorial i will show you how to Add Cool Shareaholic Sharing Icon below every article in blogger and which also tell how many time post is share on Social Media or Social Sites.

Best Social Sharing Tool Box With Share Post Count Below Every Blog Post

Now i am going to tell how to Add this on your blog posts. If you have already adding Social Sharing Widget/Gadget on blogger then remove it and replace with this widget because it is very simple show able and also occupies less space comparatively to other sharing widgets. It is a tool tips with Hover Effect means when some one place mouse on these icons its rises and also shows the sharing number of posts on social websites.

WordPress Best | Easy Plugins Installation List For SEO And Make Professional Wesbite After Blogger
Add | Changes Labels Or Tags With CSS Button Beautiful Color With Hover Effect
Add 6 Best | Beautiful | Cool Looking Social Bookmarking Sharing Buttons Widget | Gadget On Blogger Blogspot

How To Add Shareaholic Sharing Icon on Blogger:

Follow my below tutorial and do same as my posts tell.

Go to Blogger.com.

Go to Template.

Click On Edit HTML.

Press Ctrl+F in HTML Body Box.

When search box is appear in right to corner then paste below code/tag in it and press enter.

]]></b:skin>

When you find this above code then copy below coding and paste it just above/before ]]></b:skin> tag.

div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}

Shareaholic

Shareaholic

Now find another code in your template for adding Social Icons on below post or Footer of your blogger blogspot.

<div class='post-footer'>

When you find this code line then copy below given code and paste below this above code.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='shr_class shareaholic-show-on-load'> </div> <script type='text/javascript'> var SHRSB_Settings = {&quot;shr_class&quot;:{&quot;src&quot;:&quot;http://www.shareaholic.com/media/css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf142c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;google&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;twitter_template&quot;:&quot;Some fancy post title - http://goo.gl/dbqlx via @trickofblogging&quot;}}; </script> <script type='text/javascript'> (function() { var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true; sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;; var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s); })(); </script><a href='http://trickofblogging.blogspot.com/' target='_blank'>Social Bookmarking Gadget</a></b:if>

Replace Red Highlighted Color my twitter page with your Twitter page by replacing name.
Now Save your template.
Click on view blog.
And you have done.

If you feel any problem about this widget or other gadgets for adding in your blog then submit your comment and get a beautiful and helpful answer.

Related Articles:

How To Add | Put | Insert | Copyright Warning Message In Blogger Post To Prevent Content

Add | Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks

Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger

Add | Put | Embed Three Or Four Column Footer Widget/Gadget In Blogger Blogspot

Add Facebook Like Box Widget/Gadget On Blogger By Facebook Developer Plugin

Add | Make About Us Page Widget | Gadget On Your Blog Footer Or Sidebar

Create | Make | Add | Set 404 Error Page In Blogger Blogspot Easily

Add | Put Best Style Subscribe Box Widget/Gadget For Blogger Sidebar

Add 6 Best | Beautiful | Cool Looking Social Bookmarking Sharing Buttons Widget | Gadget On Blogger Blogspot

In this tutorial i will give you some Beautiful and Good Looking Sharing widget/gadget code which you can easily add on your blog for Social Media Sites and also share you content or post on these social website for get visitors by sharing your content.

I am going to give you some HTML/Javascript Coding which you can easily install in your blog by visiting layout in blogger. First i show you small tutorial for adding these widget or gadget in blogger layout and after that we also install some sharing widget in blog post like Facebook Sharing icon in float right or left side or also add in below every post.

Add 6 Best | Beautiful | Cool Looking Social Bookmarking Sharing Buttons Widget | Gadget On Blogger Blogspot

In this below tutorial i will give you only those code which is easily install in blogger just adding code in HTML Box.

Go to Blogger.com.
Go to Layout.
Find HTML/Javascript.
Click on it.
Now paste any of your desire coding in this box and check it out and also if you can not like it then replace with other code.

Add Facebook Like Box Widget/Gadget On Blogger By Facebook Developer Plugin
Easy | Best | Simple Tricks To Make Money From Youtube | Chitika


The Code are give below pick any one and add this by following above small tutorial.

The name of this Social Sharing Widget Is.
1) Touch Me Social Media Sharing Widget.

<style>
/*--------TOB Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;
}

.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}

.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}

.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}

</style>
<p style="display:none;">Add 6 Best | Beautiful | Cool Looking Social Bookmarking Sharing Buttons Widget | Gadget On Blogger Blogspot<a href="http://trickofblogging.blogspot.com/2013/06/add-best-cool-social-bookmark-share-gadget-on-blogger.html">Beautiful Blogger Widgets</a></p>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="http://feeds.feedburner.com/blogspot/LPkip" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/u/0/113224303869289827964/posts" rel='nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="https://www.facebook.com/pages/Trick-Of-Blogging/447187668684161" rel='nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://twitter.com/trickofblogging" rel='nofollow' target='_blank' ></a>
</div>

Now Change the Orange Highlighted Link with your RSS Feed link of your blog.
Change the Pink Highlighted Color Link with your Google+ Profile link or post of your blog.
Change the Red Highlighted Color Link with your Facebook Page link of your blog.
Change the Blue Highlighted Color link with your Twitter Page or Profile link.



2) Floating Social Media Social Sharing Widget For Blogger:


Just follow the small above tutorial and add this in your blogger blogspot easily.

<p style="display:none;">Floating Social Media Buttons for Blogger by <a href="http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p> <style type="text/css">
* html #ss-box{
position: absolute;
}
#ss-box{
width: 70px;
background:#ffffff;border:1px solid #dedede;border-radius:px;-moz-border-radius:px;-webkit-border-radius:px;position:fixed;left:4%;
top: 20%;
height:200px;
height:auto;
}
#ss-box div{
padding:6px 6px 4px 5px;
}
#icon_twitter,#icon_digg{
margin-left:-2px;
}
#icon_linkedin{
margin-left:-5px;
}
#sfs{
margin-left:-5px;
}
#ss-get{
bottom: -20px;
clear: both;
color: #666666;
font-size: 9px;
left: 18px;
position: absolute;
text-align: center;
text-decoration: none;
}

</style>

<div id="ss-box">
<div id="ssl-box">

<div id="icon_facebook">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=235665053131744&href&send=false&layout=box_count&width=50&show_faces=false&action=like&colorscheme=light&font&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:60px; margin-left: 2px;" allowtransparency="true"></iframe>
</div>

<div id="icon_googleplus">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>

<div id="icon_twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

<div id="icon_digg">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div id="icon_linkedin">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>
</div>

</div>
<a id="ss-get" href="http://beautifulbloggerwidgets.blogspot.com/2012/03/floating-social-media-buttons-for.html">Get This</a>
<div style="clear:both;"></div>
</div>

3) Spinning Social Icons Sharing Widget | Gadget For Blogger Template:

 

This Social Icons sharing buttons are formed in CSS3 Coding which you can install in HTML/Javascript Box and save and enjoy it.

<style>p#hb_socialicons img {
 /* Spinning Social Icons Widget By TOB */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

p#hb_socialicons img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

/* Spinning Social Icons Widget By TOB */
</style>



<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/btsnts/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvCYPlfJGfj1-nZ8TkxztHsbKtsVsboeUCtpRBCy_MrMquSHD3-Q84Lbp1DDDuwV3oTAUKtmlR5_Q58hPJuqmmAoTzhLWoT7LT6BXyWQBHlj6YZR8vSVhJCFWufjoJJvzp8psaXuVbly4/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAFINrnARsBpzttuafuuw8kOuOKKvwfGeF3hkMEqv-QpwKYMC__wbBurSqwX24ALxoAqpHzNCfSMy9DJxihewd1ayQ8_2eKMBm8AOUs_SCtQq2hM4Y9qJbsUY9TL0GPcAnmKT59WuyLqs/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBasW9QRKOldIa7GylUqizw7oa4DPc0qKl8Zu1mAPOUe6l862jwdbAHDlFZ-HiRVuTYbwUmM2o1EEz2PdbSu0fZ1egTTZ81a8vjSp9CMb3OdOy-tWWUaHTQMzOwAUItyqH-eQvNfcR1x4/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWFxWmveQ-pyHOWHZPMYnYnfzdueZ96A2Xl7qANzJ0EBhS1J10798FrsNh23nBSLkSkebhM-gRvD8AY9PdirvOOW0LxXlg7Ea50Yh2VP3unoJqr71jQsJrfdKEo4GJaXzNwBCu1ElE8g/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5wau5KCbpbuLcgT0hD_1pQB82ivV5Tx_UG8cnWRD6yUMpxncARaLzdk6itFh90TxEvj2kdbFM1zmbNXeOBVpMQ4B8NI1j92KAW0HZ5zWcHbNfUa1Xsr7wSSDZZ_wuFdh8aOgczXv9NE/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

4) "Add This" Widget For Blogger For Social Sharing:

This is the widget or gadget for blogger simple adding in HTML Box and choose your desire place where you want to add or put this widget for sharing easily.

<!-- Add This Code Starts -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ec4dd3d1e59e9dc' type='text/javascript'/>
<!-- Add This Code Ends -->

5) Social Bookmarking Or Sharing  Widget With Egg Sliding For Blogger Blog:

 

Go to Blogger.com.
Go to Template.
Click on Edit HTML.
Press Ctrl+F in HTML coding box.
Paste the </head> tag or code in this appear search box and press enter.
When you Find </head> and paste the following code just above it.

Use Best Blogger Settings Option Basic For SEO And Others Option Links
Customise Blogger Default Template To Make Professional Template

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Now find for </body> and place the following code just above it.

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;],{title:&#39;<data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script>

Save Template.
Now click on View Blog and check this out left bottom the Egg Type sharing widget with beautiful effect is appear.

6) Cool Social Sharing Shareaholic Sassy Bookmarks Widget For Blogspot:

Go to Blogger.com.
Go to Template.
Click on Edit HTML.
Press Ctrl+F to find the </body> tag.
When search box appear then paste </body> tag in it and press enter.
Now paste the below code just above/before of the </body> tag.

 <!-- Start Shareaholic Sassy Bookmarks HTML (trickofblogging.blogspot.com)-->
<div class="shr_ss shr_publisher">

</div>
<!-- End Shareaholic Sassy Bookmarks HTML (trickofblogging.blogspot.com) -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

<!-- End Shareaholic Sassy Bookmarks script (trickofblogging.blogspot.com) -->

Now Save your Template.
Click On View Blog and enjoy these amazing effects.

If you have any problem to adding these or other widgets then contact me and also leave your nice comment on my blog then i will definitely reply you with my best answers.

Related Articles:

How Easliy/Simple To Manage Page Layout In Blogger Blogspot
Add Flickr/Picasa Web/Photobucket/Other Albums Slideshow On Blog Easy Tricks
Add | Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks
Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger
Add | Put | Embed Three Or Four Column Footer Widget/Gadget In Blogger Blogspot
Add Facebook Like Box Widget/Gadget On Blogger By Facebook Developer Plugin
Add | Make About Us Page Widget | Gadget On Your Blog Footer Or Sidebar
Add | Put Three Tab Gadget/Widget In Blog Layout Sidebar On Blogspot

Add | Put Three Tab Gadget/Widget In Blog Layout Sidebar On Blogspot

In this tutorial i will show you how to Add Three Column Tab Gadget in blogger sidebar with three option Followers, Popular Posts, Blog Archive. To install this widget in blogger template is so simple and easy or if you want to add this widget in blog then follow the below tutorial for doing this on your blogger. I also put/install this widget now then i want to share it with my blog readers. To add this widget in blogger is very effective for blog reader they can easily access your blog and easily find what they want on your blog. These three option is not fix you can easily change after adding this widget on blog.

5 Ways How to Make your Blogger Blog Like WordPress Website
How I Make My Blogger Good Looking Best Tricks
How To Make Website Like My Blogger Tricks To Get Best Alexa Rank 

Adding Three Tab Gadget/Widget On Blogger Blogspot:

This widget is one of the best widget because it is not occupies too much space in this widget space is less and three option is added easily which is very best. It also make your blog looking good and your blog look like perfect blog after adding this. The three tab gadget in layout many types but i choose simple and best looking i also make this tutorial so easy and any one add this widget to their blog by using this easy tricks.

Add | Put Three Tab Gadget/Widget In Blog Layout Sidebar On Blogspot

                                    

Now we are going to start the simple adding Three Tab or Multi Tab Widget on Blogger Blogspot. Follow below tutorial and add easily.

Go to Blogger.com.
Go to Template.
Click on Edit HTML orange button link.
First Download your full blogger template.
Press Ctrl+F in the HTML Body Box.
Paste the below code/tag in the search box and press enter.

]]></b:skin>

When you find this code/tag then pick or copy the below code and paste just above/before the above tag.

/***----- TOB Multi Tabbed Widget ----***/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#4E4840;background:#EBEBE5;padding:5px 16px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#756857;color:#FFF;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

Now if you have Default Template or any types of template then find the any code which is given below one by one.

<div class='column-right-inner'>

<div id='sidebar-wrapper'>

<div id='rsidebar-wrapper'>

When you find any one of them then copy below code and paste below any of tag which you find.

Get Google Page Rank With In 1 Month By Simple And Easy Tricks 
Best Blogger Tips And Tricks For My Blog SEO Instantly


 

<div class='tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
      
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Followers</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>                                      
</div>                           
                               
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>                                        
</div>                           
                               
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>                                    
</div>
</div>

Now Save your Template.
Click to View Blog.

Now you have done this trick and your blog look good now if you want to replace gadget with other gadgets then delete the following and replace which you want to add.

Related Articles:

Add | Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks
Add Manually CSS Jqeury Drop Down Menu On Blogger
Add Three Or Four Column Footer Widget/Gadget In Blogger Blogspot
Add Facebook Like Box Widget/Gadget On Blogger
AddAbout Us Page Widget | Gadget On Your Blog Footer Or Sidebar
Add | Put 50 Flag Translator Widget | Gadget On Your Blogger
Easy Trick To Add Twitter Updates Gadget To Blogspot Blogger
Add Recent Post Moving In Down And Upward Direction

Add | Put 50 Flag Translator Widget | Gadget On Your Blogger Blogspot

Add a Flag Translator Widget on blog easily just pasting code in layout gadget. If get traffic from those country which is not match with your country language then put this flag translator gadget on your blog template to stay those visitors who are not read your content on your blog. It is very useful tool for those blogger who get massive traffic like China, Vietnam, and more complex language and also those people who live in these country they can't ready your blog content which is mostly written in English. In this tutorial i will show you how to put or embed this widget on your blog layout and then add a gadget option by adding code.

The Most Benefits Of Adding Flag Translator Widget On Blogger:

Add | Put 50 Flag Translator Widget | Gadget On Your Blogger Blogspot

The most benefit of add this gadget on blog is when visitors come from your blog and they can't understand your blog language then the left your blog immediately/quickly but if you put or add this widget on your blog then they see the Flag Of your Desire country where they live then he/she just click on the flag and your whole blog content is convert in the desire language which your visitor want and they also read your blog post and stay on a long time and your blog Bounce Rate (Left on first page) is decrease and your impression is increase.

Make Money Form Links of Amazon Product to Blogger Posts
Easy | Best | Simple Tricks To Make Money From Youtube | Chitika

                                   

Add This Widget On Blogger Blogspot With Simple Tricks:

For adding this widget on your blog you should follow the below tutorial for easily add.

Go to Blogger.com

Go to Layout.

Go to Add A Gadget.

Click on Add A Gadget.

Find HTML/JavaScript.

Click on it.

Paste the below below code just in the HTML box.

<style type="text/css">.w2bgft{padding:5px;}.w2bgft input{padding:1px;margin-left:1px;border:1px solid #ccc;}.w2bgft input:hover{border:1px solid #ff0000;}</style><div class="w2bgft"><!--Google Flag Translator by  Trick Of Blogging--><form action="http://www.google.com/translate"><script language="JavaScript">document.write ("<input name=u value="+location.href+" type=hidden>")</script><noscript><a href="http://trickofblogging.blogspot.com/">Trick Of Blogging</a></noscript><input value="en" name="hl" type="hidden"/><input value="UTF8" name="ie" type="hidden"/><input value="" name="langpair" type="hidden"/><input onclick="this.form.langpair.value=this.value" title="English" value="auto|en" type="image" height="20" src="http://www.google.com/images/flags/uk_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Chinese Simplified" value="auto|zh-CN" type="image" height="20" src="http://www.google.com/images/flags/cn_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Greek" value="auto|el" type="image" height="20" src="http://www.google.com/images/flags/gr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Hindu" value="auto|hi" type="image" height="20" src="http://www.google.com/images/flags/in_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="German" value="auto|de" type="image" height="20" src="http://www.google.com/images/flags/de_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Dutch" value="auto|nl" type="image" height="20" src="http://www.google.com/images/flags/nl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Russian" value="auto|ru" type="image" height="20" src="http://www.google.com/images/flags/ru_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Bulgarian" value="auto|bg" type="image" height="20" src="http://www.google.com/images/flags/bg_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Polish" value="auto|pl" type="image" height="20" src="http://www.google.com/images/flags/pl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Czech" value="auto|cs" type="image" height="20" src="http://www.google.com/images/flags/cz_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Croatian" value="auto|hr" type="image" height="20" src="http://www.google.com/images/flags/hr_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="French" value="auto|fr" type="image" height="20" src="http://www.google.com/images/flags/fr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Italian" value="auto|it" type="image" height="20" src="http://www.google.com/images/flags/it_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Portuguese" value="auto|pt" type="image" height="20" src="http://www.google.com/images/flags/pt_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Spanish" value="auto|es" type="image" height="20" src="http://www.google.com/images/flags/es_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Arabic" value="auto|ar" type="image" height="20" src="http://www.google.com/images/flags/sa_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Japanese" value="auto|ja" type="image" height="20" src="http://www.google.com/images/flags/ja_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Korean" value="auto|ko" type="image" height="20" src="http://www.google.com/images/flags/kr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Chinese (traditional)" value="auto|zh-TW" type="image" height="20" src="http://www.google.com/images/flags/tw_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Danish" value="auto|da" type="image" height="20" src="http://www.google.com/images/flags/dk_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Finnish" value="auto|fi" type="image" height="20" src="http://www.google.com/images/flags/fi_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Norwegian" value="auto|no" type="image" height="20" src="http://www.google.com/images/flags/no_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Swedish" value="auto|sv" type="image" height="20" src="http://www.google.com/images/flags/se_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Catalan" value="auto|ca" type="image" height="20" src="http://www.google.com/images/flags/cl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Filipino" value="auto|tl" type="image" height="20" src="http://www.google.com/images/flags/ph_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Hebrew" value="auto|iw" type="image" height="20" src="http://www.google.com/images/flags/il_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Indonesian" value="auto|id" type="image" height="20" src="http://www.google.com/images/flags/id_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Latvian" value="auto|lv" type="image" height="20" src="http://www.google.com/images/flags/lv_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Lithuanian" value="auto|lt" type="image" height="20" src="http://www.google.com/images/flags/lt_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Serbian" value="auto|sr" type="image" height="20" src="http://www.google.com/images/flags/rs_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Slovak" value="auto|sk" type="image" height="20" src="http://www.google.com/images/flags/sk_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Slovenian" value="auto|sl" type="image" height="20" src="http://www.google.com/images/flags/si_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Ukrainian" value="auto|uk" type="image" height="20" src="http://www.google.com/images/flags/ua_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Vietnamese" value="auto|vi" type="image" height="20" src="http://www.google.com/images/flags/vn_flag.gif" width="30" name="langpair2"/><span style="float:right;margin:3px 5px;font-size:10px;"></span></form></div>

Now Save Settings.

Click View Blog.

You have done easily. Enjoy it.

Small Disadvantages By Adding This Widget on Your Blogger:

If you are a Google Adsense Publishers then by adding this widget your Google Ads are not shown in translated blog content. But it give you a traffic.If visitors are stay on your website or blog with the help of this widget than nothing is better then this one because it increase the impression and when some one clicks on your Google Ads from other countries then your blog impression is better and you can get a high click through rate from these ads that's why keep blogging like a Good Bloggers and enjoy your life.

Add Other Beautiful Widget On Your Blog To Attract Good Traffic:

I have many widget or gadget for blogger which make your blog perfect and Good Looking Blog and your visitors like it and also subscribe your blog for visit your site daily. One of the best way to increase site or blog traffic is keep update your blog with in a week one or two time minimum because search engine like update content. If you can't update your site daily then search engine forget about your site and not Index or Crawl your site quickly and you can't get more traffic.

I give you some widget or  gadget put these widget on your blog and then i give also Some SEO Tips for blog and after adding these widget put SEO tips on your blog and get traffic in one month.

Best Blogger Gadget To Make Blog Beautiful And Good Looking:

Add CSS Jqeury Drop Down Menu On Blogger

Add Three Or Four Column Footer Widget/Gadget On Blogger

dd Facebook Like Box Widget/Gadget On Blogger

Add Flickr/Picasa Web/Photobucket/Other Albums Slideshow On Blog

Add/Put Blog Table In Blog Post Best Blogger Tricks

How I Make My Blogger Good Looking Best Tricks 

Add Recent Post Moving In Down And Upward Direction

Live Traffic Counter Put In Your Blogger Blogspot

Social Gadget Or Widget For Blogger:

Add Twitter Updates Gadget To Blogspot Blogger

How i Can Put Facebook Like Button in Blogger Post 

Social Bookmarking Button Add To Blogger  

Add Simply/Easily/ PayPal Donate Button To Blogger  

Blogger SEO Tutorials For Massive Traffic:

How I Can Write 100% Original Content For Blogger

Improve Content Keywords Significance 

Best Tricks To Use Custom Robots Tags Selection Blogger  

Make Internal Links In The Blog Post To Increase Rank  

How I Can Use Crawlers And Indexing Tool In Blogger

How to Remove 404 Errors in Blogger Blogspot

Best Blogger Tips And Tricks For My Blog SEO Instantly

When you put these all tips and tricks on your blog then i am sure you can easily get hundred of visitors daily with in a month keep blogging and make good blog and write original content don't be copyright if you copy the content of other blog which have already publish or submit to Google Search Engine then you can not get traffic because you publish the same post after that which is already in search engine Google Bot crawl the old data first and view the results on our browser page. That's why my suggestion is only one don't be use copy content it falls your blog also in search engine. If you use the best tricks for adding the blog in search engine then you can get easily best and more organic traffic on your blog and it is also increase your Google Adsense Earning.

Related Articles:

Hot And Latest Seo Tips For Blogger

How Manage Blogger Title Tags to Improve SEO

Sitemap of Your Blogger Is Submitt To Google And Major Search Engines

The Most Essential Tools for a Blogger Analytics

Avoid From Six Very Common Blogger Mistakes

How to Verify My Blogger Blogspot in Webmaster Tools

How Use Social Website To Increase Your Website Traffic

How I Can Optimize the Post Title Mean My Post Show First

Live Traffic Counter Put In Your Blogger Blogspot

Would You like to know more about the traffic visiting your Blogger Blog then feedjit is a free tracking tool to see the live traffic on your blog and your easily guess how many visitor are online and how many visit this site per-day. In this Blogger tutorial you will learn how to add a feedjit widget to your blog which will track where visitors originate from and what pages they viewed. Adding a feedjit widget to your Blogger Blog is easy and takes less than 2 minutes. This tutorial is suitable for all Blogger Blogspot. Updated 19 January 2013. 

Feedjit monitors traffic to your site and ranks it based on popularity and relevance against the traffic received by other feedjit users in your local area. There is a choice of 4 different widgets. Live Traffic Feed, Live Traffic Map, Re commanded Reading, and Page popularity. Each of these widgets has different functions. 

Feedjit Live Traffic Feed widget for Blogger places a widget on your Blogger blog of the last 10 visitors. By Clicking on the real time link you can actually view the last 50 or so visitors along with the keywords search phrases used to find your site. The Feedjit's Live Traffic Feed shows statistics in real-time about:

1. The city and country your visitors are in
2. The website they arrived from, If any 
3. The page they visited on your Website

Which external link they clicked to leaved your site, if any

Feedjit Traffic Map:
The Traffic Map widget places visitors to your site on a world map according to their physical location.

Feedjit Recommended Reading:
The Recommended Reading widget makes suggestions to visitors about what other blog posts they might be interested in based on general page popularity.


Feedjit Page Popularity:
The Page popularity widget lists the 10 most popular pages that have been accessed by visitors on that day.

                                               
How to Add a Feedjit Live Traffic Feed Widget Gadget to Blogger:
Visit Feedjit
Select Live Traffic Feed.

Click on the Customize it link under live Traffic Feed. This will allow you to enter colors to match the theme of your blog. If you are in doubt I have found that the easiest method to get the custom colors of a site is to go to the Layout > Page Elements Screen in Blogger and click on Add a Gadget and then Adsense. From the configuration screen that pops up you can get the colors of the background, border, title, URL, Text. If you use these same colors in your Feedjit widget it will blend in with the rest of your site. You can preview your widget to make sure it looks as you would like it before adding it to your blog.

To automatically add the widget to Blogger select the Click to Add to Blogger link and follow the instructions. Or to manually add it which I myself prefer right click the code in the box under the heading Live Traffic Feed and Select copy.

1. Navigate to Layout > Page Element in your blog if that page is not already open.

2. Select Add a Gadget in the sidebar and then HTML/Javascript.

3. Paste the code by placing the mouse in the box and right clicking and selecting paste.

4. Save the widget and then using the drag and drop feature of Blogger move it to your desired location. Note HTML/Javascript widgets are best placed after your other widgets for faster loading.

5. Save Template.

6. Click on view Blog to view your newly created Feedjit widget.   

 Click on options in the Feedjit widget and then Ignore My Browser otherwise the widget will record your visit each time you view you blog. The option on the widget will now changes to Stop ignoring me which you can reverse by clicking on the link again. If you use more than one browser you will need to tell Feedjit to ignore you for each browser.

To Get This Feedgit Got My Live Feed Widget and click the Get Feedjit and Make your own Feedgit any put HTML in your blogger.