Blog Personal Faisal Fachrureza yang membahas Tutorial, Tips, dan Trik seputar Internet, Sosial Media, Blogging, dan Lain-Lain.

Cara Membuat Widget Label Blog Menjadi Warna Warni

Membuat Widget Label Menjadi Warna Warni ~ Jika kemarin Faisal Fachrureza Share sudah berbagi tentang cara Membuat Widget Popular Post Menjadi Warna-Warni, kali ini masih sama topiknya yaitu 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.
Momodifikasi Widget Label Menjadi Warna Warni

Langkah Pertama :  Memasang Widget Label di Blog

  • Masuk ke akun blogger kalian
  • Pilih menu Tata Letak kemudian klik Tambahkan Gadget
    Momodifikasi Widget Label Menjadi Warna Warni
  • 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
Ok, sekian tutorial tentang "Membuat Widget Label Menjadi Warna Warni". Silahkan juga lihat artikel-artikel lain seputar blogging di Faisal Fachrureza Share. Semoga bermanfaat ^_^ 

Source : http://fendevils.blogspot.com/2013/07/modifikasi-label-cloud-menjadi-full.html
Cara Membuat Widget Label Blog Menjadi Warna Warni Rating: 4.5 Diposkan Oleh: Faisal Fachrureza

7 komentar:

  1. wah jadi tambah menarik dan bisa memikat pengunjung untuk baca pada widget label ya mas. Bisa dicoba nih tutorialnya. Thanks for share :)

    BalasHapus
    Balasan
    1. Nilai 99,9 buat mbak, hehehe. Dengan menambahkan warna yang colorfull memang akan memikat mata pengunjung buat melihat widget tersebut karena beda dari yang lainnya. :) Bayangkan saja kalo mbak pergi kekuburan pake baju warna-warni, pasti diliatin banyak orang tuh, wkwkwk bercanda ;)

      Hapus
  2. BAGUS WIDGET NYA BANG :)
    TERIMA KASIH

    BalasHapus
  3. tak jajal kang faisal kayangapa pake baha purwokerto = saya coba mas faisal seperti apa :D salam kenal

    BalasHapus
  4. Gan udah, tapi label ku gak ada, cara buat isi label itu gimana?

    BalasHapus
  5. makasie buat tutorialnya mas :) btw ini beratin blog gak yah??

    BalasHapus
    Balasan
    1. Insyaallah nggk mbak intan, kan cuma nambah css aja, gak nambah javascript

      Hapus