Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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. Amankan template terlebih dahulu, caranya lihat di sini !
  3. Cari KODE ]]></b:skin> kemudian simpan KODE CSS di atasnya persis.
    KLIK Simpan Templates !
  4. Masuk ke Tata Latak dan Lanjutkan KLIK Elemen Laman.
  5. KLIK Tambah Gadget pada bagian "sidebar".
  6. KLIK HTML/Javascript.
  7. Letakkan data HTML yang berisi link Tag Cloud di ruangan tersebut.
  8. Klik "SIMPAN".
  9. Lihat Hasilnya dengan membuka blog !
Screenshoot CSS Tag Cloud :

CSS - 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 :
  • http://Link-1 s/d Link-25 di isi dengan Link setiap Judul/Nama Link yang akan di tampilkan.
  • Jumlah bisa disesuaikan dengan kebutuhan (tidak harus 25-Link).
  • XX diisi dengan jumlah posting yang di buat pada link tersebut.
  • class="B1bold" dll digunakan untuk membentuk teks Nama Link supaya berbeda ukuran dan warnanya.
  • Untuk menambah ukuran dan warna atau merubahnya silahkan lakukan pada KODE CSS.
  • CSS Tag Cloud ini sudah saya coba di blog dan hasilnya sangat memuaskan !

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - gubhugreyot «

2 komentar:

  1. makasih infonya ya..dan salam kenal...

    BalasHapus
  2. Yupzzzzsss, Mantap and Lengkap yang dibutuhkan para BLOGGER autodidak macam saya... TQs

    Hormat;

    www.aruislands.blogspot.com
    www.aruislands.com

    BalasHapus

 
GR | Edited by | gubhug reyot