How to create a colorful labels gadget like this

Could someone help me to create a gadget like this? Thanks.

 

define "gadget" -- not even sure what you are asking.

There are a lot of questions that need to be answered as well like WHY are they colored... is that random? Is it how often people visit them? How important they are? How much content is there?

 

Agree, Please explain your question. looks like a Tag cloud or something similar. you want only HTML/CSS or something else

 

At Google, gadgets are simple HTML and JavaScript applications that can be embedded in web pages and other apps, including Blogger. They are used to customize blog's Sidebars.

 

"At Google"??? That's nice and vague... funny, never heard of it; though looking at their page, this is the type of bloated halfwit XML-tardery I'd not pollute a website with in the first place. (That is one ugly-assed implementation)

Even so, where is the data to be shown coming from, what is making them be different colors, and so forth? Without a context for the content, we can't possibly come up with markup and CSS to do it.

You know.. content first?

 

https://developers.google.com/blogger/docs/gadgets/gadgets_for_blogger

I'm sorry, I'm not talking about the content, but the CSS.

 

Can you please put that gadget on your blog and post the link. i will give you CSS for your Required Style

 

I already have the Labels gadget on my blog. I would like to know how to give each label text (not background as in the screenshot) a different color. I know there is some CSS like even/odd etc. But not sure how to change the text color of each label. In the screenshot, the first two labels are having red color, then one is brown and the next three are grey. Likewise I would like to get the text of each label in different color. Thanks.

 

Markup of the content dictates the CSS, not the other way around... But let's just assume you have a unordered list (since you aren't numbering them but this is obviously a list), with a UL classed as .cloud and containing anchors inside the LI.

.cloud {
	list-style:none;
}

.cloud li {
	display:inline;
}

.cloud a {
	display:inline-block;
	padding:0.1em 0.4em;
	background:#CCC;
}

Code (markup):

Then if you have any that are important, or unimportant, or whatever reason you have for colouring them (the question you STILL haven't answered) you'd put a class on the anchor explaining WHY it's getting color -- the CSS for that would go something like:

.cloud a.unimportant {
	backround:#ACE;
}

.cloud a.important {
	background:#FF9;
}

Code (markup):

... and so forth.

Please TRY to use classes that say WHY it's getting color, and not the color itself -- as at that point you might as well take a trip with Mr. Peabody back to 1997 and just sleaze out HTML 3.2 any old way. If the markup and/or class you use cannot describe WHY you are applying color to the item, it probably shouldn't be getting a different color!

 

Please find my CSS for the Labels Gadget:

.label-size{
padding:4px;
margin: 0 4px 4px 0;
display:inline-block;
}
.label-size a {color:#CC3B1F;}
.label-size:nth-child(even) a {color:#1d83e2;}

If I have four labels, what do I need to do to get the first one as red, the second yellow, the third green and the fourth purple. Can you help me now. Thanks.

 

I'm just going to walk away now... the broken engrish and incomplete snippets is too painful to deal with.

 

No problem. Thank you!

 

You can do so by using nth-child

.label-size:nth-child(1) a {color: red;}
.label-size:nth-child(2) a {color: yellow;}
.label-size:nth-child(3) a {color: green;}
.label-size:nth-child(4) a {color: purple;}

 

Great! Thanks a lot xXxpert.

 

You are welcome