Your Ad Here

.

5 Tag Cloud Widget With Columns And Tag Image Bullet

: Googy : Sunday, November 22, 2009 :Email This Post
: Blogger Addons, Blogger Widgets
Buzz This

All new "Tag Cloud Widget" for blogger with "Columns" and "Tag Image as Bullet" before all tags. There are two codes I have given below for this widget, this first one is for those blogs which have around 350px width for sidebar widgets and the second one is for those blogs which have above or around 260px width for sidebar widgets but below 300px. This widget shows tags in 3 columns and there are 5 rows of tags in each column. See the image below or a DEMO HERE.

Tag Cloud

To install the widget Go to Blogger > Layout > Add A Gadget (at sidebar) >

HTML/JavaScript
HTML/JavaScriptAdd

and paste the following code in the content area:

Code for blogs with around 350px width of sidebar widget:
<!-- Tag Cloud Widget Starts Here By http://www.aroundweb.co.cc-->
<style type="text/css">
.main_part{
float:left;
width:100%;
margin:0 0 0 0 auto;
}
.block{
float:left;
width:100px;
margin:0 0 0 0 auto;
padding-left:10px;
}
.block .title_2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLWBT9c9heTDp0FUFqlrg6g8I-b4a7toXvT5En7jX05PqC9LYLEYORUxkT9PvOD5M-nzmx9l2l8-54zB5yO0DmEIvnKM9N8KLJ9tvoO43CNZ9VyWpJtkWI9sqgIKrFEpLIv9fkvpG7sBmk/s1600/tag.png) no-repeat scroll left center;
font-family:serif, georgia;
font-size:9px;
color:;
text-decoration:none;
text-align:left;
font-weight:normal;
text-transform:uppercase;
margin:1px;
padding-left:12px;
}
.title_2:visited{color:;text-decoration:none}
.title_2:hover{color:;text-decoration:none}
.block a{
display:block;
text-decoration:none}
</style>
<div class="main_part">
<div class="block">
<!-- Column One Starts -->
<a href="YOUR BLOG URL/search/label/label1?&amp;max-results=20" class="title_2">label1</a>
<a href="YOUR BLOG URL/search/label/label2?&amp;max-results=20" class="title_2">label2</a>
<a href="YOUR BLOG URL/search/label/label3?&amp;max-results=20" class="title_2">label3</a>
<a href="YOUR BLOG URL/search/label/label4?&amp;max-results=20" class="title_2">label4</a>
<a href="YOUR BLOG URL/search/label/label5?&amp;max-results=20" class="title_2">label5</a>
<!-- Column One Ends -->
</div>
<div class="block">
<!-- Column Two Starts -->
<a href="YOUR BLOG URL/search/label/label6?&amp;max-results=20" class="title_2">label6</a>
<a href="YOUR BLOG URL/search/label/label7?&amp;max-results=20" class="title_2">label7</a>
<a href="YOUR BLOG URL/search/label/label8?&amp;max-results=20" class="title_2">label8</a>
<a href="YOUR BLOG URL/search/label/label9?&amp;max-results=20" class="title_2">label9</a>
<a href="YOUR BLOG URL/search/label/label10?&amp;max-results=20" class="title_2">label10</a>
<!-- Column Two Ends -->
</div>
<div class="block">
<!-- Column Three Starts -->
<a href="YOUR BLOG URL/search/label/label11?&amp;max-results=20" class="title_2">label11</a>
<a href="YOUR BLOG URL/search/label/label12?&amp;max-results=20" class="title_2">label12</a>
<a href="YOUR BLOG URL/search/label/label13?&amp;max-results=20" class="title_2">label13</a>
<a href="YOUR BLOG URL/search/label/label14?&amp;max-results=20" class="title_2">label14</a>
<a href="YOUR BLOG URL/search/label/label15?&amp;max-results=20" class="title_2">label15</a>
<!-- Column Three Ends -->
</div></div>
<!-- Tag Coud Widget Ends Here-->


Or

Code for blogs with around 260px width of sidebar widget:
<!-- Tag Cloud Widget Starts Here By http://www.aroundweb.co.cc-->
<style type="text/css">
.main_part{
float:left;
width:100%;
margin:0 0 0 0 auto;
}
.block{
float:left;
width:75px;
margin:0 0 0 0 auto;
padding-left:10px;
}
.block .title_2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLWBT9c9heTDp0FUFqlrg6g8I-b4a7toXvT5En7jX05PqC9LYLEYORUxkT9PvOD5M-nzmx9l2l8-54zB5yO0DmEIvnKM9N8KLJ9tvoO43CNZ9VyWpJtkWI9sqgIKrFEpLIv9fkvpG7sBmk/s1600/tag.png) no-repeat scroll left center;
font-family:serif, georgia;
font-size:9px;
color:;
text-decoration:none;
text-align:left;
font-weight:normal;
text-transform:uppercase;
margin:1px;
padding-left:12px;
}
.title_2:visited{color:;text-decoration:none}
.title_2:hover{color:#FFFFFF;text-decoration:none}
.block a{
display:block;
text-decoration:none}
</style>
<div class="main_part">
<div class="block">
<!-- Column One Starts -->
<a href="YOUR BLOG URL/search/label/label1?&amp;max-results=20" class="title_2">label1</a>
<a href="YOUR BLOG URL/search/label/label2?&amp;max-results=20" class="title_2">label2</a>
<a href="YOUR BLOG URL/search/label/label3?&amp;max-results=20" class="title_2">label3</a>
<a href="YOUR BLOG URL/search/label/label4?&amp;max-results=20" class="title_2">label4</a>
<a href="YOUR BLOG URL/search/label/label5?&amp;max-results=20" class="title_2">label5</a>
<!-- Column One Ends -->
</div>
<div class="block">
<!-- Column Two Starts -->
<a href="YOUR BLOG URL/search/label/label6?&amp;max-results=20" class="title_2">label6</a>
<a href="YOUR BLOG URL/search/label/label7?&amp;max-results=20" class="title_2">label7</a>
<a href="YOUR BLOG URL/search/label/label8?&amp;max-results=20" class="title_2">label8</a>
<a href="YOUR BLOG URL/search/label/label9?&amp;max-results=20" class="title_2">label9</a>
<a href="YOUR BLOG URL/search/label/label10?&amp;max-results=20" class="title_2">label10</a>
<!-- Column Two Ends -->
</div>
<div class="block">
<!-- Column Three Starts -->
<a href="YOUR BLOG URL/search/label/label11?&amp;max-results=20" class="title_2">label11</a>
<a href="YOUR BLOG URL/search/label/label12?&amp;max-results=20" class="title_2">label12</a>
<a href="YOUR BLOG URL/search/label/label13?&amp;max-results=20" class="title_2">label13</a>
<a href="YOUR BLOG URL/search/label/label14?&amp;max-results=20" class="title_2">label14</a>
<a href="YOUR BLOG URL/search/label/label15?&amp;max-results=20" class="title_2">label15</a>
<!-- Column Three Ends -->
</div></div>
<!-- Tag Coud Widget Ends Here-->

Now, replace the Red text in above code with the URL of your blog (eg. http://yourblog.blogspot.com) and the Green text with the respective labels as per your blog. Those having different sizes of sidebar can edit the Blue text and adjust the width size as per their blogs sidebar width.

You can change the tag image icon with the following 2 options by replacing the Pink text in above code:

Green

Code:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj0itqE93KctvNOa4tIl0B0tRpzdhGDfriUD5bLkCaArlfOxnN7w5vJbqD_455hac-hDQObYDhTTjt4GTvEzulozuG_xtSi-EHN5N_f9eD40djr4kGzNO3nw4_-5XgMnaeQxPwwzC_w5rY/s1600/tag_green.png


Orange

Code:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGq1niyhMqTm1hw6ru4j7z4zlrzD7w3QIhUfZLVg9S2Y_nvcsVcJAjXj3B1iIN6wEqX_UbwrDL589yS1FcpEnU0zwIhBI2TbMF2Zz58pXG-9jbhu_mzOMOGZmkrhPEC0Gm-payymFopi8/s1600/tag_orange.png


Preview your blog and if all fine just save the template & enjoy!

For any further query on this widget please use the comments section.

Share This Post:

Feedburner Digg Delicious Twitter Facebook Stumble Yahoo

5 Comments Count

Hetal Patil Rawat said...

Hello there,

What if i have more than 100 labels for my blog ? Will i have to add all labels manually, also what if i do not want columns ?

November 26, 2009 Reply To This Comment
Googy said...

@Ms Hetal Patil...thanx for your query. Well, yes! you have to add all your labels manually as this is not an automatic widget. This widget is ideal only for those blogs which have single words as labels.

Now, if you don't want columns then just remove this widget (if you have added it), now go to Blogger > Layout > Add a gadget > Labels (choose list type) and save. Now, move to Edit Templates (take backup of your template) > Expand Widget Template and find this series of code:

<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>

and now, replace it with following code:

<li><img src="http://1.bp.blogspot.com/_A6olrRvpvSc/SwblqQr3B9I/AAAAAAAAAdg/owXu4Wg1jSY/s1600/tag.png" alt="Tag"/>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>

(Note: if your are using bullets in sidebar widgets then it may look odd).

November 26, 2009 Reply To This Comment
Hetal Patil Rawat said...

Hi,

Thanks for answering my above query. I have a question though. Can we have heading for all columns?

December 12, 2009 Reply To This Comment
Googy said...

@Ms Hetal Patil...Ofcourse, we can have headings for all columns, just find all the instances of following code;

<div class="block">

(by default there are 03) and add following code just below all of it:

<b>Your Heading Title</b>

(See the demo from blinking link above for this widget)

December 12, 2009 Reply To This Comment
Hetal Patil Rawat said...

Thanks :)

December 12, 2009 Reply To This Comment

Leave A Comment

Subscribe to: Post Comments (Atom)