Menciptakan Efek Background Link di Tag Cloud CSS3

D E M O : Tag Cloud CSS3 dengan efek background link

gubhug reyotbgsgr TutorialNama Link-3Nama Link-4mas Gitosamingubhugreyot blogDETIKNama Link-7Nama Link-8Tanty Template ModificationNama Link-10

Sebuah Tag Cloud indah bisa kita buat hanya dengan menggunakan kode CSS. Efek pada background link membuat tag cloud yang sangat irit kode CSS ini terlihat sangat menarik untuk dimanfaatkan di blog. Jika mungkin anda sudah mencoba Label Tag Cloud yang merupakan widget bawaan blogger, maka penampilannya akan terasa amat jauh berbeda. Tentu saja tag cloud CSS3 dengan efek pada background link dan color link ini lebih layak untuk ditampilkan sebagai pelengkap blog anda guna memberi layanan maksimal kepada pengunjung.

Kode CSS tagcloud CSS3

.tagcloud {
       width:300px;
       margin:10px auto;
       font-family:Times;
       padding:15px 8px;
       text-align:center; /* original code by: gubhug reyot.blogspot.com */
       border:solid 1px #eee; 
       background:#fff;
}
.tcloud { 
       padding:3px 6px;
       text-decoration:none;
       -o-transition:all 0.6s ease-in;
       -moz-transition:all 0.6s ease-in;
       -webkit-transition:all 0.6s ease-in;       
}
.tcloud:link {
       color:#003EBA;
}
.tcloud:visited {
       color:#ff900;
}
.tcloud:hover {
       color:#ffffff;
       background:#003EBA;
       text-decoration:none;
}
.tcloud:active {
       color:#777;
       background:#5D7CBA;
}

Simpanlah kode CSS ini di atas kode ]]></b:skin>, kemudian kode HTML-nya simpan melalui Add a Gadget (di Page Elemen/Elemen Laman).

xHTML

<div class="tagcloud">
<a style="font-size:10px" class="tcloud" href="Link-1" title="Title Link-1">Nama Link-1</a>
<a style="font-size:16px" class="tcloud" href="Link-2" title="Title Link-2">Nama Link-2</a>
<a style="font-size:18px" class="tcloud" href="Link-3" title="Title Link-3">Nama Link-3</a>
<a style="font-size:14px" class="tcloud" href="Link-4" title="Title Link-4">Nama Link-4</a>
<a style="font-size:27px" class="tcloud" href="Link-5" title="Title Link-5">Nama Link-5</a>
<a style="font-size:22px" class="tcloud" href="Link-6" title="Title Link-6">Nama Link-6</a>
<a style="font-size:14px" class="tcloud" href="Link-7" title="Title Link-7">Nama Link-7</a>
<a style="font-size:18px" class="tcloud" href="Link-8" title="Title Link-8">Nama Link-8</a>
<a style="font-size:10px" class="tcloud" href="Link-9" title="Title Link-9">Nama Link-9</a>
<a style="font-size:14px" class="tcloud" href="Link-10" title="Title Link-10">Nama Link-10</a>
</div>

Anda dapat merubah lebar tag cloud dengan mengganti kode yang berwarna merah, dimana semakin kecil nilainya maka akan semakin sempit dan bila bertambah besar maka akan semakin lebar. Untuk mengganti jenis font, rubah pada kode yang berwarna kuning.

Tutorial Lengkap

Untuk membaca tutorial lengkapnya, silahkan klik link tutorial di bawah ini:

Back to tutorial