• Facebook Rocks

    Go to Blogger edit html and replace these slide 1 description with your own words. ...

  • Facebook vs Twitter

    Go to Blogger edit html and replace these slide 2 description with your own words. ...

  • Facebook Marketing

    Go to Blogger edit html and replace these slide 3 description with your own words. ...

  • Facebook and Google

    Go to Blogger edit html and replace these slide 4 description with your own words. ...

  • Facebook Tips

    Go to Blogger edit html and replace these slide 5 description with your own words. ...

Fixed Position Happy Women's Equality Day Banner For Blogger

It's time for another gadget to add some Women's Equality Day cheers to your blog.In this post i have a stylish Happy Women's Equality Day Banner you can fix in the top right corner of your blog to greet your readers.The banner is transparent so it wont block your content and as the reader scrolls the banner followers them.A great simple way to wish your readers a Happy Women's Equality Day.

Steps To Add This Stylish Banner To Blogger

  • Login to Your Dashboard.
  • Go to Templates >>Edit Html.
  • Find for </head>
  • Paste the below code there.


<style>
.equality {
position: fixed; top: 0%; right: 0%;
zoom:1;
-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;

}
.equality:hover {
position: fixed; top: 0%; right: 0%;
zoom:1.3;
}
</style>

<img class='equality' title='Happy Women's Equality Day' alt="Blog Tips" src="http://i1269.photobucket.com/albums/jj591/aditya9172/blog-toolzhappyequalityday.png"/>


  • Now, click on Save the Template.



It's Done.

Automatic Sitemap Generator

Automatic Sitemap Generator
This is very easy to put automatic sitemap generator for blogger. This script automatically generates new post and add the new!! tag after them (as shown in the above picture ). This script will create a page of all your content and will categories them as per their labels. So that the viewer can see all your content on the same page.

Steps To Add Automatic Sitemap Generator

  • Login to your Dashboard.
  • Go to Pages.
  • New Page >> Blank  Page.
  • Then click on Html section.
  • Paste the below code their. 



<script src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js">
</script>
<script src="http://blog-toolz.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

  • Then just change the blog-toolz.blogspot with your blog link.
  • Now, click on Publish.

It's Done.


Red London Creative Blogger Template


Demo

Download

Template name : London Creative

Template features : Wordpress Look, 2 Columns, Right Sidebar, Photography, Elegant, Featured Content Slider, Fixed Width, Black Background, Top Navigation Menu, Page Navigation.

Release date : July 2012

Author :  www.soratemplates.com

Designer :  freshface.net


Configure Post Date:

Log in to Blogger Dashboard --> Settings --> Change The Date Settings As per your Requirement.

If you don't do this, it will display "UNDEFINED".

Configure Featured Content Slider:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<ul id='fresh_cube_data'>
 <li class='fresh_cube_image_0'>
 <img src='/image.jpg'/>
 <span class='transition' title='random'>
 <div class='post_category' id='slider_post_cat'>/
 <a href='#'>Web Design</a>/</div>
 <div class='post_name'>
 <a href='#' id='slider_img_desc'>1000s of Images In My Mind</a>
 </div>
 </span>
 </li>

<div class='thumbs' id='thumbs'>
<div class='slider_content' id='sl_content'>
<ul id='slider_ul'>
 <li><img alt='img' src='/thumb.jpg'/>
 <div class='slider_tit' style='display:none'>/ Web Design /</div>
 <a class='slider_desc' href='#' style='display:none' title='0'>1000s of Images In My Mind</a>
 </li>

Now replace:
"#" with your featured post URL.
"image.jpg" with your slider image.
"thumb.jpg" with your thumbnail image.

Configure Dropdown Menu:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<div class='menu-nav-container'>
 <ul class='menu' id='menu-nav'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#'>About</a>
   <ul class='sub-menu'>
    <li><a href='#'>Dropdown test</a></li>
 ..........
Just replace "#" with your menu item URL.

Configure Page Navigation Widget:

search for:
var posts=2, // Number of posts in each page
    num=2, // Number of buttons will display

Enjoy............. :)

Awesome jQuery Page Loading Effect For Blogger

This is another blogger trick through which a reader see a loading background during the page load and on complete of page load it disappears. This is jQuery Loading plugin for blogger. This plugin is available with many other animations. So have this plugin to your blog and make it look better.

Steps To Add jQuery Loading Plugin To Blogger

  • Login to your Dashboard.
  • Go to Templates >>Edit Html.
  • Find for </head> tag.
  • Paste any of the below code just above it.

Loading.1




<style>

#btat-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://i1269.photobucket.com/albums/jj591/aditya9172/loading7.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.btat #btat-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#btat-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#btat-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$(&quot;html&quot;).removeClass(&quot;btat&quot;);


$(&quot;#header&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;25%&quot; },1500) });
$(&quot;#footer&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;75%&quot; },1500) });


$(window).load(function(){

    $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;100%&quot; },600,function(){
        $(&quot;#btat-loading&quot;).fadeOut(&quot;fast&quot;,function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>




Loading.2




<style>

#btat-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://i1269.photobucket.com/albums/jj591/aditya9172/loaing2.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.btat #btat-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#btat-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#btat-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$(&quot;html&quot;).removeClass(&quot;btat&quot;);


$(&quot;#header&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;25%&quot; },1500) });
$(&quot;#footer&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;75%&quot; },1500) });


$(window).load(function(){

    $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;100%&quot; },600,function(){
        $(&quot;#btat-loading&quot;).fadeOut(&quot;fast&quot;,function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>



Loading.3




<style>

#btat-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://i1269.photobucket.com/albums/jj591/aditya9172/loading9.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.btat #btat-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#btat-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#btat-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$(&quot;html&quot;).removeClass(&quot;btat&quot;);


$(&quot;#header&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;25%&quot; },1500) });
$(&quot;#footer&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;75%&quot; },1500) });


$(window).load(function(){

    $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;100%&quot; },600,function(){
        $(&quot;#btat-loading&quot;).fadeOut(&quot;fast&quot;,function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>



Loading.4




<style>

#btat-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://i1269.photobucket.com/albums/jj591/aditya9172/loading8.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.btat #btat-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#btat-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#btat-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$(&quot;html&quot;).removeClass(&quot;btat&quot;);


$(&quot;#header&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;25%&quot; },1500) });
$(&quot;#footer&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;75%&quot; },1500) });


$(window).load(function(){

    $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;100%&quot; },600,function(){
        $(&quot;#btat-loading&quot;).fadeOut(&quot;fast&quot;,function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>



Loading.5




<style>

#btat-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://i1269.photobucket.com/albums/jj591/aditya9172/loading5.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.btat #btat-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#btat-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#btat-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$(&quot;html&quot;).removeClass(&quot;btat&quot;);


$(&quot;#header&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;25%&quot; },1500) });
$(&quot;#footer&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;75%&quot; },1500) });


$(window).load(function(){

    $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;100%&quot; },600,function(){
        $(&quot;#btat-loading&quot;).fadeOut(&quot;fast&quot;,function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>



Loading.6




<style>

#btat-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://i1269.photobucket.com/albums/jj591/aditya9172/loading4.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.btat #btat-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#btat-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#btat-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$(&quot;html&quot;).removeClass(&quot;btat&quot;);


$(&quot;#header&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;25%&quot; },1500) });
$(&quot;#footer&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;75%&quot; },1500) });


$(window).load(function(){

    $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;100%&quot; },600,function(){
        $(&quot;#btat-loading&quot;).fadeOut(&quot;fast&quot;,function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>



Loading.7




<style>

#btat-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://i1269.photobucket.com/albums/jj591/aditya9172/loading3.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.btat #btat-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#btat-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#btat-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$(&quot;html&quot;).removeClass(&quot;btat&quot;);


$(&quot;#header&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;25%&quot; },1500) });
$(&quot;#footer&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;75%&quot; },1500) });


$(window).load(function(){

    $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;100%&quot; },600,function(){
        $(&quot;#btat-loading&quot;).fadeOut(&quot;fast&quot;,function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>


Loading.8




<style>

#btat-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://i1269.photobucket.com/albums/jj591/aditya9172/loading.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.btat #btat-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#btat-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#btat-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$(&quot;html&quot;).removeClass(&quot;btat&quot;);


$(&quot;#header&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;25%&quot; },1500) });
$(&quot;#footer&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;75%&quot; },1500) });


$(window).load(function(){

    $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;100%&quot; },600,function(){
        $(&quot;#btat-loading&quot;).fadeOut(&quot;fast&quot;,function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>




Loading.9




<style>

#btat-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://i1269.photobucket.com/albums/jj591/aditya9172/loading1.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.btat #btat-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#btat-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#btat-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$(&quot;html&quot;).removeClass(&quot;btat&quot;);


$(&quot;#header&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;25%&quot; },1500) });
$(&quot;#footer&quot;).ready(function(){ $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;75%&quot; },1500) });


$(window).load(function(){

    $(&quot;#btat-progress-bar&quot;).stop().animate({ width: &quot;100%&quot; },600,function(){
        $(&quot;#btat-loading&quot;).fadeOut(&quot;fast&quot;,function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>

  • Now, find for </body> tag and paste any of the below code as per your requirement above </body> tag.

Loading Only On Homepage




<b:if cond='data:blog.url == data:blog.homepageUrl'>

 <div id='btat-loading'><div
id='btat-progress-bar'></div><div
id='btat-loader'>Loading...</div></div></b:if>


Loading On Every Page



<div id='btat-loading'><div
id='btat-progress-bar'></div><div
id='btat-loader'>Loading...</div></div>

  • Now, click on Save the template.

It's Done.

Spinning Pages Or Links Widget For Blogger

This cool jQuery Spinning Pages or Links Widget For Blogger. This widget is a mixture of jQuery And Css. This widget has a spinning effect. The pages or links mentioned spin and on hover go on slowing down and the stop. This widget is easy to put so have it in your blog.

Demo

Steps To Add Spinning Links Widget

  • Login to your Dashboard.
  • Go to Templates >>Edit Html.
  • Find for <head> tag.
  • Paste the below below the <head> tag.

<style media='screen' type='text/css'>
      #link{
        margin:0 auto;
        height:200px;
        width:200px;
        overflow:hidden;
        position:relative;
        background:transparent;}
    #link ul,
    #link li{
        link-style:none;
        margin:0;
        padding:0;}
    #link a{
        position:absolute;
        text-decoration: none;
        color:#666;
        font-size:20px;}
    #link a:hover{
        color:#ccc;}
</style>
<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
 
var element = $(&#39;#link a&#39;);
var offset = 0;
var stepping = 0.02;
var link = $(&#39;#link&#39;);
var $link = $(link)

$link.mousemove(function(e){
    var topOfLink = $link.eq(0).offset().top
    var linkHeight = $link.height()
    stepping = (e.clientY - topOfLink) /  linkHeight * 0.2 - 0.1;
 
});


for (var i = element.length - 1; i &gt;= 0; i--)
{
    element[i].elemAngle = i * Math.PI * 2 / element.length;
}


setInterval(render, 20);


function render(){
    for (var i = element.length - 1; i &gt;= 0; i--){
     
        var angle = element[i].elemAngle + offset;
     
        x = 120 + Math.sin(angle) * 30;
        y = 45 + Math.cos(angle) * 40;
        size = Math.round(40 - Math.sin(angle) * 40);
     
        var elementCenter = $(element[i]).width() / 2;

        var leftValue = (($link.width()/2) * x / 100 - elementCenter) + &quot;px&quot;

        $(element[i]).css(&quot;opacity&quot;,size/100);
        $(element[i]).css(&quot;zIndex&quot; ,size);
        $(element[i]).css(&quot;left&quot; ,leftValue);
        $(element[i]).css(&quot;top&quot;, y + &quot;%&quot;);
    }
 
    offset += stepping;
}

 
});
</script>
  • Now, go to Layout.
  • Add a Gadget >> Html/Javascript.
  • Paste the below code there.



<div id="link">
    <ul>
        <li><a href="#">Ajax</a></li>
        <li><a href="#">Css</a></li>
        <li><a href="#">Design</a></li>
        <li><a href="#">Firefox</a></li>
        <li><a href="#">Flash</a></li>
        <li><a href="#">Html</a></li>
        <li><a href="#">Chrome</a></li>
        <li><a href="#">jquery</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">Page</a></li>
        <li><a href="#">Safari</a></li>
        <li><a href="#">Web</a></li>
        <li><a href="http://blog-toolz.blogspot.com/">Add This</a></li>
 
    </ul>
</div>


  • Now, click on Save and Enjoy the widget.

It's Done.



Confidence Blogger Template


View Demo
Download


Template name : Confidence

Template features : Wordpress Look, 3 Columns, 4 Columns Footer, Right Sidebar, Magazine, Header Banner, Featured Content Slider, Fixed Width, Clean Design, Gray Background, Top Navigation Menu, Page Navigation Widget.

Release date : July 2012

Author :  www.soratemplates.com

Designer :  Rifki / www.my-themes.com

Configure Featured Content Slider:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<ul class='slides'>
 <li><img class='attachment-590x339' height='339' src='/image.jpg' width='590'/>
 <div class='flex-caption'>
 <h1><a href='#'>Convallis consequat</a></h1>
 <p>Lorem ipsum integer tincidunt quisque...</p>
 </div>
 </li>

Now replace:
"#" with your featured post URL.
"image.jpg" with your slider image

Configure Dropdown Menu:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<ul class='sfmenu' id='sfmenu'>
 <li><a href='#'>Home</a></li>
 <li><a href='#'>Categories</a>
  <ul class='sub-menu'>
   <li><a href='#'>Entertainment</a></li>
   <li><a href='#'>Lifestyle</a></li>

Just replace "#" with your menu item URL.

How To Change Header Banner:

find this:
<div class='banner-ad'>
 <a href='#'><img height='60' src='/banner.jpg' width='468'/></a>
</div>
Now replace:
"#" with your banner URL.
"banner.jpg" with your banner image.

Configure Social Widget:

search for:
<ul class='clearfix' id='social-link'>
 <li><a class='dribbble' href='#'>dribbble</a></li>
 <li><a class='twitter' href='#'>twitter</a></li>
 <li><a class='facebook' href='#'>facebook</a></li>

Replace "#" with your Social Account URL.

Configure Page Navigation Widget:

search for:
var posts=6, // Number of posts in each page
    num=2, // Number of buttons will display

Add Olympics Google Doodle Games To Your Blog

During London Olympics 2012 Google made four new game doodles. This game doodles where played by millions and millions of users and where liked also. After the end of Olympics Google removed them. If you wanna play that games again you can play just by going to this link and also you can have them on your blog.

Steps To Add Google Doodle To your Blog/Website

  • Go to Your Blogger Dashboard.
  • Write a New Post And Paste the below code in HTML section.
  • Or to add it in a Gadget Paste any of the below code there.

Hurdles

<iframe src="//www.google.com/logos/2012/hurdles-2012-hp.html" frameborder="0" height="350px" width="900px" style="position: absolute; left: 0px; top: -30px; "></iframe>



Basket Ball




<iframe src="//www.google.com/logos/2012/basketball-2012-hp.html" frameborder="0" height="350px" width="900px" style="position: absolute; left: 0px; top: -30px; "></iframe>


Slalom Canoe




<iframe src="//www.google.com/logos/2012/slalom_canoe-2012-hp.html" frameborder="0" height="350px" width="900px" style="position: absolute; left: 0px; top: -30px; "></iframe>


Soccer




<iframe src="//www.google.com/logos/2012/football-2012-hp.html" frameborder="0" height="350px" width="900px" style="position: absolute; left: 0px; top: -30px; "></iframe>

Featured Post Widget For Blogger

This is another widget to increase traffic and inbound links. This widget will make your readers surf more on your blog. This widget is placed at the bottom of your Blog. This can be customized by us.

Why To Use It ?

  • Easy To Use.
  • Eye Catchy.
  • Low CSS means High Loading Speed.
  • Easy To Customize.

Steps To Add This Featured Post Widget

  • Login to your Dashboard.
  • Go to Layout.
  • Add a Gadget >> Html/Javascript.
  • Paste the below code There.



<style>
.Fadein3 img {
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
.Fadein3:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
#blog-toolzboxes{
height:210px;
overflow:hidden;
margin:0px;
width:948px;
padding:5px 5px;
}
#blog-toolzboxes ul{
margin-left: 10px;
 padding: 0pt;
 position: relative;
 list-style-type: none;
 z-index: 1;
  width: 100%;
 }
#blog-toolzboxes ul li{
 overflow: hidden;
 float: left; width: 180px;
 height: 180px;
 border-top:0px solid #333;
 margin-right:6px;
 padding:2px 0px 4px 0px;
 }
#blog-toolzboxes ul li:hover{

 }
#blog-toolzboxes img{
width:150px;height:100px;
 padding:2px;
 border: 1px solid #A3A3A3;
 border-radius:10px;
 -moz-border-radius:10px;  margin-top:0px;
}
#blog-toolzboxes img:hover{
 border-radius:20px;
}
.blog-toolzbody img{
float:left;

}
.blog-toolzbody {
position:relative;
margin:0 5px 0 5px;
width:170px;
height:210px;
display:inline;
float:left;
color:#c4c4c4
}
.blog-toolzbody h3{
padding:5px 0;
font-size:12px;
font-weight:bold;
 font-family: verdana, sans-serif, arial; margin:0;
}
.blog-toolzbody h3 a:link,.blog-toolzbody h3 a:visited{color:#2E91E7;}
.blog-toolzbody h3 a:hover{color:#E7892B}
.blog-toolzbody p{margin:0; padding:0 0;color:#000000;font:10px normal verdana, sans-serif, Arial;}</style>
<div id='blog-toolzboxes'>
<div style='visibility: visible; overflow: hidden;width: 100%; '>
<ul>
<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Post Link'>
<img alt='chromegt' height='100' src='Image Link' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Post Link'>Post Title</a></h3>
<p>Post Description</p>
</div>
</li>

<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Post Link'>
<img alt='chromegt' height='100' src='Image Link' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Post Link'>Post Title</a></h3>
<p>Post Description</p>
</div>
</li>

<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Post Link'>
<img alt='chromegt' height='100' src='Image Link' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Post Link'>Post Title</a></h3>
<p>Post Description</p>
</div>
</li>

<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Post Link'>
<img alt='chromegt' height='100' src='Image Link' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Post Link'>Post Title</a></h3>
<p>Post Description</p>
</div>
</li>

<li>
<div class='blog-toolzbody'>
<a class='Fadein3' href='Post Link'>
<img alt='chromegt' height='100' src='Image Link' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='Post Link'>Post Title</a></h3>
<p>Post Description</p>
</div>
</li>

</ul>
</div>
</div>
Note: Change the Red,Green,Blue,Pink Link as per it is written.

  • Now, Click on Save.



Fixed Position Indian Independence Day Banner For Blogger

Fixed Position Indian Independence Day Banner For Blogger
It's time for another gadget to add some Independence Day cheers to your blog.In this post i have a stylish Happy Independence India Banner you can fix in the top right corner of your blog to greet your readers.The banner is transparent so it wont block your content and as the reader scrolls the banner followers them.A great simple way to wish your readers a Happy Independence Day.

Steps To Add This Stylish Banner To Blogger

  • Login to Your Dashboard.
  • Go to Templates >>Edit Html.
  • Find for </head>
  • Paste the below code there.


<style>
.independence {
position: fixed; top: 0%; right: 0%;
zoom:1;
-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;

}
.independence:hover {
position: fixed; top: 0%; right: 0%;
zoom:1.3;
}
</style>

<img class='independence' title='Happy Independence Day To My Fellow Indians' alt="Blog Tips" src="http://i1269.photobucket.com/albums/jj591/aditya9172/happyindependenceday-1.png"/>


  • Now, click on Save the Template.



It's Done.

Graphical Subscription Widget For Blogger

This is awesome graphical widget made by me. This widget has a cool look. This widget looks as if the text area has come out through the blogger icon. I have provide you many subscription gadgets before. This widget can be placed any where. As we know that readers are more important then traffic. So to increase readers we need some subscription widgets. Having such a catchy widget will surely increase your readers.
So have it in your blog.

Steps To Add This Graphical Subscription Widget

  • Go to Blogger.
  • Go to Layout.
  • Add a Gadget >>Html/Javascript
  • Paste the below code there.



<style>#FollowByEmail1{
position:relative;

background-image: url(http://i1269.photobucket.com/albums/jj591/aditya9172/subscribeback.gif) !important;
background-position: 0 29px;
background-repeat: no-repeat;
height: 150px;
}
input.follow-by-email-address{
background: #68514B;
border: none;
color: #BAA4A0;
font-family: Georgia,Verdana,Sans-Seif,Arial;
font-size: 12px;
left: 50px;
padding: 8px;
position: absolute;
top: 50px;
width: 131px;
}
input.follow-by-email-submit{ position: absolute; right: 9px; top: 50px; }

</style> <div class='widget FollowByEmail' id='FollowByEmail1'>

<div class='widget-content'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=blog-toolz", "popupwindow", "scrollbars=yes,width=550,height=550"); return true' target='popupwindow'>
<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
<input class='follow-by-email-submit' src='http://i1269.photobucket.com/albums/jj591/aditya9172/button_subscribe.gif' type='image' value='Submit'/>
<input name='uri' type='hidden' value='blog-toolz'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>

Note: Change the red text with your username.

  • Now, click on Save.


It's Done.

Netoopsblog Like Widget For Blogger.

This is awesome looking follow me widget with subscription box.This widget is officially made by Netoopsblog. Thanks to netoopsblog to provide the tutorial of this such an awesome widget.This widgets icons look as if they are made of decomposing wood hanging on the wall of your blog.And below the follow me buttons there is a subscription box which is also very important in increasing traffic.

Steps to Add This Follow Me Buttons To Blogger

  • Login to your Dashboard.
  • Go to Layout.
  • Add a Gadget >>Html/javascript.
  • Paste the below code there.



<style type="text/css">

img.beintouch:hover {
    background: none repeat scroll 0 0 #D6D6D6;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #565656;
}
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsqFgMGaYh5p0wQnYOjj4748NKRToVdQqJoGu-S9m18Lybqi7CA0zF2FJ6MV-mmrSnx7BJ5WVUF6jsYsPTWZyR8YTCLgJagL95uOtKT5tnjBoyFA9eJU1G01LV86TN1v5rZ2VLZAcfaxI/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 2px #CCCCCC inset;
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
    width: 176px;
}
.ebutton {
    background: -moz-linear-gradient(center top , #FBFBFB 0%, #F4F4F4 100%) repeat scroll 0 0 #ABAB12;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    color: #444444;
    cursor: pointer;
    font-weight: bold;
    margin-left: -18px;
    margin-top: 5px;
    padding: 6px 15px;
    text-decoration: none;
}
</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/BloggingTrickzAndToolz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6qzN8qrRTe8xuGUT2vyElpBQiYAgi5vvkp5hRmev9-_fw9fr-6D_XTxHQfAK9sDIZhVrIKDrllXtIiwzRQkSDlxuRZDF8ofxBOwCzJlVPGfAR1DsAQoPVEsPcb4rXpWizh9GVxtupzY/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/AdityaThakker13/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx062RHZ4XOD3G4W0HaBifThrj_CFMLgx4CldPjibu3Zy4_hb8V4xQ77E5w5ALl-nHk7Qef90CYtf33odXAmCq51Kcm7NgQ8cw1OH4jIIOaLZTLby5HzEhIBfHZ4ZJ58TdED8TN5pAUdg/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/blog-toolz" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4QU7-GEkaBO_uXJLfU1ZElwc2KZ2MhN0xndOZfYLCEcWKg8eJigpG6kPa8rtwIJZ-Z1WOzXITG1V3hW4shNAfdbyHF70E3IgoCDbHCBmGCAWa2jMoEtUVDqHxQU2J7saCKsiWZ_TFT9I/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a></td></tr></tbody></table>
<center><div>Get Latest Tips via e-mail</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blog-toolz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="blog-toolz" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form></center>

Note: Change the above red text as per your requirement.

  • Now, click on Save.
It's done.

ChromeGT Blogger Templates


View Demo

Download

Template name : ChromeGT

Template features : Wordpress Look, 2 Columns, 4 Columns Footer, Right Sidebar, Modern, Featured Content Slider, Fixed Width, Black Background, Top Navigation Menu, Page Navigation Widget.

Release date : August 2012

Designer :  www.temashdesignlab.com

License : Creative Commons Attribution 3.0


Configure Featured Content Slider:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<div class='nivoSlider' id='slide'>
 <a href='#'><img src='/image.jpg' title='Modern Futuristic Unique Design'/></a>

Now replace:
"#" with your featured post URL.
"image.jpg" with your slider image

Configure Dropdown Menu:

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:
<ul class='menu' id='menu-main-navigation'>
 <li><a class='parent' href='#'><span>Home</span></a>
 <div><ul>
  <li><a href='#'><span>Left Sidebar Homepage</span></a></li>
  <li><a href='#'><span>Homepage Layout 2</span></a></li>

Just replace "#" with your menu item URL.

Configure Social Widget:

search for:
<div id='social'>
 <a class='tt_top' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' id='rss' title='RSS'/>
 <a class='tt_top' href='#' id='googleplus' title='Google+'/>
 <a class='tt_top' href='#' id='twitter' title='Twitter'/>
 <a class='tt_top' href='#' id='facebook' title='Facebook'/>
</div>
Replace "#" with your Social Account URL.

How to change Author Information:

Find this:
<div class='post-author-title'>
 <h2>About the Author</h2>
</div>
<div class='post-author-content'>
 <div class='border-img leftside avatar-box'><img class='avatar avatar-60 photo' height='60' src='/gravatar.jpeg' width='60'/>
 </div>
 <h3>Written by Admin</h3>
 <p>ChromeGT is a modern, powerful...</p>


Configure Page Navigation Widget:

search for:
var posts=3, // Number of posts in each page
    num=2, // Number of buttons will display

Top Commenters Widget With Rounded Avatars

Yet another WordPress widget for blogger. This widget is Top commenters widget.This widget only made to  increase your blog's comments. This widget shows the Top Five Commenters name with their thumbnail in a round shape. This widget showed be placed below every post so that is appreciates the readers to comment
on your blog.It also specify the number of comments that the Top Commenters have written.So to increase Blog's Comments have this widget in your blog.


Steps To Add Top Commenters Widget

  • Login to your Dashboard. 
  • Go to Layout.
  • Add a Gadget >>Html/Javascript.
  • Paste the below code there.



<style type="text/css">

.top-commenter-line img {

-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 5;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRkjp5C_ASbbadoEg35N9T0JwC06oZ3NDgB9GElCBCChlxBU8ybLC6WEO6tRGJXdt1kQap9-c_IFCbNiOQ8g30CkW9C2w_sZaMcXu6iMh9WRkycvXIjfc2wKs4XDJspFVUshKhkhnH_8/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }

  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Note: Change the red text number with your requirement.
  • Now, click on Save.

To Add This Widget Below Every Post

  • Go to Templates.
  • Edit Html>>Expand Widget Templates.
  • Find for the Below Code.
<div class='post-footer-line post-footer-line-1'/>


  • Paste the Below Code just after the above code.

<style type="text/css">

.top-commenter-line img {

-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 5;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRkjp5C_ASbbadoEg35N9T0JwC06oZ3NDgB9GElCBCChlxBU8ybLC6WEO6tRGJXdt1kQap9-c_IFCbNiOQ8g30CkW9C2w_sZaMcXu6iMh9WRkycvXIjfc2wKs4XDJspFVUshKhkhnH_8/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }

  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>



  • Now, click on Save the Template.

It's done.