Excalibur
Info

Selamat Datang

Selamat Datang Di Blog Roy Lichtenstein- Saya Senang Anda Berada Di Sini, Dan Berharap Anda Sering Datang Kembali. Silakan Berlama - Lama Di Sini Dan Membaca Lebih Lanjut Tentang Artikel Yang Saya Susun. Ada Banyak Hal Dapat Anda Pelajari, Anda Mungkin Akan Menemukan Sesuatu Yang Menarik

Sekilas Tentang Roy

Nama saya Roy Lichtenstein, Saya Bukan Seorang Blogger, Hacker, Desainer Atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar Dan Ingin Tau Sesuatu Yang Baru...

Social Icons

xtreme5-roylichtenstein.blogspot.com

Cara Membuat CSS Tag Cloud: Panduan BloGGeR Special Edition

Membuat tag cloud tidaklah harus menggunakak javascript atau KODE html yang rumit dan cara pasangnya membuat pusing kepala. Dengan menggunakan KODE CSS yang simple kita bisa menciptakan sebuah tag Cloud yang sangat cantik dengan penampilan yang tak kalah menarik bila dibandingkan tag cloud lain dengan KODE atau script bejibun. Kelebihan penggunaan CSS murni ini tentunya yang jelas tidak bikin blog tambah "lelet".

Cara membuat CSS Tag Cloud :

  1. Login ke Blogger.
  2. Cari KODE ]]></b:skin> kemudian simpan KODE CSS di atasnya persis.
    KLIK Simpan Templates !
  3. Masuk ke Tata Latak dan Lanjutkan KLIK Elemen Laman.
  4. KLIK Tambah Gadget pada bagian "sidebar".
  5. KLIK HTML/Javascript.
  6. Letakkan data HTML yang berisi link Tag Cloud di ruangan tersebut.
  7. Klik "SIMPAN".
  8. Lihat Hasilnya dengan membuka blog !
Screenshoot CSS Tag Cloud :


#takhludh{
width:250px;
padding:12px 6px;
border:2px solid #660000;
background:#FFFFCC;
margin:30px 5px 5px;
}
#takhludh a{
font-family:Arial;
text-decoration:none;
}
#takhludh a:hover{
color:red;
text-decoration:none;
border-bottom:2px dotted blue;
}
#takhludh h5.judul{
font:20px Times New Roman;
color:#999;
background:#060344;
font-weight:bolder;
text-align:center;
border-bottom:2px solid #003366;
margin:0;
}
#takhludh a.A1{color:#006666; font-size:11px;}
#takhludh a.A1bold{color:#006666; font-size:11px; font-weight:bold;}
#takhludh a.B1{color: #333366; font-size:12px;}
#takhludh a.B1boldbold{color:#006666; font-size:12px; font-weight:bold;}
#takhludh a.C1{color:#66CC33; font-size:14px;}
#takhludh a.C1bold{color:#66CC33; font-size:14px;font-weight:bold;}
#takhludh a.D1{color:#990099; font-size:16px;}
#takhludh a.D1bold{color:#990099; font-size:16px;font-weight:bold;}
#takhludh a.E1{color:#990033; font-size:18px;}
#takhludh a.E1bold{color:#990033; font-size:18px;font-weight:bold;}
#takhludh a.F1{color: #FF9900; font-size:20px;font-weight:bold;}
#takhludh a.F1bold{color:#990033; font-size:20px;font-weight:bold;}
 
 
 
 
xHTML - CSS Tag Cloud :
 
<center>
<div id="takhludh">
<h5 class="judul">CSS Tag Cloud</h5>
<a href="http://.../Link-1" target="_blank" title="XX Title Link-1" class="B1">Nama Link-1</a>
<a href="http://.../Link-2" target="_blank" title="XX Title Link-2" class="A1bold">Nama Link-2</a>
<a href="http://.../Link-3" target="_blank" title="XX Title Link-3" class="C1">Nama Link-3</a>
<a href="http://.../Link-4" target="_blank" title="XX Title Link-4" class="D1bold">Nama Link-4</a>
<a href="http://.../Link-5" target="_blank" title="XX Title Link-5" class="F1">>Nama Link-5</a>
<a href="http://.../Link-6" target="_blank" title="XX Title Link-6" class="A1bold">Nama Link-6</a>
<a href="http://.../Link-7" target="_blank" title="XX Title Link-7" class="F1">Nama Link-7</a>
<a href="http://.../Link-8" target="_blank" title="XX Title Link-8" class="A1bold">Nama Link-8</a>
<a href="http://.../Link-9" target="_blank" title="XX Title Link-9" class="A1bold">Nama Link-9</a>
<a href="http://.../Link-10" target="_blank" title="XX Title Link-10" class="F1bold">Nama Link-10</a>
<a href="http://.../Link-11" target="_blank" title="XX Title Link-11" class="D1">Nama Link-11</a>
<a href="http://.../Link-12" target="_blank" title="XX Title Link-12" class="C1bold">Nama Link-12</a>
<a href="http://.../Link-13" target="_blank" title="XX Title Link-13" class="B1bold">Nama Link-13</a>
<a href="http://.../Link-14" target="_blank" title="XX Title Link-14" class="E1bold">Nama Link-14</a>
<a href="http://.../Link-15" target="_blank" title="XX Title Link-15" class="A1bold">Nama Link-15</a>
<a href="http://.../Link-16" target="_blank" title="XX Title Link-16" class="F1">Nama Link-16</a>
<a href="http://.../Link-17" target="_blank" title="XX Title Link-17" class="C1">Nama Link-17</a>
<a href="http://.../Link-18" target="_blank" title="XX Title Link-18" class="B1">Nama Link-18</a>
<a href="http://.../Link-19" target="_blank" title="XX Title Link-19" class="C1bold">Nama Link-19</a>
<a href="http://.../Link-20" target="_blank" title="XX Title Link-20" class="E1bold">Nama Link-20</a>
<a href="http://.../Link-21" target="_blank" title="XX Title Link-21" class="E1bold">Nama Link-21</a>
<a href="http://.../Link-22" target="_blank" title="XX Title Link-22" class="F1bold">Nama Link-22</a>
<a href="http://.../Link-23" target="_blank" title="XX Title Link-23" class="A1bold">Nama Link-23</a>
<a href="http://.../Link-24" target="_blank" title="XX Title Link-24" class="C1">Nama Link-24</a>
<a href="http://.../Link-25" target="_blank" title="XX Title Link-25" class="A1">Nama Link-25</a>
</div>
</center> 
 
 
Keterangan/Catatan :
  1. Jumlah link tidak harus 30 Link. Bisa ditambah atau dikurangi.
  2. href="Link-1" diisi seperti :http://gubhugreyot.blogspot.com/Tutorial Blogger.html
  3. Nama Link seperti misalnya Tutorial Blogger, Tips Trik Blogger, dll.
    Title berupa teks singkat yang berkaitan dengan Link yang di gunakan.
  4. Lebar box tag cloud bisa disesuaikan dengan ruang blog, atau diganti dengan --> width:auto; (KODE CSS paling atas).

Tidak ada komentar:

Posting Komentar

Berikan Komentar Anda Dibawah Sini Jika Belum Punya Akun Google/Blogger Anda Bisa Pilih Anonymous