How To Add Brick Style Tags Cloud in Blogger Using CSS

4

Brick Style Tags is a Widget which shows you labels of your blog in Bricks Style. This is a Way to show your blog posts are Fall under in which topics appear. WordPress Makes it easy for their users to show tags in many styles with Plugins but blogger users don’t have that option. I See this Widget in Labnol.org . So, today i am sharing wonderful tutorial to add a Brick Style Tags Widget in blogger. This tutorial will Help You How To Add Brick Style Tag Cloud in Blogger Using CSS.

Screenshot of Brick Style Tags in Blogger

DEMO

In Screenshot You Can See Collection of Tags in Brick style.

Note: This Tutorial is Work With Manual Links Only.

Steps to Add This Widget

Step 1:  Goto Your blogger Dashboard –> Click On Design –>

Step 2:  Click On Edit HTML

Step 3:  Now Press CTRL + F to open Find Option then find ]]></b:skin>
Step 4 : Above ]]></b:skin> Paste Below CSS Code

#textwidget{color:#666;font-size:0.925em;font-style:italic;line-height:1.6em}
a.tag{color:#777;font:9px verdana;text-transform:uppercase;transition:border-color .218s;background:#f4f4f4;background:-webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));display:inline-block;text-shadow:0 1px 0 #fff;-webkit-transition:border-color .218s;-moz-transition:border .218s;-o-transition:border-color .218s;transition:border-color .218s;background:#f3f3f3;background:-webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));background:-moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));border:solid 1px #ccc;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;margin:0
4px 4px 0;padding:3px
5px;text-decoration:none}a.tag:hover{color:#333;border-color:#999;-moz-box-shadow:0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow:0 1px 2px rgba(0,0,0,0.15)}a.tag:active{color:#000;border-color:#444}.slides{font-size:85%;line-height:130%;overflow:hidden;padding:0;margin:30px
0 10px;border-bottom:1px solid #000}

Step 5:  Click On Save Template
Step 6: Goto Design –>> Click On Add a Gadget

Step 7:  Now Add HTML/JavaScript Gadget

Step 8:  Copy Below Code and Paste in HTML/Javascript Gadget

<div class=”textwidget”><a class=”tag” href=”Your 1st tag URL Here“>Your Tag Name</a><a class=”tag” href=”Your 2nd Tag URL Here“>2nd Tag Name Here</a></div>

Important: In <a> tag you must be add class=”tag”. Change your links with red color line in above code and Change green Color line with your tags name. If  you want add more tags then use same <a> tag again and again before </div> tag.
Step 9: Now Save Widget and check its working.

Incoming search terms:

Tags:how to add brick style tags cloud in blogger using css,add colors to tag cloud for blogger,blogger css pop up,briks type tag cloud,labnol added new sharing,nirmal baba adimit cord,wordpress type cloud label for blogger