Kumpulan Kode CSS Label / Kategori Keren di Blog

ikuti tutorial berikut ini untuk mengetahui lebih lanjut tentang instalasi Label Kategori sekaligus memodifikasinya menjadi lebih keren. Berikut tutorialnya:

Di blogger, label adalah sebuah sebutan untuk menyebutkan suatu fitur yang digunakan untuk mengkategorikan artikel/postingan kedalam sub sub tertentu. Dari sudut pandang pengunjung, label sangat berfungsi untuk mempermudah mereka mencari artikel/postingan berdasarkan kategori tertentu. Maka dari itulah, pemberian label pada sebuah postingan adalah hal yang wajib dilakukan untuk meningkatkan SEO blog itu sendiri.

Optimalnya, penempatan navigasi Label biasa ditempatkan di sidebar, karena posisi ini dianggap paling efektif untuk menarik perhatian pengunjung untuk membaca artikel lain di blog anda.

Tidak semua orang memiliki blog dengan label yang sedikit, banyak orang justru asal asalan membuat label dan membuat jumlahnya menumpuk, jika anda merupakan salah satu dari mereka, silahkan pilih 7-10 label yang rasanya ingin ditampilkan untuk menciptakan kesan 'rapi' di tampilan blog anda.

Jika anda sudah menentukan label mana saja yang ingin anda tampilkan di sidebar blog anda, silahkan ikuti tutorial berikut ini untuk mengetahui lebih lanjut tentang instalasi Label Kategori sekaligus memodifikasinya menjadi lebih keren. Berikut tutorialnya:

Langkah 1: Memasang Widget Label di Blog

Ini merupakan tutorial untuk memasang daftar label dengan bentuk standart.

• Login ke Dashboard Blog anda
• Pilih menu Tata Letak/Layout--> Tambahkan Gadget--> Label
• Isi sesuai keinginan anda

Contoh pengisian:

(Wajib pilih label dengan tampilan Cloud)
Disini, saya hanya menampilkan menampilkan 5 label tertent dari 88 label yang saya miliki

• Simpan

Ketika anda melakukan cara diatas, anda sudah berhasil menambahkan label kedalam tampilan blog anda, dengan catatan, label tersebut merupakan label standart (terkadang merupakan bawaan template itu sendiri).

Langkah 2: Memodifikasi Tampilan Label Dengan CSS

Untuk memodifikasi tampilan label tersebut, anda dapat memilih salah satu style dibawah dan silahkan ikuti tutorial untuk memodifikasinya. Berikut adalah beberapa style label yang dapat anda pilih beserta tutorialnya:

Style 1

Cara Pemasangan:

• Masuk ke Dashboard Blog Anda
• Pilih menu Template--> Sesuaikan--> Tingkat Lanjut--> Tambahkan CSS
• Tempatkan Script berikut ini di kolom yang telah disediakan

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{background:#0dd7b4;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:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:active{background:#333333} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333333;color:#fff!important} .label-size{line-height:1.2}

• Di pojok kanan atas, pilih Terapkan ke Template

Style 2

Cara Pemasangan:

• Masuk ke Dashboard Blog Anda
• Pilih menu Template--> Sesuaikan--> Tingkat Lanjut--> Tambahkan CSS
• Tempatkan Script berikut ini di kolom yang telah disediakan

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{border-radius:30px;background:#FA0830;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:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:active{border-radius:30px;background:#333333} .label-count{white-space:nowrap;border-radius:30px;padding-right:3px;margin-left:-3px;background:#333333;color:#fff!important} .label-size{line-height:1.2}

• Di pojok kanan atas, pilih Terapkan ke Template

Style 3

Cara Pemasangan:

• Masuk ke Dashboard Blog Anda
• Pilih menu Template--> Sesuaikan--> Tingkat Lanjut--> Tambahkan CSS
• Tempatkan Script berikut ini di kolom yang telah disediakan

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{border:8px inset #0572F8;background:#0572F8;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:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:active{background:#000000} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}

• Di pojok kanan atas, pilih Terapkan ke Template

Jika Sobat ingin tampilan lainnya, Sobat bisa kunjungi Situs -nya. Terimakasih telah brkunjung di Banua Ilmu. Salam Sobat Blogger Indonesia..