Make sure you backup your template before making any changes! Log into Blogger and go to your layouts section. On the ‘Page Elements’ setup page
make sure you have a label widget already installed where you want it (it can be moved around later). Then go to the Edit HTML settings and leave the widgets NOT exapanded. It will make things easier to deal with.

Now the code comes in 3 parts. A section for the stylesheet, a configurations section, and then the actual widget itself.

The first part to put in is the stylesheet section. The following code needs to be copied and inserted into your stylesheet, which in the layouts is marked out by the <b:skin> tags.

Easiest thing to do is find the closing skin tag:

]]></b:skin>

and place the code right BEFORE that. Here it is, copy and paste without modification right now. I’ll explain what can be tweaked later.

/* Label Cloud Styles
———————————————– */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:”" !important}

This next section is the configuration section for the Cloud. It also goes in the head of the template, but outside of the stylesheet part. Easiest thing to do again is to find the closing stylesheet tag:

]]></b:skin>

But this time place the code right AFTER that line, but BEFORE the </head> tag. Here it is.

<script type=’text/javascript’>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

All of these settings can be changed but I’ll explain them in a moment. The defaults will work for now.

Now the widget itself. Scroll down and find the label widget in your sidebar. It should look something like this.

<b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’/>

Copy the following code (from beginning widget tag to ending widget tag) and replace the line above with it.

View this code here

Now if all has gone well, and you have posts already labeled, then if you preview the blog you should see some form of the Cloud appearing. If it doesn’t appear, then something went wrong. You should probably back out and try it again from the start.

Update : I’ve found 2 things to check for first if the label cloud isn’t showing. First make sure that at least one of your labels has more than one entry. A bug in the script causes it to fail when all the labels have only one entry.(As soon as any label has more than one entry, then it should be ok from then on) Also, make sure that none of your labels contain quote marks ” . Most likely the cloud with it’s default settings won’t be what you ultimately want. But all the colors and sizes are configurable to match your tastes. If the cloud is appearing in preview then you can go about changing some of the variables so they suit.

The settings in the Variables section will be where you make most of your adjustments. Here I’ll explain what each setting does.

var cloudMin= 1;

This setting you can use to limit the number of labels shown (for example if you have a lot of labels). Leave the setting at 1 to show ALL labels. If you enter in a higher number, then only labels that have at least that number of entries will appear in the cloud.

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;

The lines for:

1. maxFontSize
2. maxColor

Do what you may think they do. The first one sets the size (in pixels) of the label with the most amount entries. The maxColor sets the color of that entry (in RGB format). Similiar with the next two

1. minFontSize
2. minColor

Just these are for the label with the least amount of entries. Again the size is in pixels, the color is in RGB format. Any labels between the two will get their color/sizes based on how many labels they are, and where their entry count falls, giving the much desired cloud effect.

From my experimenting, there are many factors that make up a pleasant looking cloud. From color/size choice, to the number of actual labels, to how well dispersed the entries are amoung the labels. 3 Labels don’t make a good cloud as there isn’t much to work with. You just have to experiment around to see what looks good with your setup.

IMPORTANT, when change the color settings, Keep them in the format supplied. In between the [] and the numbers separated by commas. The default colors are BLUE for the max and BLACK for the min.

You can select any valid RGB color combination. If you don’t know what RGB colors are, don’t worry. It’s just a way of defining a color. You can use many charts on the Internet to get the correct RGB value for the color you want to try. Here’s one that is fairly good.

RGB Color Code Chart Remember, if you get the 3 sets of numbers to enter them in correctly. Inside the [ ] separated by commas.

Also experiment with different font sizes. Again it depends on how many entries, how dispersed they are, and how much room for the cloud is available as to what looks good.
The last variable there is

lcShowCount

This can either be false (default) or true. All this does is turn off/on the post count displayed
next to the label. Usually in a ‘traditional’ cloud the count isn’t used. But if you go to a
‘flat’ listing then it’s sometimes useful to turn it on.

Now to the CSS section. Most people won’t need to tweak these much, and it’s not necessary to
understand what all those entries are for. Most are just to make sure that other styling
elements from the rest of your page don’t inherit in and ruin the cloud. But there are a few
that you may want to change to suit.
The first line

#labelCloud {text-align:center;font-family:arial,sans-serif;}

You could change the fonts used in the cloud here if you wanted.
Also, the text-align statement can also be changed. I have it set to center by default but you
could use

text-align:justify;
text-align:right;
text-align:left;

If those suit better.

The next line

#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

Well don’t worry about most of it unless you are a hardcore CSS’er. The only one of real
importance is the first entry

display:inline;

You can change that to

display:block;

To get the ‘Flat’ (each entry on it’s own separate line) listing of the weighted entries.
Usually if that is set to block you would probably want to change the sort frequency from
alphabetical to frequency. You do that by editing the widget from the Page Elements tab in
Blogger.

And the last bit I’ll mention is the line

#labelCloud .label-count

If you set the lcShowCount variable to true to show the post counts, you could change the
color/size of those numbered entries with that line.

Tag Clouds (provided they are not cluttered and display just the relevant words) help visitors quickly visualize what your website is all about since the topics you frequently cover are mentioned in bold or relatively bigger fonts.

WordPress community already offers some excellent plugins for generating tag clouds (like the Ultimate Warrior) plus the upcoming release, WP 2.3, has inbuilt support for tagging.

However, if you are on Blogger or have a non-blog website, there’s no reason that you should miss Tag Clouds.

Here’s how to add a good looking tag cloud to your Blogger blog:

1. Type your Blogger feed address in google feed:

http://www.blogger.com/feeds/XXX/posts/default?max-results=542

Remember to replace XXXwith your Blog ID. This URL will retrieve your latest 542 posts and supply that for analysis to Feed.

2. For the word link, type the following (where name is your blog name, e.g. w3code)

http://name.blogspot.com/search?q=%%enc_word%%

3. You can change the default font size, tag cloud dimension background image and colors to fit your site theme.

4. Now the tricky part. Once you have generated the tag cloud using Feed, right click over your tag cloud and click “View HTML source” – that the code you need to copy paste in your site.

Tip for Tag Clouds – If you really want visitors to spend more time on your site via Tag Clouds, always keep the number of words in Tag Cloud to an absolute minimum and that there is sufficient space around each word.

You can see a good implementation of this label cloud widget on one of our readers blog -Speak Media Blog.
First Of all Goto Your blogger Layout>Page Elements page and add a Labels Widget there..You can Do that using the Add a Page Element Option on that Choose to sort the labels Alphabetically when prompted.

After Adding the Label Widget Goto Layout>Edit Html (Do not expand the widget templates for the sake of easy explanation)

You will find some code similar to:

<b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’/>

Now Replace that with:

View this content

Next find :

]]></b:skin>

…and replace it with:

#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:&quot;&quot; !important}
]]></b:skin>

Save your template and now you should get a working Label Cloud On your Blog.

<ItemPage><div id=”post_body”></ItemPage><$BlogItemBody$><ItemPage></div></ItemPage>

<script type=”text/javascript” src=”http://trongdai.net/keywordforpost01.js”></script>

<script type=”text/javascript” src=”http://trongdai.net/keywordforpost02.js”></script>
<div style=”border:1px silver dashed; background:#FFFFCC; padding:5px”>
<script type=”text/javascript”>
home_page2 = “www.vuicafe.com“;
keyword_text = “<b>Tags Keyword:</b> “;
window.onLoad = makeKeywordForPost(“post_body”);</script>
</div>

and replace it with the following code:
The red seats also do the same as Section 1. Done

Edit to Template, select the Expand Widget, then use the search engine browser to find since: <data:post.body/>

Replace the ribbon from the following code:

<b:if cond=’data:blog.pageType != &quot;item&quot;’><data:post.body/></b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’post_body’><data:post.body/></div>
</b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>

<script src=’http://www33.websamba.com/anhvosite/blogger/js/keywordforpost01.js’ type=’text/javascript’/>

<script src=’http://www33.websamba.com/anhvosite/blogger/js/keywordforpost02.js’ type=’text/javascript’/>
<div style=’border:1px silver dashed; background:#FFFFCC; padding:5px’>
<script type=’text/javascript’>
home_page2 = &quot;www.vietwebguide.com&quot;;
keyword_text = &quot;<b>Từ khóa trong bài:</b> &quot;;
window.onLoad = makeKeywordForPost(&quot;post_body&quot;);</script>
</div>
</b:if>

You should note the replacement value:

www.vuicafe.com  address is your homepage, no http://, no soet mark at the end, every y chang as I write. (eg gmailblog.blogspot.com such).

Please download file:

http://trongdai.net/keywordforpost01.js

and modify or add keywords for you. Keywords are placed in quotes (keywords can not contain quotes or caper) and prevent the comma after. Tag no final comma in preventing later.

For convenience, you should write the keywords on the 1 line for characters is the same. You just open the file will see clearly.

To meet the diverse needs of users are blog for Soft, pictures, teen … Anhvo adding 1 new feature in version 3.0 this is the type of support 1 arranged between the new image representation (Thumbnail) and the text description (Summary) of the message. Using the 3.0, you can optionally be shown 2 types:

1. Shown as ver 2.0, meaning Thumbnail Summary on the left and right.
2. Thumbnail display on (flat margins between) and Summary below, this beautiful site for the collection Soft and beautiful images.

Installation:

Installation is easy and fast, just installed the 2.0.
If you have installed the version 2.0 upgrade conducted as follows:
Search for code format and length of the Thumbnail:

<script type=’text/javascript’>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src=’http://trongdai.net/summary-post-v20-test.js’
type=’text/javascript’/>

Add the line below on the lines above have:

thumbnail_mode var = “no-float”;
summary_noimg = 430;
…

Continue to change the code in the link:

http://trongdai.net/summary-post-v20-test.js

to

http://trongdai.net/summary-post-v30.js

So then it is finished. Row
thumbnail_mode var = “no-float”;
mode is displayed Readmore. Default is no-float: that is displayed in the Thumbnail and Summary below. When you use this mode, the variables and img_thumb_height img_thumb_width is the largest height and width of the largest Thumbnail, not “with” more. If you want to show the Thumbnail to the left and Summary to the no-float to float.

If you have not installed version 2.0 (never installed):

Go to Template – Edit HTML, Expand widget, go to <data:post.body/> card and replace it with the following code:

<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<div expr:id=’&quot;summary&quot; + data:post.id’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class=’rmlink’ style=’float:right’><a expr:href=’data:post.url’>–&gt;đọc tiếp…</a></span>
</b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if>

In addition you must also code below into the HEAD (<head> … </ head>) of the template:

<script type=’text/javascript’>

var thumbnail_mode = “no-float” ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src=’http://trongdai.net/summary-post-v20-test.js’ type=’text/javascript’/>

Done.

- 1 is we have to create the description and extension 1 manually (each article must be done).
- 2 is for the blog has many articles that have not used the Readmore Readmore later use is not possible, because we want to create readmore to edit all posts to prevent the separation described and expanded.

Here I will introduce you how to create 1 readmore entirely new, and fully automatic, since now we do not need to keep the description and expanded again, it will automatically divide us, and in the post we do not have the card <span class=”fullpost”> </ span> again. This is a great way, because the blog has since used readmore old can use, including the blog readmore not use the old way, the message will be generated readmore.

Installation:

* If you have been using the old format readmore, please remove our code. If you do not know how to remove, please read the instructions on items as before, you will know what to remove any seats.

- At EditHTML, back up a backup XML

- Select Expand Widget Tempate

- Trying to <data:post.body/> card and replace it with the following code:

<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<div expr:id=’&quot;summary&quot; + data:post.id’/>
<script type=’text/javascript’>
var blogID = &quot;92552551477455221&quot;;
function retriveSummaryPost<data:post.id/>(json){document.getElementById(&quot;summary<data:post.id/>&quot;).innerHTML
= json.entry.summary.$t + &quot;…&quot;}

function createSummaryPost<data:post.id/>(POSTID){ var script =
document.createElement(&quot;script&quot;);
script.src = &quot;http://www.blogger.com/feeds/&quot;+blogID+&quot;/posts/summary/&quot;+POSTID+&quot;?alt=json-in-script&amp;callback=retriveSummaryPost<data:post.id/>&quot;;
script.type = &quot;text/javascript&quot;; document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
}
</script>
<script type=’text/javascript’>
createSummaryPost<data:post.id/>(&quot;<data:post.id/>&quot;);
</script>
<span class=’rmlink’ style=’float:right’><a expr:href=’data:post.url’>–&gt;Read more…</a></span>
</b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’post_body’><data:post.body/></div>
</b:if>

Let’s see 92552551477455221 blogID you. You can read here how to get the ID number of the blog do not know.

* If your template has multiple additional hacks you can find out a lot of the data: post.body, so if you have to select the data: post.body to insert suitable for? Because each template and each hack many different points, so if you do not know how to insert only the comment below how to attach the address template (XML) are then I will research and guide you how to insert right.

After login to the site manager at http://www.blogger.com/home, Dashboard page will appear, listed below all the existing blog, and the right information Profile your.
- To get the blogID, you click on a menu Posts (red, image) of the blog, and look down to Status Bar, bottom of the browser, will see 1 link formatted as follows:

http://www.blogger.com/posts.g?blogID=9988557115541

easy to be your blogID is: 9988557115541

- To get UserId, you place a mouse View profile below your picture (red arrows in the image above), similar rà click and view the status bar of the browser, will see 1 link form as follows:

http://www.blogger.com/profile/0000875452145544

your userid is: 0000875452145544

- To get postID of 1 message is, we must open the message out. Stats click Post A Comment link below message also move then click the link below to view state, which after the word postID = Item is postID it. A blog with many articles to many different postID, postID represent messages.

- CommentID: you find.