Saturday, 20 July 2013

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

No comments:

Post a comment

Silahkan Komen Rider,