DIY Your Original Tag Clouds with Colorful Effect in WordPress Themes

Tag Cloud

Tag clouds are trendy and a fun addition to your blog. In WordPress, Tag Cloud is a widget to connect to your posts by concepts or keywords, using multiple attractive tags. For visitors, tag clouds make them search for posts more effectively. For bloggers, this ingenious widget helps them to manage their abundant posts with much convenience. Different WordPress themes have different default styles of Tag Cloud. Usually, the Tag Cloud widget is placed in the sidebar of your blog page, which enables visitors to search for interest topics while reading your posts. The tag clouds are quite intelligent that the most frequently used word will be in the largest size, and the less the smaller. The default displaying number is 45, with the largest font size 22pt and the smallest size 8pt. For example, our free one-page business WordPress theme Onetone has a default Tag Cloud widget like this:

Tag Cloud

If you do not like the default style of the tag cloud, you can change its appearance by amending custom CSS. The process is quite simple. This tutorial teaches you how to make a colorful tag cloud widget through simply custom CSS. 1. Add the Tag Cloud widget: Go to Dashboard -> Appearance -> Widgets. Find the Tag Cloud widget in the left Available Widgets area, and drag it to the place you like to display in the right area. (If choose Displayed Everywhere, the widget will be displayed in every page of your website. Different themes support different widget-available areas.) Then type in a title, choose Taxonomy (tags) and save the settings.

Tag Cloud

2. Amend Style CSS Go to Dashboard -> Appearance -> Editor. Find “Stylesheet (style.css)” from the right side Templates list. Copy the following codes and paste them at the end of the left box.
.tagcloud a { font-family:cambria; opacity: 0.80; color: #FFF; display: inline-block; margin: 0 5px 5px 0; padding: 0 6px; line-height: 30px; border-radius: 5px; } .tagcloud a:nth-child(9n){background-color: #4A4A4A;} .tagcloud a:nth-child(9n+1){background-color: #428BCA;} .tagcloud a:nth-child(9n+2){background-color: #5CB85C;} .tagcloud a:nth-child(9n+3){background-color: #D9534F;} .tagcloud a:nth-child(9n+4){background-color: #567E95;} .tagcloud a:nth-child(9n+5){background-color: #B433FF;} .tagcloud a:nth-child(9n+6){background-color: #00ABA9;} .tagcloud a:nth-child(9n+7){background-color: #B37333;} .tagcloud a:nth-child(9n+8){background-color: #FF6600;} 

Tag Cloud

Here is an effect picture based on our free business WordPress theme Zippy:

Tag Cloud

This is only a sample; you can amend every properties of it. 1) font-family Control the font of the tag words. Just type in the name of the font you like, such as “cambria”. 2) opacity The default value is 1, which means the tags are opaque. When the value is 0, the tags will be completely transparent. You can amend the value from 0 to 1. 3) color You can decide the color of the tags by naming a hexadecimal codes for colors. 4) display

Controls the format of the tags, see a detailed form below:

properties

descriptions

1. none

not showing tags

2. block

show as listed full-length blocks, one in each line

3. inline-block

show as small blocks, multiple per line

4. list-item

show as bulleted list, one in each line

5. table

show as small blocks list, one in each line

Tag Cloud

5) margin Control the distance between each tag, including four values: margin left, margin top, margin right, and margin bottom. For example, margin:10px 10px 10% 10% 6) padding Control the padding of each tag block, including four values: padding left, padding top, padding right, and padding bottom. For example, padding:10px 10px 10% 10% 7) line-height Control the size of the tag blocks. For example, line-height: 30px 8) border-radius Control the border radius of the tag blocks. The larger the value is, the more round the tag block is. For example, here is a comparison of “border-radius:2px” and “border-radius:8px”:

Tag Cloud

The above eight properties can help you customize beautiful tag clouds with diverse colors according to your own preference. If you want to change the color of each tag block, just amend the “background-color” value by changing the hexadecimal codes. [mt_space height=”5″] Though the colorful tag clouds look eye-catching and creative, not every WordPress theme suits such style of widget. We suggest you take the entire style of your WordPress theme as well as the purpose of your website into consideration. For formal and authoritative websites, such colorful tags may seem ridiculous. But for small business websites and personal blogs, this animated effect can makes your homepage much more original. [mt_space height=”5″] You can also try this effect on different WordPress themes and see whether it’s appropriate. DIY your own rainbow tag clouds and welcome to share with us.

About the author: Magee

You must be logged in to post a comment.