Cara Membuat CSS Tag Cloud: Panduan BloGGeR Special Edition

Membuat tag cloud tidaklah harus menggunakak javascript atau KODE html yang rumit dan cara pasangnya membuat pusing kepala. Dengan menggunakan KODE CSS yang simple kita bisa menciptakan sebuah tag Cloud yang sangat cantik dengan penampilan yang tak kalah menarik bila dibandingkan tag cloud lain dengan KODE atau script bejibun. Kelebihan penggunaan CSS murni ini tentunya yang jelas tidak bikin blog tambah "lelet".

Cara membuat CSS Tag Cloud :

1. Login ke Blogger.
2. Cari KODE ]]></b:skin> kemudian simpan KODE CSS di atasnya persis.
   KLIK Simpan Templates !
3. Masuk ke Tata Latak dan Lanjutkan KLIK Elemen Laman.
4. KLIK Tambah Gadget pada bagian "sidebar".
5. KLIK HTML/Javascript.
6. Letakkan data HTML yang berisi link Tag Cloud di ruangan tersebut.
7. Klik "SIMPAN".
8. Lihat Hasilnya dengan membuka blog !

Screenshoot CSS Tag Cloud :

#takhludh{
        width:250px;
        padding:12px 6px;
        border:2px solid #660000;
        background:#FFFFCC;
        margin:30px 5px 5px;
}
#takhludh a{
        font-family:Arial;
        text-decoration:none;
}
#takhludh a:hover{
        color:red;
        text-decoration:none;
        border-bottom:2px dotted blue;
}
#takhludh h5.judul{
        font:20px Times New Roman;
        color:#999;
        background:#060344;
        font-weight:bolder;
        text-align:center;
        border-bottom:2px solid #003366;
        margin:0;
}
#takhludh a.A1{color:#006666; font-size:11px;}
#takhludh a.A1bold{color:#006666; font-size:11px; font-weight:bold;}
#takhludh a.B1{color: #333366; font-size:12px;}
#takhludh a.B1boldbold{color:#006666; font-size:12px; font-weight:bold;}
#takhludh a.C1{color:#66CC33; font-size:14px;}
#takhludh a.C1bold{color:#66CC33; font-size:14px;font-weight:bold;}
#takhludh a.D1{color:#990099; font-size:16px;}
#takhludh a.D1bold{color:#990099; font-size:16px;font-weight:bold;}
#takhludh a.E1{color:#990033; font-size:18px;}
#takhludh a.E1bold{color:#990033; font-size:18px;font-weight:bold;}
#takhludh a.F1{color: #FF9900; font-size:20px;font-weight:bold;}
#takhludh a.F1bold{color:#990033; font-size:20px;font-weight:bold;}

xHTML - CSS Tag Cloud :

<center>
<div id="takhludh">
<h5 class="judul">CSS Tag Cloud</h5>
<a href="http://.../Link-1" target="_blank" title="XX Title Link-1" class="B1">Nama Link-1</a> 
<a href="http://.../Link-2" target="_blank" title="XX Title Link-2" class="A1bold">Nama Link-2</a> 
<a href="http://.../Link-3" target="_blank" title="XX Title Link-3" class="C1">Nama Link-3</a> 
<a href="http://.../Link-4" target="_blank" title="XX Title Link-4" class="D1bold">Nama Link-4</a> 
<a href="http://.../Link-5" target="_blank" title="XX Title Link-5" class="F1">>Nama Link-5</a> 
<a href="http://.../Link-6" target="_blank" title="XX Title Link-6" class="A1bold">Nama Link-6</a> 
<a href="http://.../Link-7" target="_blank" title="XX Title Link-7" class="F1">Nama Link-7</a> 
<a href="http://.../Link-8" target="_blank" title="XX Title Link-8" class="A1bold">Nama Link-8</a> 
<a href="http://.../Link-9" target="_blank" title="XX Title Link-9" class="A1bold">Nama Link-9</a> 
<a href="http://.../Link-10" target="_blank" title="XX Title Link-10" class="F1bold">Nama Link-10</a> 
<a href="http://.../Link-11" target="_blank" title="XX Title Link-11" class="D1">Nama Link-11</a> 
<a href="http://.../Link-12" target="_blank" title="XX Title Link-12" class="C1bold">Nama Link-12</a> 
<a href="http://.../Link-13" target="_blank" title="XX Title Link-13" class="B1bold">Nama Link-13</a> 
<a href="http://.../Link-14" target="_blank" title="XX Title Link-14" class="E1bold">Nama Link-14</a> 
<a href="http://.../Link-15" target="_blank" title="XX Title Link-15" class="A1bold">Nama Link-15</a> 
<a href="http://.../Link-16" target="_blank" title="XX Title Link-16" class="F1">Nama Link-16</a> 
<a href="http://.../Link-17" target="_blank" title="XX Title Link-17" class="C1">Nama Link-17</a> 
<a href="http://.../Link-18" target="_blank" title="XX Title Link-18" class="B1">Nama Link-18</a> 
<a href="http://.../Link-19" target="_blank" title="XX Title Link-19" class="C1bold">Nama Link-19</a> 
<a href="http://.../Link-20" target="_blank" title="XX Title Link-20" class="E1bold">Nama Link-20</a> 
<a href="http://.../Link-21" target="_blank" title="XX Title Link-21" class="E1bold">Nama Link-21</a> 
<a href="http://.../Link-22" target="_blank" title="XX Title Link-22" class="F1bold">Nama Link-22</a> 
<a href="http://.../Link-23" target="_blank" title="XX Title Link-23" class="A1bold">Nama Link-23</a> 
<a href="http://.../Link-24" target="_blank" title="XX Title Link-24"  class="C1">Nama Link-24</a> 
<a href="http://.../Link-25" target="_blank" title="XX Title Link-25" class="A1">Nama Link-25</a> 
</div>
</center> 

Keterangan/Catatan :

1. Jumlah link tidak harus 30 Link. Bisa ditambah atau dikurangi.
2. href="Link-1" diisi seperti :http://gubhugreyot.blogspot.com/Tutorial Blogger.html
3. Nama Link seperti misalnya Tutorial Blogger, Tips Trik Blogger, dll.
   Title berupa teks singkat yang berkaitan dengan Link yang di gunakan.
4. Lebar box tag cloud bisa disesuaikan dengan ruang blog, atau diganti dengan --> width:auto; (KODE CSS paling atas).