Cara Membuat Tampilan Label Cloud Berwarna di Blogspot

Apakah anda ingin melihat tampilan widget label anda terlihat lebih cantik dan berwarna seperti gambar dibawah ini?


Widget label ini biasanya digunakan untuk mendata kategori blog. Kita semua tahu jika tampilan standar widget label cloud di blogspot sangat tidak memuaskan sekali. Kaku banget liatnya ya..

Oke deh langsung saja, jika anda berminat berikut cara membuat tampilan label cloud berwarna di Blogspot, seperti gambar diatas:
  1. Login ke akun blogger
  2. Pilih "Template"
  3. Klik "Edit HTML", jangan lupa aktifkan "Expand Template Widget"
  4. Cari kode ]]></b:skin>  atau cukup  ]]> , gunakan Ctrl F biar gampang
  5. Copy kode berikut dan pastekan SEBELUM kode ]]></b:skin>
  6. #Label1 a{float: left;
        font-size: 11px!important;
        line-height: 1em!important;
        display: block;
        margin-right: 7px;
        margin-bottom: 7px;
        padding: 7px;
        background: #ffd964 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG9BIp1QfsOE5krWcVzPjm2_Eomm1wRLsJf9COpwPEaa4qMXLM1iWJaCi4TiFsvO0XMGC_Khl_F1ZSIlcElrXeebKKUcffqzEJHCmgyC8RCLlYxN6vD7cNxN9FKJsoZ6_dSU5k0_WV1_Q/s1600/yellow-btrix.png);
        border: 1px solid #F9B653;
        color: #9C6533!important;
        text-shadow: 1px 1px 0px rgba(255,255,255,0.4);
        box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1);
        webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    #Label1 a:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEictLBH52MVTrQjutp9Tmi_ocZOsUetVN_fedcKMJ9ZEzcFTySSPVCeUuu60SluU5H4DIDYCPOrWQ_3yjf3kQvjUnxIPNjqJCSYRfyWdijz9NKJYMJiCg_BgFC5t2NTU93ANt7vrVyCgkc/s1600/yellow-btrix-hover.png);}
    #Label1 a:active { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYsamWcHiRIdoClTcrr6jefYwCM2ksqGBmlf8MDTpqk_VWT_9C_5KJ8-f2xsCBCy2lUAxzF4pBok367cCzV_mxzQ18cogVVC1zzGjzNb4zxoLnikHJraNsQHYU1ZRHFAxtHbbe4wzSlwQ/s1600/yellow-btrix-active.png); }
  7. Lakukan "Pratinjau" dulu sebelum "simpan template". Jika hasilnya sudah sesuai harapan baru disimpan.
  8. Selesai 

Penting! Jangan lakukan apapun sebelum baca ini:
  1. Sebelum melakukan langkah diatas tambahkan/aktifkan dulu widget label standar di menu "tata letak". Karena berdasarkan pengalaman kode diatas tidak akan bekerja sesuai yg diinginkan sebelum mengaktifkan widget label standarnya blogspot.
  2. Untuk merubah-ubah warnanya, silakan lakukan kreasi sendiri dengan cara mengubah kode warnanya. Lihat kode warna disini.
Semoga membantu ya, selamat mencoba.

Tidak ada komentar:

Posting Komentar