Adding a second sidebar to your Blog - Adding a second sidebar to your Blog -

Adding a second sidebar to your Blog - part 2 In one of my older posts, I gave a short tutorial on how to add a second sidebar to your Bl...

Read more »


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

]]>

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



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.





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



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 " . Apostrophes or single ticks ' are ok. ------

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
maxFontSize
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
minFontSize
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.

Setup and configuration for New Blogger Tag Cloud / Label Cloud Setup and configuration for New Blogger Tag Cloud / Label Cloud

Comments and Problems can be reported at the home post for this at Code for New Blogger Tag Cloud / Label Cloud Here is the code and set...

Read more »


Delete that code and change with this one:

Click Save Template button. Wait ‘till this is done.

Click Page Element tab and your layout template will be like this :



Feel please to customize your blog with a new Page Element below the header.
In order to add Page Element, you can click Add Page Element. You can add anything you want. And then, you can drag the new element, below of header elementr, if you already finish your business with your new element.
If your setting was done, just click SAVE in top of that page.
Well done, now see the result.

Happy blogging to all.
Widget Below of the Header Widget Below of the Header

Widget Below of the Header Few days ago, there are some friends who ask me, “ How to save widget below header exactly? ” Generally, we can’t...

Read more »

250 Russian Fonts 250 Russian Fonts

250 Russian Fonts Letitbit Ñêà÷àòü ñ Letitbit.net (10mb) Depositfiles Ñêà÷àòü ñ Depositfiles.com (10mb) Rapidshare Ñêà÷àòü ñ Rapidshare.com...

Read more »

Wedding Wedding

Ñêà÷àòü Ñâàäåáíûå îòêğûòêè 6 ñ depositfiles 89.37 MB Ñêà÷àòü Ñâàäåáíûå îòêğûòêè 7 ñ depositfiles 55.10 MB Ñêà÷àòü Ñâàäåáíûå îòêğûòêè 8 ñ dep...

Read more »

Professional 2008 Photoshop Brushes 9 Professional 2008 Photoshop Brushes 9

Professional 2008 Photoshop Brushes 9 http://depositfiles.com/files/7483608 http://rapidshare.com/files/140108460/RONS__WINTER_COLLECTION_CR...

Read more »

28 Collections of brushes Ron Devineya (2008) 28 Collections of brushes Ron Devineya (2008)

28 Collections of brushes Ron Devineya (2008) Original title: The Bundle Year: 2008 Category: brushes for Photoshop Note: Brush only for the...

Read more »

The Bundle-Hi Resolution Photoshop Brushes Collection The Bundle-Hi Resolution Photoshop Brushes Collection

The Bundle-Hi Resolution Photoshop Brushes Collection The Bundle-Hi Resolution Photoshop Brushes Collection 614 MB rapidshare Links Included...

Read more »

AutoFX Photographic Edges 6.0 For Adobe Photoshop AutoFX Photographic Edges 6.0 For Adobe Photoshop

AutoFX Photographic Edges 6.0 For Adobe Photoshop Photo/Graphic Edges 6.0 is a suite of 14 photographic effects that empower anyone, regardl...

Read more »

Autofx Mystical Tint Tone and Color Suite 1.06 For Photoshop Autofx Mystical Tint Tone and Color Suite 1.06 For Photoshop

Autofx Mystical Tint Tone and Color Suite 1.06 For Photoshop | 17.7 MB Integrated Support for Photoshop Mystical features complete support f...

Read more »

Web için Photoshop Eğitimi // Photoshop for The Web Web için Photoshop Eğitimi // Photoshop for The Web

Web için Photoshop Eğitimi // Photoshop for The Web Download http://rapidshare.com/files/227601864/How_to_Wow_Photoshop_for_the_Web.ByPcKoR.rar

Read more »

Blog Tool & Resource - Blog Editor / Widgets / Templates / Themes / Poll / Blog Direc Blog Tool & Resource - Blog Editor / Widgets / Templates / Themes / Poll / Blog Direc

Great Sites And Tools Can Help You: Blog Tool & Resource - Blog Editor / Widgets / Templates / Themes / Poll / Blog Directories / Ping S...

Read more »
 
Top