Tag Cloud

Hi friends,

As you you know every blog we post, falls under some category or the other. We try to categorize whatever we blog about. It makes our blog more organized and also helps searching. A Tag Cloud is yet another way of displaying your labels. The widget displays the current labels of your blog and occupies less space in case you have numerous labels.

The steps for adding the widget is really simple. Here we go :

Step1: Backup your template. Its necessary so that we can revert to the original in case the widget doesn't install properly. So, Download the current template to your PC.

Step2: Click the "Expand Widget Templates" so that the full template is displayed in the box below.

Step3: Now look for the desired place to install the widget, preferably in the right sidebar. Next comes the Copy-Paste  job. Copy the code below and paste it at the desired position.

 <b:section id='tag cloud'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>

<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>

Customization :

The default installation includes the following preset variables: 

Width is set to 240px
Height is set to 300px;
Background color is white(#ffffff)
Test color is grey(333333)
Font size is "12"

DONE!! .. your tag cloud is almost created. Just perform the required customization and save the template.

Source: Blogger Buster

Back to Useful Widgets

Read More

Add Tabbed Menu

Hi friends, you must have seen many blogs with an array of tabs at the top, giving their blog a more professional look. Now you too can add these tabs and give your blog that professional look and feel.

This post will help you add a tabed menu to your blog (as you can see mine - Home, Concept Cars,.. etc). This widget, was a default feature to my present template. To make it better, you need to have a bit knowledge of CSS and HTML.

To add Tabbed Menu to your blog, just go through the following steps.

Step 1 :
Go to your template-> Edit HTML and "expand widget template" [select the check box].

Step 2:
Before making any changes save a copy of your template. To save it to your desktop, just click the link 'Download Full Template' (at the top).

Step 3:
Now first, we need to add the required CSS. Find the tag :
]]></b:skin>

Just before this tag (i.e. above this tag) Copy-Paste the following code :


/* Tabbed Bar               */
    .tabbed-bar{
        background:url() top left no-repeat;
        height:26px;
        line-height:26px;
        float:left;
        display:block;
        width:auto;
        padding-left:8px;
}
    * html .tabbed-bar, * html .tabbed-bar div{display:block; float:left;}
    .tabbed-bar div{
        background:url() top right no-repeat;
        height:26px;
        line-height:26px;
        padding-right:8px;
    }
    .tabbed-bar a:link, .tabbed-bar a:visited{
        color:#ca0002; text-decoration:none;
    }
    .tabbed-bar a:hover, .tabbed-bar a:hover{
        text-decoration:underline;;
    }


Step 4:   
Now we need to place the tags. Find this code in your blog :

<div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>

Every template (except default blogger templates) may or may not have this code. The point is that the tags need to be just below your Header. But you can always place it according to your choice.

Just below the above mentioned code, paste the following code :


<div style='font-size:15px;'>

<a class='tabbed-bar' href='http://carsonroll.blogspot.com'><div>Home</div></a>
<a class='tabbed-bar' href='tab2'><div>tab2 name</div></a>
<a class='tabbed-bar' href='tab3'><div>tab3 name</div></a>

</div>


The tags can be added and removed according to your choice.

You can Preview your template and customize it accordingly. After making it your way, Save the template and view the new look of your blog.

You are DONE.

Go to Useful widgets.

Read More

Useful widgets

Hi friends, every blogger wishes to make his blog more popular and most read. Although there are a lot many things to try, I provide you here with some useful widgets which can help make your blog a better place. These are collected from different sources.

• Recent Comments Widget - Customized

• Moving Images widget

• Add text Caption to Images

• Recent Posts Widget

• Top Commentators widget

• Add Tabbed Menu

• Tag Cloud

• A Simple Search widget

The list will be updated regularly as i come across useful widgets, so keep checking this post for new entries.

Read More

Recent Post Widget

Hi friends, you can create a Recent Post widget very easily. All you need to have is a feed. Read the following simple steps to add the widget :

Step 1:
Log in to your feedburner account

Step2:
Go to my feeds and select your feed

Step 3:
go to Publicize tab

Step 4:
Add BuzzBoost to your blog by following the steps given at the site and customize it according to your needs.

Step 5:
Activate the BuzzBoost and copy-paste the code in your blog. You are done.

Source : Create Recent Post Widget

Go to Useful widgets

Read More

Add text caption to Image

Hello friends you can now, add caption to your images (web/blog). With simple CSS and HTML, you can quickly add text captions to images. Just read the following steps to add this feature to your site.

The image will look something like the pic below.

Step 1:
Add the following CSS code to an external CSS file or to your blog template under the <HEAD> section.

 <style type="text/css">
.picture { background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
</style>

Step 2:
Now insert the following HTML code anywhere in the web page, where you want to display the image. The process is exactly the same as inserting regular images but we have just enclosed that inside a <DIV> tag.

 <div class="picture left" style="width:278px;"> <img src="google.gif" width="276" height="120" alt="Google Logo" /> <br />Image Caption goes here. </div>


In the above example, we add the file google.gif left aligned and the image has dimensions 276×120.
Replace left with right if you want to right align the image box. You’ll also need to modify the style:width of the <DIV> tag such it is equal to image width + 2.

You can also fiddle with the CSS to change the font name, size, border colors, background, margins, etc.

Source : Add text caption to your web image

Go back to Useful widgets

Read More

Simple Search Widget

I found a wonderfully simple search widget which operates in a similar way to the "Search this blog" feature found in the navbar. You can easily implement this widget into your blog by using the widget installer below:

1. Go to Template>Layout in your Blogger Dashboard.
2. Create a new HTML/Javascript element in your sidebar.
3. Insert the following code into the widget:

<p align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="25" type="text"/> <input id="search-btn" value="Search" type="submit"/> </form></p>

4. Give your widget a title if you like (eg: "Search this Blog"), and click save. You should now have a fully functional search box in your blog's sidebar!

So, your widget is ready to use.
Go back to Useful Widgets

Read More

Top Commentators Widget

Would you like to display a list of the top commentators in your blog? This widget will enable you to do exactly that!

If you install this widget, a list of the top ten people who have commented most in your blog will be displayed with along with the count of comments they have made.

This is a great way of thanking readers who comment regularly and is very easy to add to your blog layout using the one click widget installer

Adding this widget is really simple. Just follow the given steps :

1st Step :
Go to your template - Add page element - Add HTML element

2nd Step:
Copy - paste the following code in the HTML element

<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=720a4578c7b83dfce64615cb0ad3c642&url=http%3A%2F%2Fyourblogname.yourdomain.com&num=10&filter=yourName" type="text/javascript"></script>


Changes :

change yourblogname.yourdomain.com  to your blog name, for e.g carsonroll.blogspot.com 
change num=10  to the number of comments you wish to show, for e.g. num=5 
change filter=yourName to filter your name out of the top commentators, for e.g filter=@_raj 

After performing the necessary changes, save the widget and then your template. Now view your blog, you can see the list of top commentators along with the number of comments they have done on your blog.

Go back to Useful Widgets

Read More

Moving Images Widget

You must have noticed the Featured Posts section on my Home page. This section consists of a group of link images scrolling from right to left. In this posts I will show  how you can also add this feature.

1st step:
Create a division like this :

<div>
--- code ---
</div>

at the position you want to place the widget.

If you are having a <table> format in the template, then you can create a new table like this :

<table>
<tr><td>
--- code ---
</td></tr>
</table>



2nd Step:
After you have created a division(div) at your desired place, you need to paste the following code :

<MARQUEE behavior='alternate' id='marquee2'>
<LI>
<a href='your image url'><img height='90' src='your image source' width='120'/></a>
</LI>
</MARQUEE>

behavior values can be : alternate(as on my blog) , slide , scroll
href : it is the blog link to which you want the image to refer.
src: it is the source of the image (picasa,flickr or your own web space)



3rd Step:
Now to add multiple images just add more of the following :

<a href='your image url'><img height='90' src='your image source' width='120'/></a>

between the <LI> tags. Like this:

<MARQUEE behavior='alternate' id='marquee2'>
<LI>
<a href='your image url'><img height='90' src='your image source' width='120'/></a>
<a href='your image url'><img height='90' src='your image source' width='120'/></a>
<a href='your image url'><img height='90' src='your image source' width='120'/></a>
<a href='your image url'><img height='90' src='your image source' width='120'/></a>
<a href='your image url'><img height='90' src='your image source' width='120'/></a>
</LI>
</MARQUEE>

Change the height and width according to your need.

Done : After adding all the images between the <LI> tag, you are DONE. Save the template and view your blog to see the changes.

Read More

Recent Comments Widget - Customized

Usually Blogger's feed widget is used to display recent comments but it is slow and sometimes unable to display your recent comments. Also we can only show very few words of the comment (too few to comprehend) and upto 5 comments only.
Now we have a solution that allows the blog author to customize both these. You can see the new widget in my footer, showing selected comment within alphabetic range.

With this widget,
1. You can specify how many comments you want to display in your blog (defaults to 10)
2. You can specify the maximum number of letters that should be displayed in each comment (defaults to 100).

Here is how you add this widget to your blog.

Step 1: Goto Template --> Edit HTML tab. Find the "</head>" tag in your template and add all the code given below before it and save the template.

<script type='text/javascript'> function commentDisplay(json) { for (var i = 0; i &lt; numcomments; i++) { var entry = json.feed.entry[i]; var alturl; if (i == json.feed.entry.length) break; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } alturl = alturl.replace("#", "#comment-"); if (entry.content) { comment = entry.content.$t; } else if (entry.summary) { comment = entry.summary.$t; } var re = /&lt;\S[^&gt;]*&gt;/g; comment = comment.replace(re, ""); document.write('&lt;a href="' + alturl + '"&gt;' + entry.author[0].name.$t + '&lt;/a&gt; commented:&lt;br/&gt;'); if (comment.length &lt; numchars) document.write(comment + '&lt;br/&gt;&lt;br/&gt;'); else document.write(comment.substring(0, numchars) + '...&lt;br/&gt;&lt;br/&gt;'); } } </script> 


Step 2: Goto Template --> Page elements tab and click on "Add a page element" in your sidebar. Choose HTML/Javascript element. Give an appropriate title and copy/paste this code.

<br/><script language="javascript">
var numcomments = 10;
var numchars = 100;
</script>
<script src="http://yourblog.blogspot.com/feeds/comments/default?
alt=json-in-script&callback=commentDisplay"></script>

You need to change the blog URL to yours. You could also change the number of comments/letters per comment to whatever fits your blog. Then, save the changes and move the widget to wherever you want. There, you have a customized recent comments widget!!

The widget is originally designed by hackosphere.

Back to Useful Widgets

Read More