Cara membuat Tag Cloud Dengan Background Effect

Viyan Pradita Senin, Maret 07, 2011 ,

Sedikit Penjelasan tentang apa itu Tag Cloud, dan apa fungsinya.
Tag Cloud merupakan sebuah box yang berfungsi sebagai wadah untuk sekelompok link dalam sebuah web.
Fungsi dari tag could kurang lebih sebagai wadah beberapa link dari posting yang telah diterbitkan. Model penulisan setiap link judul posting pada tagcloud di buat dalam berbagai variasi bentuk, ukuran dan gaya. lebih jelasnya liaht gambar dibawah ini.


Gambar


Berikut cara membuat Tag Cloud menggunakan efek background :

1. Login ke akun blogger sobat
2. Masuk Tata Letak
3. Edit HTML dan ceklist/centang "Expand Template Widget"
4. Biasakan sebelum sobat mengedit template, backUp dulu templatenya, dengan cara klik "download template lengkap"
5. Carikode berikut : ]]></b:skin>
6. Letakan kode css berikut dan taruh di atas kode ]]></b:skin>

.tagcloud {
width:300px;
font-family:Times;
padding:15px 8px;
border:solid 1px #eee;
background:#fff;
}
.tcloud {
padding:3px 6px;
text-decoration:none;
}
.tcloud:link {
color:#003EBA;
}
.tcloud:visited {
color:#ff900;
}
.tcloud:hover {
color:#ffffff;
background:#003EBA;
}
.tcloud:active {
color:#ffffff;
background:#5D7CBA;
}

7. Simpan Template.

8. Kemudian masuk ke Elemen Halaman, Tambah gadget, pilih HTML javascript, dan pastekan kode berikut :

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

9. Edit dan simpan.


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

Semoga Bermanfaat.

Ditulis Oleh :

Artikel Cara membuat Tag Cloud Dengan Background Effect ini dipublish pada hari: Senin, Maret 07, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

7 komentar
Terjun Ke Kolom Komentar

  1. Kerennz nich ntar aku coba ahh..

    BalasHapus
  2. Mass mao nanya nich, kalo mao bikin label blogumus tuch gimana yach..??

    BalasHapus
  3. @zhanaz45: Maaf baru sempet bls sob, sibuk sm template neh, gak kelar2.. hehehee
    Sebener na googling jg ada bnyak, nanti deh saya buat totornya sekalian sob.

    BalasHapus
  4. mas mou nanya nih kok gambar yang ad di website gamabar nya beda y

    BalasHapus
  5. @dzarr: Maksudnya gambar yang mana sob??

    BalasHapus
  6. dengan tag kita bs lebih mudah naruh link. Thx

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers