codefm - [Code] Widget khung tags đẹp Hotrofm đang sử dụng.

Demo ảnh

Cách làm

Cho code này vào chỗ muốn hiện:

Code:

    <ul class="xentag cloud">        
      <li class="cloudtag level1"><a href="/tags/code">Code Forumotion</a></li>
      <li class="cloudtag level1"><a href="/tags/skin">Skin Forumotion</a></li>
      <li class="cloudtag level3"><a href="/tags/punbb">Punbb</a></li>
      <li class="cloudtag level1"><a href="/tags/thủ-thuật">Thủ thuật</a></li>
      <li class="cloudtag level2"><a href="/tags/computer">Computer</a></li>
      <li class="cloudtag level1"><a href="/tags/smartphone">Smartphone</a></li>
      <li class="cloudtag level2"><a href="/tags/html">HTML</a></li>
      <li class="cloudtag level1"><a href="/tags/facebook">Facebook</a></li>
      <li class="cloudtag level1"><a href="/tags/internet">Internet</a></li>
      <li class="cloudtag level2"><a href="/tags/phần-mềm">Phần mềm</a></li>
      <li class="cloudtag level2"><a href="/tags/video">Video</a></li>
      <li class="cloudtag level2"><a href="/tags/music">Music</a></li>
      <li class="cloudtag level1"><a href="/tags/hình-ảnh">Hình ảnh</a></li>
      <li class="cloudtag level3"><a href="/tags/android">Android</a></li>
      <li class="cloudtag level3"><a href="/tags/forumotion">Forumotion</a></li>
      <li class="cloudtag level3"><a href="/tags/photoshop">Photoshop</a></li>
      <li class="cloudtag level2"><a href="/tags/lasttopic">Lasttopic</a></li>
      <li class="cloudtag level2"><a href="/tags/game-private">Game private</a></li>
      <li class="cloudtag level1"><a href="/tags/sexy">Sexy</a></li>
      <li class="cloudtag level3"><a href="/tags/rao-vặt">Rao vặt</a></li>
      <li class="cloudtag level1"><a href="/tags/hotrofm">Hotrofm</a></li>
      <li class="cloudtag level2"><a href="/tags/free">Free</a></li>
      <li class="cloudtag level2"><a href="/tags/cosplay">Cosplay</a></li>
      <li class="cloudtag level1"><a href="/tags/editor">Editor</a></li>
      <li class="cloudtag level2"><a href="/tags/ứng-dụng">Ứng dụng</a></li>
      <li class="cloudtag level3"><a href="/tags/seo">SEO</a></li>
      <li class="cloudtag level1"><a href="/tags/addon">Addon</a></li>
      <li class="cloudtag level3"><a href="/tags/tips">Tips</a></li>
      <li class="cloudtag level3"><a href="/tags/hướng-dẫn">Hướng dẫn</a></li>
      <li class="cloudtag level1"><a href="/tags/tuts">Tuts</a></li>
      <li class="cloudtag level2"><a href="/tags/invision">Invision</a></li>
      <li class="cloudtag level3"><a href="/tags/phpbb2">Phpbb2</a></li>
      <li class="cloudtag level2"><a href="/tags/phpbb3">Phpbb3</a></li>
      <li class="cloudtag level2"><a href="/tags/script">Script</a></li>
    </ul>

Cho code này vào CSS:

Code:

.xentag{padding:10px}
.xentag:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.xentag .cloudtag{background:#0F61A1;color:#EFF2F7;display:inline;float:left;margin:0.2em;padding:0}
.xentag .cloudtag:hover{background:#777;color:#fff}
.xentag .cloudtag a{color:inherit;display:block;font-size:1em;font-weight:bold;margin:0.5em;white-space:nowrap}
.xentag .level1{background-color:#E6EDFB;color:#3A5795}
.xentag .level2{background-color:#889ABF;color: #fff;}
.xentag .level3{background-color:#3A5795;color: #fff;}

Lưu lại và xem thành quả Smile

Tags: #code #forumotion