Merubah Tampilan Label Blog Menjadi Bergaya Metro

Pertama-tama, selamat tahun baru 2015, mari kita buat tulisan yang baru di lembaran baru yang sebanyak 365 lembaran, dan berharap bisa berubah menjadi pribadinya yang baru dan melupakan hal yang tidak baik di tahun lalu.

Artikel pertama di tahun 2015!. Sebenarnya saya pengen buat artikel ini tadi malam, cuman karena terhalang kantuk yang sangat luar biasa setelah menonton film favorit saya, ya...mau bagaimana lagi terpaksa harus ditunda dulu pembuatan artikelnya.

Merubah Tampilan Label Blog Menjadi Bergaya Metro
Kira-kira beginilah hasil akhirnya.
Kira-kira begitulah hasilnya nanti, tapi ya tampilan sih hanya sekedar tampilan, kalau namanya metro pasti tidak jauh dengan pemberian warna flat atau warna datar yang sudah saya publikasi sebelumnya di blog Mad Trik ini. Lihat di artikel sebelumnya dengan mengklik tautan berikut ini [Kumpulan Warna Flat UI].

Dan marilah kita langsung melihat langkah-langkah untuk mengubah tampilan label blog menjadi bergaya metro:

1. Langkah Pertama

Pertama-tama untuk tampilan taruh saja kode CSS dibawah ini untuk mengubah tampilan label yang sudah ada di blog kamu:

/*Cloud Label*/

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;}

.cloud-label-widget-content{text-align:left}

.label-size {background:#00AFAF;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}

.label-size a,.label-size span{display:inline-block;color:#fff;padding:6px 8px;font-weight:bold;}

.label-size a:hover {background:#007a7a;}

.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;background:#007a7a;color:#fff;}

.label-size {line-height:1.2}

Jika selesai simpan template blog kamu. Dan jangan lupa ada tanda di kode CSS diatas yang berarti sesuaikan dengan warna flat kesukaanmu. Untuk daftar warna flat bisa kamu cari di Google atau lihat di artikel saya sebelumnya.

2. Langkah Kedua

Untuk langkah yang terkahir jangan lupa mengubah tampilan label di blog kamu menjadi 'Cloud'. Caranya cukup mudah:

Pergi ke "Tata Letak" > "Tambah Gadget/Widget" > Cari "Label/Kategori" > Ubah atau centang "Display/Tampilan" menjadi "Cloud" dan jangan lupa centang juga "Show number of posts per label/Tampilkan jumlah posting per label" > Klik "Simpan".

Simpan perubahan tata letak di blog kamu.

Dan hasilnya bagaimana, sudah bagus bukan. Dan jangan lupa untuk mengganti warnanya sesuai dengan selera kalian ya.

4 comments

  1. Replies
    1. heheh biasa aja gan, itu juga sebenarnya dari template lain :D

      Delete
  2. Taruhnya dimana bang? di atas kode ]] skin kah?

    ReplyDelete

Perlu diingat saya juga manusia, yang kadang punya salah, jika ada kesalahan pada artikel yang dibuat kamu bisa membantu saya untuk memperbaiki artikel tersebut. Dan kadang saya juga tidak bisa manjawab pertanyaan kamu.