Cara Membuat Widget Label Warna Warni Di Blog
Saturday, December 16, 2017
Add Comment
Cara Membuat Widget Label Warna Warni Di Blog-Kali ini saya akan membahas sedikit mengenai widget label.Widget label atau tags berfungsi untuk mengelompokkan kategori postingan yang ada di blog kita.Membuat label widget dengan menggunakan warna maka akan memperindah tampilan blog kita.Tampilannya seperti ini.
Diatas adalah contoh widget label dengan menggunakan warna warna yang cerah sehingga membuat siapa saja yang melihatnya akan tetarik.Berikut cara membuat widget label warna warni dengan mudah:
1.Login pada blog kamu
2.Pilih menu Template lalu Edit HTML
3.Copy lalu pastekan kode dibawah ini tepat diatas kode </b:skin>.Jika tidak ada kode </b:skin> di blog kamu,kamu bisa mencari kode </style> menggunakan kombinasi tombol CTRL+F lalu cari
4.Setelah selesai mengedit HTML,selanjutnya klik simpan
5.Selanjutnya,klik menu Tata Letak di blog kamu
6.Klik tambahkan gadget/widget lalu pilih label
7.Buat pengaturan seperti dibawah ini
8.Selesai
Penutup
Membuat widget label warna warni di blog tidaklah sulit.Kamu bisa mencobanya sendiri pada blog kamu.Selain warnanya yangcerah,widget seperti itu juga dapat menyegarkan mata siapa saja yang mengunjungi blog kamu.
Diatas adalah contoh widget label dengan menggunakan warna warna yang cerah sehingga membuat siapa saja yang melihatnya akan tetarik.Berikut cara membuat widget label warna warni dengan mudah:
1.Login pada blog kamu
2.Pilih menu Template lalu Edit HTML
3.Copy lalu pastekan kode dibawah ini tepat diatas kode </b:skin>.Jika tidak ada kode </b:skin> di blog kamu,kamu bisa mencari kode </style> menggunakan kombinasi tombol CTRL+F lalu cari
/* Sidebar Label Cloud */CATATAN: Warna merah pada kode tersebut adalah kode warna.Kamu bisa menggantinya sesuka hati kamu.
.cloud-label-widget-content {text-align: left;} .label-size
{background: #83B4D8;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;} .label-size:nth-child(1)
{background: #fb0058;} .label-size:nth-child(2)
{background: #37C371;} .label-size:nth-child(3)
{background: #10BBEA;} .label-size:nth-child(4)
{background: #fe25ec;} .label-size:nth-child(5)
{background: #366396;} .label-size:nth-child(6)
{background: #A3195C;} .label-size:nth-child(7)
{background: #500c6ff;} .label-size:nth-child(8)
{background: #F2A15F;} .label-size:nth-child(9)
{background: #ffc600;} .label-size:nth-child(10)
{background: #54b70b;} .label-size:nth-child(11)
{background: #99CC33;} .label-size:nth-child(12)
{background: #ff463d;} .label-size:nth-child(13)
{background: #3FDECF;} .label-size:nth-child(14)
{background: #FF2F0A;} .label-size:nth-child(15)
{background: #E9DB58;} .label-size:nth-child(16)
{background: #42FFBD;} .label-size:nth-child(17)
{background: #6899ED;} .label-size:nth-child(18)
{background: #FF52AE;} .label-size:nth-child(19)
{background: #8DBC2F;} .label-size:nth-child(20)
{background: #80FF00;} .label-size a, .label-size span
{ display: inline-block; color: #fff !important; padding: 4px 10px; font-weight: bold; } .label-size:hover { background: #222; } .label-count { white-space: nowrap; padding-right: 3px; margin-left: -3px; background: #333; color: #fff ; } .label-size:hover .label-count, .label-size:focus+.label-count { background-color: #FF6BFF; }
4.Setelah selesai mengedit HTML,selanjutnya klik simpan
5.Selanjutnya,klik menu Tata Letak di blog kamu
6.Klik tambahkan gadget/widget lalu pilih label
7.Buat pengaturan seperti dibawah ini
8.Selesai
Penutup
Membuat widget label warna warni di blog tidaklah sulit.Kamu bisa mencobanya sendiri pada blog kamu.Selain warnanya yangcerah,widget seperti itu juga dapat menyegarkan mata siapa saja yang mengunjungi blog kamu.
0 Response to "Cara Membuat Widget Label Warna Warni Di Blog"
Post a Comment
NO SPAM PLEASE