Cara Membuat Label Warna Warni

Kali ini saya akan membahas tutorial terbaru yaitu membuat label warna-warni namun berbeda dalam hal widget yang akan dimodifikasi. Widget yang kita buat warna-warni ini adalah widget label atau bisa juga disebut widget kategori.

Langkah Pertama :  Memasang Widget Label di Blog

• Masuk ke akun blogger kalian
• Pilih menu Tata Letak kemudian klik Tambahkan Gadget
  
• Pilih widget Label dengan mengklik tombol plus (+)
  
• Selanjutnya, pada pengaturan bagian Tampilkan pilih Cloud dan sisanya silahkan anda ubah sesuai selera.
  
• Terakhir, klik Simpan

Langkah Kedua : Memasang Kode CSS di Blog

• Pilih menu Template lalu klik Edit HTML
  
• 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 :
- Kode yang berwarna biru bisa akan muncul sebagai warna pada setiap label, bisa kalian ubah sesuai selera masing-masing
- Kode yang berwarna jingga / orange akan muncul sebagai warna saat cursor diarahkan pada label, bisa kalian ubah sesuai selera masing-masing
 - Untuk kode warna, kalian bisa melihat di Generator Kode Warna HTML 

•  Terakhir,  klik Simpan Template

kunjungi daftar isi blog ini bila anda mencar artikel yang lainnya

Semoga artikel ini bermanfaat salam blogger. . .

Terima Kasih telah membaca artikel tentang Cara Membuat Label Warna Warni . Silahkan baca artikel lainnya di daftar isi.

• Tweet
• Share
• Share
• Share
• Share

Unknown

Judul : Cara Membuat Label Warna Warni .
Ditulis oleh : Unknown .
Pada hari : Thursday 7 August 2014 .
Rating Blog : 5 dari 5

Follow me on: Facebook | Twitter | Google+

×

Related Post