Cara membuat widget Label / category keren di blog

Cara membuat widget category/Label keren di blog

Widget label adalah sebuah widget yang menunjukan kategori tertentu dengan meringkas / mencakup posting terkait dengan label tersebut seperti contoh label kesehatan, kuliner dengan berisi artikel-artikel yang kita posting berkaitan label yang kita pasang, keuntungan memasang widget label / widget kategori adalah bagi seorang pembaca bisa lebih fokus dengan membaca hal yang berkaitan dengan label / kategori yang mereka inginkan.


saya punya beberapa model untuk widget label blog sobat agar lebih keren & enak di pandang mata,
Ok langsung saja,

1.membuat widget label flat ui keren 

cara pasangnya

• 1,login terlebih dahulu ke dashboard blogger kalian

• 2. kemudian masuk ke Template > add widget

• 3. nah selanjutnya klik label, kemudian atur setingannya dengan piling tampilan cloud

• 4. selanjutnya kita beralih ke menu template > edit html

• 5. cari kode "CSS Label" hapus kode css label bawaan template tersebut terlebih dahulu kemudian paste kan code css widget label flat ui ini

Silahkan copy paste script dibawah ini

/*CSS Label*/ .Label a{ padding-left: 5px; padding-right: 31.5px; color: #fff!important; height: 32px; background: #1abc9c; margin-right: 2px; line-height: 32px; text-decoration: none; border: none !important; -webkit-transition: all .3s ease-in-out !important; float: left; margin-top: 2px; font-size: 13px; text-align: left; } .Label a:hover{ color:#fff !important; background:#16a085; } .Label a:after{ content: ""; position: absolute; width: 0px; height: 0px; border-width: 16.5px; border-style: solid; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent;}

• 6. klik simpan, dan sekarang coba refresh halaman blog kalian untuk melihat perubahannya.

2.Membuat Widget Label Blog Warna-Warni di Sidebar

• 1. login terlebih dahulu ke dashboard blogger kalian

• 2. kemudian masuk ke Template > add widget

• 3. nah selanjutnya klik label, kemudian atur setingannya dengan piling tampilan cloud

• 4. selanjutnya kita beralih ke menu template > edit html

• 5. Copy & Paste Kode CSS Label Cloud berikut ini di atas kode </b:skin> atau </style>

Silahkan copy paste script dibawah ini

/* Sidebar Label Cloud */ .sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;} .sidebar .label-size a {color:#fff!important;background:#222;padding:8px 22px;margin:0 3px 3px 0;float:left;display:block; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .sidebar .label-size-1 a {background:#FF8000} .sidebar .label-size-2 a {background:#D7DF01} .sidebar .label-size-3 a {background:#B40404} .sidebar .label-size-4 a {background:#298A08} .sidebar .label-size-5 a {background:#084B8A} .label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover { background:#2288bb; color:#fff; text-decoration:none} .sidebar .label-size span { background:#2288bb; color:#fff; padding:8px 22px; margin:0 0 3px; clear:both; float:left; } .sidebar .label-size { position:relative; text-transform: uppercase; text-decoration:none; font-size:16px; font-family:'Oswald', sans-serif; color:#fff; } .sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;}

• 6. klik simpan, dan sekarang coba refresh halaman blog kalian untuk melihat perubahannya.

Note:
1. Warna latar (kode angka warna merah) bisa diubah lagi.
2.  Kode di atas untuk menampilkan 5 LABEL saja.

3.Membuat Widget Label Blog Keren

cara pasangnya

• 1,login terlebih dahulu ke dashboard blogger kalian

• 2. kemudian masuk ke Template > add widget

• 3. nah selanjutnya klik label, kemudian atur setingannya dengan piling tampilan cloud

• 4. selanjutnya kita beralih ke menu template > edit html

• 5. Copy & Paste Kode CSS Label Cloud berikut ini di atas kode ]]></b:skin> atau </style>

Silahkan copy paste script dibawah ini

.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:#E73037; 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:hover { background:#333333; } .label-count { white-space:nowrap; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; } .label-size { line-height:1.2 }

• 6. klik simpan, dan sekarang coba refresh halaman blog kalian untuk melihat perubahannya.

Share :

Tweet

More

Related Post