How to create brick style/box style labels cloud on blogger?

If you want to create labels cloud like one in my blog, then you have to simply follow these steps-


(Note - Before you start on this, please make sure you have added labels gadget under Layout in blogger)

1. Go to Template>>Edit html and then proceed and search for following-

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>

2. And replace with following -

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
<div class='textwidget'>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a class='tag' 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>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</div>
</b:includable>
</b:widget>

3. Finally Go to Template>> Customize>> Advance >> Add CSS. There add following CSS in box -

#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}

After this step, you will be able to see labels cloud as shown in image above.