Cara Membuat Widget Label Menjadi Full Color

Cara Membuat Widget Label Menjadi Full Color

Cara Membuat Widget Label Menjadi Full Color - Hay, sobat tutorialku? Apa kabar! Jika pada artikel sebelumnya saya telah Berbagi tips Cara Memasang Widget Alexa di Blog. Nah, pada kesempatan kali ini saya akan berbagi tips Cara Membuat Widget Label Menjadi Warna-Warni. Widget yang kita buat warna-warni ini adalah widget label atau bisa juga disebut widget kategori.

Untuk yang udah ngak sabar dengan tutorial kali ini, langsung saja disimak dibawah ini langkah-langkahnya dengan teliti :)
Cara Membuat Widget Label Menjadi Full Color
Langkah Pertama: Memasang Widget Label di Blog 
  • Masuk ke Akun Blogger kalian
  • Pilih Menu Tata Letak kemudian klik Tambahkan Gadget

Cara Membuat Widget Label Menjadi Full Color
  • Cari dan Pilih Widget Label dengan mengklik tombol plus (+)
Cara Membuat Widget Label Menjadi Full Color
  • Selanjutnya, pada pengaturan bagian tampilan pilih Cloud, dan sisanya silahkan anda ubah sesuai dengan keinginan.
Cara Membuat Widget Label Menjadi Full Color
  • Terakhir Simpan Gadget.

Langkah Kedua: Memasang kode CSS di Blog
  • Pilih menu Template lalu klik Edit HTML

Cara Membuat Widget Label Menjadi Full Color

  • Cari kode ]]></b:skin> ( gunakan Ctrl+F untuk memudahkan )
  • Copy kode berikut lalu pastekan tepat diatas kode ]]></b:skin>
#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;padding: 5px 0}
#Label1 .cloud-label-widget-content span {display: inline-table; line-height: 1.2;}
#Label1 .cloud-label-widget-content span a {padding:4px 5px;color:#fff}
#Label1 .label-size {margin:4px 0;}
#Label1 .label-size span {background:#007abe;padding:4px 5px;color:#fff}
#Label1 .label-size-1 a {background:#abc123;font-size:15px;}
#Label1 .label-size-2 a {background:#5cc9cd;font-size:15px;}
#Label1 .label-size-3 a {background:#e24f4f;font-size:15px;}
#Label1 .label-size-4 a {background:#f568dc;font-size:15px;}
#Label1 .label-size-5 a {background:#38a3ee;font-size:15px;}
#Label1 .cloud-label-widget-content span a:hover {background:#007abe;}  

Keterangan:
  1. Kode yang berwarna-warni akan muncul sebagai warna pada setiap label, bisa kalian ubah sesuai selera masing-masing.
  2. Kode yang berwarna #007abe akan muncul sebagai warna saat cursor diarahkan pada label, bisa kalian ubah sesuai selera masing-masing.
  • Terakhir Simpan Template.
Bagaimana? mudah dan menarikan hasilnya. Sekian artikel saya kali ini tentang "Cara Membuat Widget Label Menjadi Full Color", semoga dapat bermanfaat untuk anda semua. Jika ada masalah jangan ragu ajukan disini. Sampai Jumpa :)
Cara Membuat Widget Label Menjadi Full Color Cara Membuat Widget Label Menjadi Full Color Reviewed by Mgs Rama Dony on 3:44 PM Rating: 5

No comments:

Silahkan berkomentar sesuai topik artikel diatas.
1. Jangan tinggalkan link akitf
2. Jangan gunakan kata kotor, spam, sara, atau provokasi lain
3. Gunakanlah form komentar dengan baik dan bijak

Powered by Blogger.