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. Amankan template terlebih dahulu, caranya lihat di sini !
3. Cari KODE ]]></b:skin> kemudian simpan KODE CSS di atasnya persis.
   KLIK Simpan Templates !
4. Masuk ke Tata Latak dan Lanjutkan KLIK Elemen Laman.
5. KLIK Tambah Gadget pada bagian "sidebar".
6. KLIK HTML/Javascript.
7. Letakkan data HTML yang berisi link Tag Cloud di ruangan tersebut.
8. Klik "SIMPAN".
9. Lihat Hasilnya dengan membuka blog !

Screenshoot CSS Tag Cloud :

CSS - 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 :

• http://Link-1 s/d Link-25 di isi dengan Link setiap Judul/Nama Link yang akan di tampilkan.
• Jumlah bisa disesuaikan dengan kebutuhan (tidak harus 25-Link).
• XX diisi dengan jumlah posting yang di buat pada link tersebut.
• class="B1bold" dll digunakan untuk membentuk teks Nama Link supaya berbeda ukuran dan warnanya.
• Untuk menambah ukuran dan warna atau merubahnya silahkan lakukan pada KODE CSS.
• CSS Tag Cloud ini sudah saya coba di blog dan hasilnya sangat memuaskan !

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

» Happy Blogging - gubhugreyot «