Membuat Css Tag Cloud Background Efek

Pada hari ini taukahbahwa.blogspot.com akan membahas artikel tentang Membuat Css Tag Cloud Background Efek. Semoga dengan berita Membuat Css Tag Cloud Background Efek akan menambah wawasan untuk anda pembaca setia taukahbahwa.blogspot.com

• 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

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com