Numbered Page Navigation For Blogger New Script

Today we will see how to add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friendly visitor if you are having a lot of jobs and bloggers readers.Few has some problems with the above script navigation page. Now here is a completely new script and work for numbered page navigation (i.e. Panigation) for Blogger. The paging widget for blogger it easy for the visitor. It is a must have for any new blogs.This new script allows you to add numbered page navigation to blogger/ blogspot blog with page numbers starting(1, 2, 3, 4 ….) like those of a book.

Add Numbered Page Navigation Widget With DIfferent Styles For Blogger / Blogspot




Page navigation widget for blogger is most popular widget, and most bloggers are using this. because these players are only provided in the wordpress blogs hosted or blogs.But now his trick has been made ​​available to bloggers is also here that I am giving this Page Navigation Widget with different styles and options for full customization


How To Install This Widget On Blogger :-

Customize the Given Options and Click on Generate button
Click Add to Blogger button to add this widget on your Blog

Stylish Numbered Page Navigation Widget with Colored Styles For Blogger


Numbered Page Navigation Widget is a JavaScript hack for blogger to easily navigate blogger pages. In this post i am giving stylish navigation with different colorful styles.

An error was found in some blogs and it is also fixed in this widget.
eg.hiding at top


How To Install This Widget On Blogger :-

1. Click the below Button
2. Customize the Options given in Widget form
3. Click on "Generate" Button
4. Finally click On "Add To Blogger" Button

How to Add Numbered Page Navigation Widget for Blogger / Blogspot

Page navigation is awesome widget that allows navigation of page number to the visitors. You might have seen numbered page navigation in many WordPress blogs. It is simple JavaScript that allows your older posts, new posts and links to the house numbers. Have you seen older posts, new messages and links at home bored.



How To Add Numbered Page Navigation Widget to Blogger Blog?

I am giving best customizing options to this widget

Note:-Choose colors for your convenience you feel good.

1.Customize Options in Widget Form
2.Click on Generate Button
3.Then finally Click on Add to Blogger Button to add as a Widget

Blogger Page Navigation Widget With DIfferent Styles

How To Install This Widget On Blogger :-

Customize the Given Options and Click on Generate button
Click Add to Blogger button to add this widget on your Blog

UPDATED

Change based on your blog setting :
var postperpage=5;
var numshowpage=3;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Customize Label (if you already use my previous Page Navi don’t use this step)

Go to the Edit HTML page and “Expand Widget Templates”
Find this (all of this text in your xml or template)

'data:label.url'

and Replace with this

'data:label.url + "?&max-results=5"'

Change 5 base on how many post every page

Many thanks to Harish for making this code , Some Stylings and PageNavi Script by Abu Farhan and I just tested and modified to work on blogger

Add Flash Twitter Follow Me Buttons to Blogger Blogs / Websites

Twitter is a social networking sites popular in the world of bloggers to promote their blogs. So here I am very cool Twitter Blogger widget, now it shows me how to add flash buttons to your twitter blogs and websites. These are the widgets based on Flash animations and have some nice effects.These buttons can help Twitter Flash Spice up your blogs, Webssites and can help you gain more followers on Twitter. These are designed and developed by twitterflash.net. I'm taking all the 15 types of one-click install to your blog.

How to Install Flash Animated Twitter Follow Me Widget To Blogger / Blog / Websites





I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..

Step 1:


If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf" width="150" height="150"><param name="movie" value="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=rohul786"></param><a href="http://24work.blogspot.com/" title="Blogger Widgets">Blogger Widgets</a><embed src="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="150" height="150" menu="false" wmode="transparent" flashvars="username=rohul786"></embed></object>

And now click Save

How to Install Flash Twitter Follow Me Buttons on Your Blog?

1. Choose Any Flash Follow Me Button As You Want

2. Replace rohul786 With Your Twitter User Name

3. Customize Width And Height as You Need

4. Click on Generate Button and Finally Click on Add to Blogger Button to add this widget on your blog.



OR

5. Click on Get Code Button and Copy the code to use it.

Related Posts Widget For Blogger / Blogspot with jQuery

Related posts widget is very important for a blog, because it increases the number of page views and also help the visitor to view other posts related to blog. Now here is wonderful trick to display links to related posts beneath each posts. At their blogs today there are many types of related post widget, and related items thumbnail images using HTML, Java script, etc. .. Here I will show a method that is easy to show install.It only title jQuery.It related post widget will look like a picture below.

How To Add Related Posts Widget For Blogger



I have seen few who are showing the Related Posts Widget of posts below their posts. It’s also a good script placement which can increase your pageviews.

To add the code , just follow the above instructions.


I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.

Step 1:



In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

<!--Related Posts Scripts and Styles www.bdlab.blogspot.com Start-->

<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts .widget{

padding-left:6px;

margin-bottom:10px;



}

#related-posts .widget h2, #related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:blue;

}

#related-posts a:hover{

color:blue;

}

#related-posts ul{

list-style-type:none;

margin:0 0 0px 0;

padding:0px;

text-decoration:bold;

font-size:15px;

text-color:#000000

}

#related-posts ul li{

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGDDH4WyqwASbjtuh9xyPhUfGUVjeMWkIoVkNxAjgAWieGvImolkQPv_BH3s8ZlVd14BcBkHJoLeFfGzMfJ8WZtQBwqXqj5DCAvFNCiWJS-01tlXZcEjygTswov945ssOy0Ai60r3fABc/s200/greentickbullet.png) no-repeat ;

display:block;

list-style-type:none;

margin-bottom: 13px;

padding-left: 30px;

padding-top:0px;}

</style>



<script type='text/javascript'>

var relatedpoststitle="Related Posts";

</script>

<script src='http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-for-blogger-24work.js' type='text/javascript'/>



<!--Remove--></b:if>

<!--Related Posts Scripts and Styles www.bdlab.blogspot.com End-->

If you want to change the title of your widget you can edit this line of the above code

var relatedpoststitle="Related Posts";

If you want you can edit the blue and black colors present in this code



2.Now find this line of code

<div class='post-footer-line post-footer-line-1'/>

If you cant find it then try finding this one

<p class='post-footer-line post-footer-line-1'/>

Now immediately after any of these lines(whichever you could find) place this code snippet

<!-- Related Posts Code www.bdlab.blogspot.com Start-->

<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://24work.blogspot.com'><img style="border: 0" alt="Related Posts Widget for Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNW6CKMqjHBe5LUbH_YcgepdSvJfzPQ495dwe2Y2kOlqOqmYXfdGFDoOHrhdKQ6RbT-pKMyn-eTJKtsdR1WXVblQELsieRSeGazSwKgRtST2KXVU5tJB_t6QdsIM4cFhjg4wLhZHXilkSx/s1600/blogger-widgets.png" /></a>


<script type='text/javascript'>

var maxresults=5;

removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);

</script>

</div>



<!--Remove--></b:if>

<!-- Related Posts Code www.bdlab.blogspot.com End-->

And now click Save Template





You can adjust the maximum number of related posts being displayed by editing this line in the code.

var maxresults=5;

Note: If you want to display the Related Posts on every page, then remove the lines of code starting with <!--Remove-->

How To Add jQuery Related Posts Widget for Blogger

Typical Usage #1

To display related links at the end of every post. copy this code into a new HTML/Javascript widget and place at the bottom of the post or at the footer in the page elements section. Widget uses jQuery v1.3.2, If you already included jQuery into your blog. no need to do it again.

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.


Now find (CTRL+F) this code in the template:

<data:post.body/>

And immediately after it, paste this code:

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>


<script src="http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-widget-1.0-24work.js" type="text/javascript"></script>



<script type="text/javascript">

relatedPostsWidget({

'containerSelector':'div.post-body'

,'loadingText':'loading...'

});</script>

And now click Save Template




Typical Usage #2

To show related links at the side column. copy this code into a new HTML/Javascript widget and place at the side in the page elements section.Again, If you already included jQuery into your blog. no need to do it again.

How to Install Related Posts Widget related links at the side column


I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..



Step 1:



If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-widget-1.0-24work.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'loadingText':'loading...'
});</script>

And now click Save

Multi-Color Effect For Your Links On Hover For Blogger / Blogspot

How to create text links in different colors? Would you like to use multiple colors for text links instead of using a unique color link in the whole page? Confused start to tell what the title, purpose ANAA if you want to link touched the pointer to uppercase, bekedip flashing rainbow colors and the background like fireworks or a star-studded.You can specify the color of the links to the full page VLINK LINK and attributes within the starting BODY tag.

How to add multiple link styles

Want to make a link to your blog and rainbow-colored flashing when the pointer is affected? It is very easy

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.



Step 1:



In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

</head>

And exactly before it add the next code :

<script type='text/javascript'>

//<![CDATA[

var rate = 20;

if (document.getElementById)
window.onerror=new Function("return true")

var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID

if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}

function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}


function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}


function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


function ChangeColor()
{
objActive.style.color = makeColor();
}


function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}

elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;

elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}

//]]>

</script><a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>

Now Click Save Template


And you are done.

Customize And Demo.

You can change this value

var rate = 15 ; 

in the above code to control the speed of color transformation by increasing or decreasing the number 15








How to create a rainbow colored hover link


If you want to use this Multicolor link hover effect on your Blogger Blog
Then follow below steps



In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.



Now find (CTRL+F) this code in the template:

</head>

And exactly before it add the next code :

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript" src="http://safir85.ucoz.com/24work-blogspot/multi-color/LinkPelangi.js"></script>

Now Click Save Template



















How to Add Rainbow Color Effect For Your Links In Hover For Blogger / Blogspot


Hello friends! Effect of rainbow colors to random colors will give your link on hover. This widget works based on simple JavaScript. Once applied, all the links on the page displays a rainbow effect onmouseover.


Watch Live Demo

How to add this widget to blogger?

Just click Add to Blogger Button Bellow

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://safir85.ucoz.com/24work-blogspot/multi-color/rainbow_colors_24work.js" type="text/javascript"></script>

(OR)

1. Login to Blogger Account
2. Go to Design > Page elements
3. Click Add a Gadget and choose Html/JavaScript
4. Paste Bellow Code and click Save Button

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://safir85.ucoz.com/24work-blogspot/multi-color/rainbow_colors_24work.js" type="text/javascript"></script>

Please leave your comments and responses for better improvement of my blog

Falling Objects / Falling Text / Marquee Scrolling Text Generator for Blogger

You can show the falling objects or graphics to your Blogger profile page. This generator falling objects to specify an image of your choice. Once you paste the HTML code to your Blogger profile page, you see several copies of the image of all that fall on the page!

For this to work, make sure you specify the exact location of an image. Also note that some browsers can not display the objects that fall as planned.The widget is originally developed by www.bdlab.blogspot.com, i just changed something in the widget.

Blogger Falling Object Generator Code

Blogger Falling Text Code Generate

Here's a cool way to get that "falling text" effect on your Blogger profile page. Elsewhere, you can use JavaScript for the effect of the fall of text - but not on Blogger. Fortunately, you can use a little HTML trick to get the same effect!

Use the form below to generate text fall into your Blogger profile page. You can then copy and paste the HTML code on your profile page.The widget is originally developed by www.bdlab.blogspot.com, i just changed something in the widget.

Marquee Scrolling Text Generator for Blogger

In HTML, allows you to have a marquee scrolling text and images. Tents are perfect for your Blogger page, allowing you to do things that normally require JavaScript (which does not allow Blogger).

You can create a Blogger marquee to scroll horizontally or vertically. You can also change other things as the speed at which it moves.

Use the form below to generate the code for Blogger marquee. Simply select the values ​​you need, click "Generate Marquee and Preview", then copy and paste in your profile page.The widget is originally developed by www.bdlab.blogspot.com, i just changed something in the widget.

How to Install Blogger Code Generator Widget


I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..



Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

Recent Comments Widget For Blogger / Blogspot with Top Commenters

This post explains how you can add Recent Comments widget for Blogger Blogspot blogs.Once the reader finds a recent comments widget in the sidebar of the blog, will come to know that your blog is quite active and invites you to send comments on his blog. In this way you can collect some active user base to comment on your blog posts.Now you can reward your best commentators, showing their names with clickable links to your Blogger blog and it helps to see that comments in his blog more often.

How to Install WordPress styled Recent Comments Widget For Blogger

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..


Step 1:


If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script style=text/javascript src=http://safir85.ucoz.com/bdlab-blogspot/24work/recent-comments/recent-comments-widget.js></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://bdlab.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://24work.blogspot.com/>Blogger Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>

And now click Save








How to Install Recent Comments Widget For Blogger

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script style=text/javascript src=http://safir85.ucoz.com/bdlab-blogspot/24work/recent-comments/rc1blogger.js ></script>
<script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script>
<script src=http://bdlab.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr"><a href=http://24work.blogspot.com/>Recent Comments</a> <a href=http://24work.blogspot.com/ target=_blank title=blogger widgets>Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px #cccccc dotted; padding-top: 7px!important; padding-bottom: 7px!important;}
#rcdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT5rbjmcuF-6Zro5Rgu2p6BVHTqlP5F12rTQ6u65BkfO41N6-ZsmhvGR6wIFbb3HkmJ3MddpBnQ81tfswoT1GtQS83fE_RBE-SOc_tNliag0cTmVG0gZAQvf3MdvEN8AzOjw_KeLC0uglP/s320/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rcdr, #rcdr a {color:#808080;}
</style>

And now click Save











Display only the comment author and the comment

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script style=text/javascript src=http://safir85.ucoz.com/bdlab-blogspot/24work/recent-comments/rc1blogger-cut.js >
</script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script>
<script src=http://bdlab.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr"><a href=http://24work.blogspot.com/>Recent Comments</a> <a href=http://24work.blogspot.com/ target=_blank title=blogger widgets>Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px #cccccc dotted; padding-top: 7px!important; padding-bottom: 7px!important;}
#rcdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT5rbjmcuF-6Zro5Rgu2p6BVHTqlP5F12rTQ6u65BkfO41N6-ZsmhvGR6wIFbb3HkmJ3MddpBnQ81tfswoT1GtQS83fE_RBE-SOc_tNliag0cTmVG0gZAQvf3MdvEN8AzOjw_KeLC0uglP/s320/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rcdr, #rcdr a {color:#808080;}
</style>

And now click Save






How To Add Recent comments widget Generator :


1. Customize Bellow form and Click on Generator button.

2. And Click Add to Blogger button to add this widget to your blog.





Precaution: Do NOT add a slash ‘/’ after the URL. It should be BlogName.blogspot.com and not BlogName.blogspot.com/ . Also http:// part has NOT to be added before the URL.

Many thanks to bloggerplugins for making this code and I just tested and modified to work on blogger

OPTIONAL SETTINGS

How to change the number of comments

This widget is set to display 5 recent comments. If you want to change that number, just look for the number 5 in the code and replace it with the number of comments you want to be displayed. I recommend setting it to 5 to 8 comments.

var a_rc=5

How to change the number of characters / hide excerpts

This widget is set to display a maximum of 100 characters of comment excerpt for each comment. If you want to change that number, just look for the number 100 in the code and replace it with the number of characters you want to be displayed. *

var o_rc=100

*Recommended setting: 50 to 100.
If you want to hide the comment excerpts, just enter 0 (zero). Ex. …var o_rc=0


How to display the date of comments

If you want to show the dates of comments, look for this line:

var m_rc=false

and replace the false with true.

Change YOUR BLOG URL with your blog url. Don't include www.

Replace http://bdlab.blogspot.com ( given in RED bold letters) with your blogspot URL or your website URL. Do not try to change anything from the code































How To Add Top Commenters Widget in Blogger

No need to explain about the comments feed. Each comment not only helps the commentator, but also the owner of the blog. Discuss and comment back is a powerful tool in SEO.Being owner of a blog, it is our duty to find it "comment" more and then give a great respect for them. Here the code for creating a "widget TOP COMMENTATOR" from the last 10,000 comments.You may have noticed the widget Commentators Save on WordPress blogs. Sometimes referred to as Best Commentators Widget. Now you can reward your best commentators, showing their names with clickable links to your Blogger blog and it helps to see that comments in his blog more often.

Now you can show your blog Top commentators, or you may call the King of commentator. With this widget, you can encourage your visitors to leave comments. Is not that good? It's nice.

So, let's see how to install this Top Commentators Widget for Blogger / Blogspot with Advanced Features..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a></a><script type='text/javascript'>
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script type="text/javascript" src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&EntertheURL=http%3A%2F%2FYOURBLOGNAME.blogspot.com&number=5&Nametobeexcluded=yourName"></script>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr"><a href=http://24work.blogspot.com/>Top Comments</a> <a href=http://24work.blogspot.com/ target=_blank title=blogger widgets>Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px #cccccc dotted; padding-top: 7px!important; padding-bottom: 7px!important;}
#rcdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT5rbjmcuF-6Zro5Rgu2p6BVHTqlP5F12rTQ6u65BkfO41N6-ZsmhvGR6wIFbb3HkmJ3MddpBnQ81tfswoT1GtQS83fE_RBE-SOc_tNliag0cTmVG0gZAQvf3MdvEN8AzOjw_KeLC0uglP/s320/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rcdr, #rcdr a {color:#808080;}
</style>

And now click Save






You need to change :

YOURBLOGNAME with your blog name without http://
YOUR NAME with your name which will be excluded in that widget.
number=5 Change the value of Commenter will be shown. [Optional]

4. Save and DONE!



Also, the commenter above get dofollow backlinks. This widget is really useful and encourage visitors to send the maximum of the King comments in your blog commentator.




How To Add Top comments widget Generator :


1. Customize Bellow form and Click on Customize button.

2. And Click Add to Blog >> button to add this widget to your blog.


1.Enter the name of your Blog without the "http://" part. The URL would be like yourblog.blogspot.com for the blogspot users and www.yourdomain.com for the custom domain users. So Enter the URL in the Blog URL field.
2.Key in the name that you wish to exclude from the commenters list, This is your name and type it in Filter Your Name field.
3.Lastly type in how many top commenters you would like to feature in the Widget. This is by default set to 5

Precaution: Do NOT add a slash ‘/’ after the URL. It should be BlogName.blogspot.com and not BlogName.blogspot.com/ . Also http:// part has NOT to be added before the URL.

Many thanks to corpseofattic for making this code and I just tested and modified to work on blogger

Top Commentators Cloud Widget for Blogger / Blogspot

Reward your best commentators, showing their names with clickable links to your blog. One of the most popular methods is the use of a top commentators widget.This time we will create a new top commentators widget, but with a different look. Let's make a cloud, like a tag cloud, except with the commentators and the content.I personally prefer this version of clouds over the top commentators widget conventional, simply because most commentators packets of the same amount of space.The widget is originally developed by bloggersentral.com, i just changed something in the widget.

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..

<!-- Top Commentators Cloud --><a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";//clickable commentator name
display = display + ccLName + " ";
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://bdlab.blogspot.com
&Exclusions=Anonymous,Greenlava
&ShowHowMany=20
&Order=alphabet
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
</div>
<span style="font-size: 80%; float:right;;margin-top:5px;">Get this <a href="http://24work.blogspot.com" target="_blank">commentators</a> <a href="http://24work.blogspot.com" target="_blank">widget</a></span>
<!-- Top Commentators Cloud End -->

And now click Save



Customizing Commentators Cloud

YourBlogUrl
This is your blog URL, replace http://bdlab.blogspot.com with yours. Make sure you omit the slash at the end of the URL (as in .com/).
Exclusions
List the commentator names you want to exclude from the cloud. Separate each name with a comma, and don’t put space between them.
Show How Many
Specify how many top commentators you want to appear in the cloud.
Order
Enter alphabet if you want to arrange the names alphabetically.
Enter frequency if you want to arrange them by frequency (with the most frequent commentators on top).
Comment count
Comment count (in bracket) is displayed by default. To remove it, just delete this line of code.

How to change mouse cursor in blogger blog to animated cursors

How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your blog is, changing mouse cursor on your blog. Changing the mouse cursor in blogger or blogspot blogs is very easy.This tutorial will help you to change the mouse cursor of your blog to animated cursors.Many bloggers are asking such kind of questions but there is no tutorial available on the internet.I created this post because there are a blogger friend who asked how to change the pointer / cursor on the blogger. This you can do to decorate the look of blog.

I take the cursor image from http://www.cursors-4u.com and http://rw-designer.com you can change it anytime depends on your festive moods.


How to Install mouse cursor in blogger blog to animated cursors

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.

Step 1:

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

<link href="http://24work.ucoz.com/24work-blogspot/mouse-cursor/24work.blogspot.com-cursors-animated-cursors-1.css" rel="stylesheet" type="text/css" /><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Templates"><img src="http://24work.ucoz.com/24work-blogspot/www.24work.blogspot.com.png" alt="Blogger Templates" border="0" style="position:absolute; top: 0px; right: 0px;" ></a>

And now click Save Template

Change Mouse Cursor Generator by 24work.blogspot.com

How To Add Mouse Cursor Widget To Blogger?

• Choose a type of Mouse Cursor below
• Click on "Genetate" button
• Finally click on "Add to Blogger" to add it to your blog.

Note:  We are going to add more cursor, cursor pointer, cursors, mouse cursor, Totally Free Cursors, Myspace Cursors, Animated Cursors and cursors oftenly so keep visiting this page.



Blogger MySpace Cursor Code Generate



You can change the appearance of the cursor on the MySpace profile page (the cursor is the little that moves on the screen by moving the mouse). For example, you could make the appearance of the cursor as a question mark when the user hovers over an object.The widget is originally developed by code-generator.net, i just changed something in the widget.















How to Install Blogger MySpace Cursor Code Generator Widget

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..


Step 1:


If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the one of code given below
4. Now Click On Save 'JavaScript' You are done.