Home » CSS » Optimasi Wordpress » Customisasi Tampilan Tag Cloud

Customisasi Tampilan Tag Cloud

29 Nov. 201046 comments
Customisasi Tampilan Tag Cloud

Kalau sebelumnya sudah saya posting tentang cara mengganti sparator tag dan category, kini akan saya sharing cara mengganti (customisasi) tampilan tag cloud yang ada di sidebar secara lebih mendetail.

Beberapa hal yang bisa anda lakukan untuk mengganti tampilan tag cloud atau category cloud dari tampilan default atau standard di antaranya :

1. Ukuran dan jumlah tag atau category cloud

Ukuran tag cloud atau category cloud defaultnya adalah 8pt untuk ukuran terkecilnya dan 22 pt untuk ukuran terbesarnya. Menurut saya tampilan default ini terkadang kurang simetris dengan tampilan bagian lainnya yang ada di sidebar atau footer (jika tag cloud ditempatkan di footer). Cara menggantinya, buka file category-template.php yang ada di folder wp-includes kemudian cari kode berikut ini (kira-kira ada di baris 563) :

function wp_tag_cloud( $args = '' ) {
$defaults = array(
'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45

Ganti angka yang saya beri warna merah dengan ukuran yang anda kehendaki. Untuk jumlah tag cloud yang ingin ditampilkan anda bisa menggantinya pada angka yang saya beri warna biru (defaultnya 45).

2. Perataan text

Tampilan default tag cloud adalah rata kiri (text-align:left). Anda bisa menggantinya menjadi rata kanan kiri (text-align:justify), tengah (text-align:center) dan rata kanan (text-align:right) yang terakhir ini kayaknya belum pernah ada yang memakainya.

3. Mengganti font. Anda juga bisa mengganti jenis dan warna font pada tampilan tag cloud dan warna font saat di hover.

4. Warna tag cloud, background dan border. Anda juga bisa memberi warna tag cloud, background dan bisa juga memberi border pada masing-masing tag cloud tersebut.

5. Spasi. Anda bisa membuat pengaturan tinggi spasi dari tampilan tag cloud (line height). Pengaturannya bisa menggunakan px, persen (%) atau em.

Cara menerapkannya (point ke 2-5), anda harus tahu id atau class dari tampilan tag cloud tersebut pada struktur HTML yang digunakan, caranya silahkan lihat source code HTMLnya dengan cara (jika menggunakan Firefox) klik kanan pada mouse – klik view page source atau dengan menekan Ctrl+U pada keyboard. Sebagai contoh, blog ini id tag cloudnya adalah : tag_cloud-5 <div id="tag_cloud-5" class="widget widget_tag_cloud">.

Jika sudah ketemu, tambahkan id atau class dari tag cloud tersebut ke dalam file css yang digunakan. Contoh :

#tag_cloud-5 {di bagian properties ini anda bisa membuat pengaturan warna background, perataan text, spasi dll }
#tag_cloud-5 a {di bagian properties ini anda bisa membuat pengaturan warna background dari link tag cloud, warna font, border, padding dll}
#tag_cloud-5 a:hover {di bagian properties ini anda bisa membuat pengaturan warna background  dari link tag cloud, warna font, border dll saat di hover }

Ini contoh hasil customisasi dari tampilan category atau tag cloud dengan sentuhan CSS3 seperti border radius, box shadow, gradient dan lain-lain :

Atau seperti ini, ketika dihover sedikit bercahaya  :

Anda bisa membuat kreasi-kreasi lainnya puluhan bahkan ratusan kombinasi dengan mengekplorasi bagian properties pada id atau class tag cloud tersebut dengan fitur yang ada di CSS. Bahkan jika anda kreatif bisa diberi sedikit sentuhan animasi dengan CSS3 saat tag cloud tersebut dihover.

Mudah-mudahan artikel tentang Customisasi Tampilan Tag Cloud ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Main Remi Bersama Top Komentator
  2. CSS Image Sprites Generator
  3. Free CSS Button Generator
  4. Yesterday, The Beatles
  5. Membuat Efek Text Stroke Dengan CSS
  6. Membuat Text Gradient Dengan CSS
  7. Custom CSS Per Post
  8. Membuat Menu Navigasi Dengan CSS3
  9. Border Style, Border Width, Border Color
  10. Bypass Template Path dan Stylesheet Path
  1. 29-11-2010 at 02:29 | #1

    Makasih tipsnya Mas Alwi, akan aku coba terapkan di blog ku

    Reply

    Barcode Printer Reply:

    aku juga pengen ucapkan terima kasih sekali tipsnya

    Reply

  2. 29-11-2010 at 05:12 | #2

    (Maaf) izin mengamankan KEDUAX dulu. Boleh, kan?!
    Tips yang mantab, Kang. Tapi wp saya gak perlu kek gitu

    Yup, ini memang khusus wp dg hosting sendiri heee… tapi bisa juga untuk yg si biru

    Reply

    Hybrid car Reply:

    Boleh..boleh..boleh bung alam. Kemana saja ?

    Reply

    alamendah Reply:

    Waduuuuh….. kerjaan offline numpuk banget, ki…

    Reply

  3. 29-11-2010 at 05:12 | #3

    (Maaf) izin mengamankan KETIGAX dulu. Boleh, kan?!
    Selamat pagi, Kang

    Met pagi jugaaa..

    Reply

    Barcode Printer Reply:

    selamat malam Kang, ketigax aman dibawah Kang Alamenda

    Reply

  4. 29-11-2010 at 08:00 | #4

    Mantep Mas…
    Tutorialnya sangat jelas, diuraikan detail, thirik2 dan bertahap.
    Sukses untuk Mas Alwi.

    Thank, sukses juga buat Pak Mars…

    Reply

  5. 29-11-2010 at 08:26 | #5

    nuhun kang alwi…

    btw izin nyari2 artikel bandwidth limited yaa

    Silahkan Kang, terutama di artikel dg category Optimasi WordPress, wah kayaknya perlu diupgrade tuh space bandwidthnya atau kalau mau hemat bandwidth semua gambar bisa dihosting di server lain (jasa penyimpanan image atau bisa di wp.com

    Reply

  6. 29-11-2010 at 09:05 | #6

    Mas, ajari nggawe CNAME… :D

    Oce dech, ni lagi ngejar target urusan kantor dulu moga cepet kelar

    Reply

  7. 29-11-2010 at 10:35 | #7

    Satu lagi script buat dikoleksi…. thanks bung alwi.

    Reply

  8. 29-11-2010 at 12:02 | #8

    ubiunik nih, kreatif, bisa dicoba

    Reply

  9. 29-11-2010 at 13:35 | #9

    mantap ilmu baru lagi Kang…

    Reply

    Bang Iwan Reply:

    Tampilan Tag cloud jadi keren begitu..

    Reply

    Bang Iwan Reply:

    Izin copas dulu,… masih takut kutak-katik

    bisa dicoba di server lokal dulu Kang …

    Reply

  10. 29-11-2010 at 20:32 | #10

    saya baca berkali2 lho kang, bingung ga mudeng2 hehehe

    Reply

Comment pages
3+8=? (Wajib diisi)