Loading...

Blogger Tag Cloud Widget by Categories / Labels



This widget is perfect for blogspot users who desire a simple tag cloud for their Categories. The Labels Cloud can easily be implemented within the sidebar of your blog and will match your template wonderfully.






Steps for Implementation

Step 1: Back it Up

Always make sure to back up your Blogger Template before doing anything else!




Step 2: The Labels Gadget



Make sure that you have the Labels Page Element installed. If you haven't already...
  1. Go to Layout >Page Elements .
  2. Click "Add a Gadget" and then add the "Labels" gadget.
Step 3: Locating the "Old Code"
  1. Now go to Layout >Edit HTML
  2. Make sure that the "Expand Widgets Template" box is unchecked.
  3. Now we need to search for the code that looks like this.
    <b:widget id='Label1' locked='false' title='Tags' type='Label'/>
    Your code may look a little different. So try using your browser's search tool to find type='Label'.
Step 4: Replacing the "Old Code" with the "New Code"
  1. Once you've located type='Label', remove the whole line of code that looks just like the code mentioned in part 3 of step 3.
  2. Replace this code that you've just deleted with the code below:
    /*
Distributed by John Smith at WidgetsForFree.blogspot.com
*/ <b:widget id='Label1' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>

/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/

//Settings / Variables
var max = 150; //max css size (in percent)
var min = 70; //min css size (in percent)
var showCount = false;  // show counts? true for yes, false for no
var minCount = 1;  // what is the minimum count for a tag to be shown? 1 for all


//Begin code:
var range = max - min;

//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push(&quot;<data:label.name/>&quot;);
</b:loop>

//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push(&quot;<data:label.url/>&quot;);

</b:loop>

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push(&quot;<data:label.count/>&quot;);
</b:loop>

//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}

//Make an independant copy of counts for sorting
var sorted = counts.slice();

//Find the largest tag count
var most = sorted.sort(sortNumber)[0];

//Begin HTML output
for (x in labels)
{
if(x != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot; &amp;&amp; counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount)
{
var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
}else{
var count = &quot;&quot;;
}
//Output
document.write(&quot;<span style='font-size:&quot; + textSize + &quot;%'><a href='&quot; + urls[x] + &quot;' style='text-decoration:none;'>&quot; + labels[x] + count + &quot;</a></span> &quot; );
}
}

</script>
<br/>
<span style="font-size:80%;float:right;">Powered by <a href="http://www.widgetsforfree.blogspot.com">Blogger Widgets</a></span>
</div>
</b:includable>
</b:widget>


Step 5: Previewing the New Tag Cloud

Before saving the template make sure to click preview. The new tag cloud should now be visible. If not, make sure that you've completed all the steps correctly.





























Top Commenters Widget For Blogger With Backlinks





Top commentators widget for blogger with backlinks to there blogs is very nice widget to show of the names of the readers of your blog with maximum comments with the link to there blog.As this can show any no of names you want with most comments. It's plugin was easily available in wordpress blog to install but for blogspot users was difficult to use.

This was first made by my friend assesmyblog using yahoo pipes but was limited to show upto 5 readers . Then it was modified by amanda but couldn't show up the backlinks of the readers blog.
Then again it was modified which could show now any no of names with backlinks to there blog and works perfect. That was provided by gaurav.

Now follow an easy way to add it to your blog by just adding small bit of javascript to your blog page element.Now lets see how to install it in your blogspot.

Go To LAYOUT > Page Elements > Add a Gadget > Html/Javascript

Now add the below codes to it..



<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 src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&EntertheURL=http%3A%2F%2Fanshuldudeja.blogspot.com&number=10&Nametobeexcluded=Name" type="text/javascript"></script>
<noscript><a href="http://anshuldudeja.blogspot.com" target="_blank">Blogger Hacks</a></noscript>



Change the codes above with in red with name of your blog,total no of names you wanna show and Name with any name you want to exclude from the list of yours.

Now save It . And view your blog. It show up the list of the top of your blog with how many comments they have done.Isn't it very easy to add up this widget.










How To Add Top Commenters Widget in Blogger



Now you can show your blog Top commenters or you can called they King Of Commenter. With this widget, you can encourage your visitors to leave their comments. Isn't that good? It's nice.




Add this widget by follow this tutorial. Steps :



1. Go to your Dashboard > Design > Page Element > Add a Gadget > HTML/Javascript.


2. Put the code below, in it :
<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 src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&EntertheURL=http%3A%2F%2FYOURBLOGNAME.blogspot.com&number=10&Nametobeexcluded=YOUR NAME" type="text/javascript"></script>

<div style="width:1px;height:1px;overflow:hidden"><a href="http://place2how-to.blogspot.com/search/label/Blogger%20Tutorial">More Blogger Tips</a></div>


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


4. Save and DONE!




Also, the Top Commenter will get Dofollow Backlinks. This widget is really very useful and encourage your visitors to submit maximum of their comments to be the King Of Commenter in your blog.





















Top Commentators Widget for Blogger




This top commenters widget is a wonderful tool for giving back to your most loyal readers. It's a great way to inspire your constituents to keep making useful comments on your blog. The widget displays links to to the top commentators websites and can easily be implemented in your blog's sidebar.





Features:

  • Calculates the top commentators on your blog based on the last 100 comments.
  • Displays the Commenter's Name with a link to their Site URL.
  • You may also filter your own name so that you will not appear as a top commenter.
  • Choose the number of commenters you wish to display. The default value is 5.

  • This plugin functions differently from the Recent Comments Widget.

Installing the Top Commentators Widget:

When entering your blog's URL make sure to not add the "http://". The URL should be displayed as yourblog.blogspot.com


















Related Posts Widget for Blogger / Blogspot



Now here is wonderful hack for displaying links to related posts beneath each of your blog posts. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.






Preview of Related Posts Links:



Updates:

If your related posts have not been showing up lately: See How to Fix!



How to Add Related Posts Widget to Your Blog?

  1. Go to Layout >Edit HTML in your Blogger Dashboard.

  2. Back up your existing Template before making any changes!
  3. Make sure to check the "Expand Widget Templates" box.
  4. Search for the </head> tag.
  5. Add the following code just before the </head> tag.
    6. <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMBVWQ1C58gKrlOE-iL9sYXK3A7vF2vO5BUMmBkPG5EfefU9DrY9dMhsFv2qZo_fNizOGMSD8TEbQPLNP3YeUVorcZ20PNjv5hfvjpcL72YCS8ZwRlNwVVBCnt2g2KhYv0sR0RbfFTOdQ/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>
  6. Now search for <data:post.body/>. In some of the templates this code may look like this


    <div class='post-body>

    or

    <data:post.body/>
  7. Add the following code just beneath the code you just searched for.

    <b:if cond='data:blog.pageType == "item"'>

    <div id="related-posts">

    <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>

    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();

    </script>


    </div></b:if>
  8. Now Save your Template and you're done!

Customization

  • In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number "5" to any desired number.
    • max-results=5



If you have any questions on implementing this hack into your own blog, shoot me a comment and I'll be glad to help!

Make sure to check out our other great Blogger Hacks as well:

Recent Posts Hack with Thumbnails; Recent Comments Hack; Sleek Search Bar



Special thanks to Real Trix!





















Recent Comments Widget For Blogger





BloggerAdding recent comments widget in your Blogger blog will show the activeness of your blog. Once a reader finds a recent comments widget in your blog’s sidebar, he comes to know that you blog is pretty active and that encourages him to post comments on your blog. In this way you can gather some active user base to comment on your blog posts.



Follow these steps to add the recent comments widget in your Blogger (Blogspot) blog.




Step 1 :



Log into Blogger. Go to your Blogger Dashboard > Design/Layout > Page Element > Add a Gadget > HTML/JavaScript


Blogger Design

Blogger page elements

Blogger add a gadget

Blogger HTML/JavaScript



Step 2 :



Copy and paste the code below:



<script style=text/javascript src=http://www.webaholic.co.in/other/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://YOUR-BLOG-URL.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://www.blogger.webaholic.co.in/2011/03/recent-comments-widget-for-blogger.html>Recent Comments 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>




Step 3 :

 

Change YOUR-BLOG-URL with your blog url.





Step 4 :




Save the template.












Recent Comments Widget for Blogger



The Recent Comments Widget for Blogger displays recent blog comments on your sidebar.You can use this widget to display the recent comments of any blogger blog.You can customize the number of comments to display in the widget, whether or not to display the post name, the comment-date, and the size of the comment(in characters). This widget might encourage your readers in leaving comments on your blog :)

How to Install the Recent Comments Widget For Blogger

Before installing the Recent Comments Widget, take a look at the following Settings in the Widget Installer.
  1. This should be the URL of a blogger Blog. If you are installing the Widget on the same blog then you can leave this field blank . This field is useful for those who have multiple blogs..
  2. Number of comments –  The number of comments to be displayed in the Widget
  3. Show comment date – If you want to show the comment date, then tick this option
  4. Show post title – If you want to show the title of the post on which comment has been made, then tick this option
  5. Summary  Size : If the comment is more than this size in length, then the rest of the comment will be chopped off

Now that you are clear with the settings, click on the below button to add the Widget to your Blog.

Add Recent Posts Widget

Credits : This is  a slightly modified version of the Recent comment widget by Beautiful Beta
If you have any questions or suggestions regarding this widget, feel free to comment on.












































Recent Comments Widget For Blogger (blogspot)






Here’s how you can add a recent comments widget (gadget) to your Blogger blog. (You may also want to add a Recent Posts with Thumbnails widget to your blog.)

Steps:

1. Go to your Blogger Dashboard > Layout > Page Element > Add a Gadget > HTML/JavaScript

2. Copy and paste the code below:
CODE
<script style=text/javascript src=https://sites.google.com/site/projectdigitaltomato/blogger/js/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://YourOwnB1og.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://www.madtomatoe.com/recent-comments-widget-for-blogger/>Recent Comments</a> <a href=http://www.madtomatoe.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/AVvXsEjwz_4qkdjcy6WPhKsVad7hfJjK-cHN0u2zY8s4qz2D18ZdZusYuFZrywNenLWG1GC-02QUv57xZy0QrL6afD_qiSrNFkv4SDmpMSBaSd7VYwXB8zrUhqLL3gKqXA1IjTG9FImEXs-GdWN_/s400/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>
3. In the code, look for this line:
…src=”http://YourOwnB1og.blogspot.com/feeds/comments/default…

…and replace the blog address (indicated in color blue) with your own blog address.
For blogs using custom domain…
…src=”http://www.YourOwnB1og.com/feeds/comments/default…
4. Add a title. Save.
That’s it!

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.
… a_rc=5;var m_rc=false;var n_rc=true;var…

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. *

…n_rc=true;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:
… a_rc=5;var m_rc=false;var n_rc=true;var…

and replace the false with true.

Display only the comment author and the comment

Use this code if just want to show only the commenters’ names and their comments. The title of the post will be hidden.
CODE
<script style=text/javascript src=https://sites.google.com/site/projectdigitaltomato/blogger/js/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://YourOwnB1og.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://www.madtomatoe.com/recent-comments-widget-for-blogger/>Recent Comments</a> <a href=http://www.madtomatoe.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/AVvXsEjwz_4qkdjcy6WPhKsVad7hfJjK-cHN0u2zY8s4qz2D18ZdZusYuFZrywNenLWG1GC-02QUv57xZy0QrL6afD_qiSrNFkv4SDmpMSBaSd7VYwXB8zrUhqLL3gKqXA1IjTG9FImEXs-GdWN_/s400/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>
If you liked this widget, you may also like to add a