Membuat Css Tag Cloud Background Efek

• Login ke Blogger (Login to Blogger).
• Dasbor (Dasboard).
• KLIK Design/Rancangan.
• KLIK Edit HTML.
• Back-up Templates : Amankan template dengan cara :
  • KLIK Download Template Lengkap (Download Full Template).
  • Simpan Template di folder PC.
  • Kembali ke Edit HTML.
• Cari KODE ]]></b:skin> .
• Copy paste KODE CSS berikut dan letakkan di atas kode ]]></b:skin> .
• KLIK Simpan Template (SAVE Template).

KODE CSS :

.tagcloud {
       width:300px;
       margin:10px auto;
       font-family:Times;
       text-align:center;       
       padding:15px 8px;
       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:#ffffff;
       background:#5D7CBA;
}

Cara Menggunakan Kode HTML :

• Setelah dasbor anda akan masuk di Page Element/Elemen Laman. KLIK Add a Gadget.
• Setelah terlihat beberapa widget, pilih dan KLIK HTML/Javascript.
• Akan disediakan sebuah box untuk menambah widget. Copy-paste xHTML ke dalam box.
• KLIK Simpan/SAVE.
• Buka halaman blog dan lihat hasilnya.

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>

KETERANGAN:

• Link-1 s/d Link-10 bisa diperbanyak disesuaikan dengan dengan jumlah link yang akan ditampilkan.
• Link-1 s/d Link-10 adalah link posting yang telah diterbitkan dengan URL seperti misalnya :
  http://..../....../judul posting.html
• Nama Link-1 s/d Link-10 = Judul Posting/menu.
• Title Link berisikan penjelasan singkat Nama Link.

Semoga Bermanfa'at