Trik Membuat Widget Label Blog Menjadi Keren

Trik Membuat Widget Label Blog Menjadi Keren. Widget Label merupakan sebuah widget yang berguna untuk membedakan postingan yang ada dalam blog tersebut berdasarkan dengan kategori yang sudah di tentukan oleh penerbit konten (publisher). Widget Label juga menjadi salah satu widget yang sangat penting juga dalam sebuah blog, karena dengan menambahkan widget ini berarti para pengunjung blog lebih mudah untuk memilih konten atau postingan sesuai label dan kriteria yang akan mereka cari.
Jadi dengan menambahkan fitur penanda berdasarkan label bisa menjadi nilai tambah untuk memuaskan pengunjung dalam menjelajah blog kita.

Cara Menambahkan Widget Label Di Blog

1. Masuk ke dalam blog kalian dan klik "Tata Letak"
2. Kemudian klik "Tambahkan Gadget" dan pilih "Label"
3. Silahkan atur dengan memilih opsi pada widget Label tersebut sesuai dengan selera anda
4. Jika sudah klik "Simpan" dan klik juga "Simpan Perubahan"

Baca juga :
Cara Membuat Related Post Untuk Blogspot
Cara Mengubah Widget Popular Post Menjadi Keren
Trik Memodifikasi Widget Arsip Supaya Keren

Cara Memodifikasi Tampilan Widget Label Agar Terlihat Menarik

Untuk membuat para pengunjung lebih senang dan mudah dalam menggunakan widget Label, maka kalian bisa memodifikasinya supaya bisa lebih menarik perhatian pengunjung blog.
Dan saya sudah menyiapkan beberapa kode CSS di bawah ini untuk memodifikasi tampilan widget label kalian menjadi lebih keren
1. Pastikan kalian sudah masuk ke dalam blog kalian
2. Pilih menu "Tema" dan klik "Edit Tema"
3. Selanjutnya cari kode </b:skin> atau </style>
4. Silahkan masukkan salah satu kode berikut ini di atas kode tadi (kode nomor 3)

Widget Label Style 1

 /* Label 1*/
.label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5 {
font-size: 100%;
opacity: 10;
}
.cloud-label-widget-content {text-align: left}
.label-size {
background-color: #56b8e2;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #ffffff;
font-size: 11px;
text-transform: uppercase;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.label-size a, .label-size span {
display: inline-block;
color: #ffffff!important;
padding: 6px 8px;
font-weight: bold;
}
.label-size:hover {background-color: #333333}
.label-size:hover .label-count {background-color: #56b8e2}
.label-size:hover .label-count:before {border-right: 6px solid #56b8e2}
.label-count {
position: relative;
white-space: nowrap;
padding-right: 3px;
margin-left: -2.5px;
background-color: #333333;
}
.label-count:before {
content: "";
width: 0;
height: 0;
border: 0 solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-right: 6px solid #333333;
position: absolute;
top: 8px;
left: -6px;
}

Widget Label Style 2

 /* CSS label 2 */
#sidebar-wrapper .Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #f1f1f1;transition:all .3s ease-out;}
#sidebar-wrapper .Label li:hover {background:#fff;color:#ef4824;}
#sidebar-wrapper .Label li:before {content:"\f105";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;
color:#666;transition:all .3s ease-out;}
#sidebar-wrapper .Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#ef4824;}
#sidebar-wrapper .Label li a {color:#666;font-size:95%;transition:all .3s ease-out;}
#sidebar-wrapper .Label li a:hover {color:#ef4824;}
#sidebar-wrapper .Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-size:12px;transition:initial;border-radius:2px;}
#sidebar-wrapper .Label li span:hover{background-color:#ef4824;color:#fff}
#sidebar-wrapper .label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-size:13px;border:1px solid #e6e6e6;transition:all 0.3s;}
#sidebar-wrapper .label-size:hover{background:#ef4824;border-color:#b69c6c;}
#sidebar-wrapper .label-size a {display:inline-block;color:#444;padding:8px 10px;
font-weight:400;}
#sidebar-wrapper .label-size a:hover {color:#fff;}
#sidebar-wrapper .label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#444;transition:initial;}
#sidebar-wrapper .label-size a:hover:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}

Widget Label Style 3

 

 /* CSS label 3*/
.label-size{ margin:0; padding:0; position:relative; }  .label-size a ,  .label-size span{ float:left; height:24px; line-height:24px; position:relative;font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px;  border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px;  border-top-right-radius:4px;  } .label-size a:before ,  .label-size span::before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent;border-style:solid; border-width:12px 12px 12px 0;   } .label-size a:after ,  .label-size span::after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px;height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; }  .label-size a:hover ,  .label-size span::hover { background:#555;} .label-size a:hover:before ,  .label-size span::hover::before{border-color:transparent #555 transparent transparent;}

Widget Label Style 4

/* Labels 4*/
.widget-content.list-label-widget-content {padding:0;}
.widget-content.cloud-label-widget-content {display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;}
.label-count {background:#fff;white-space:nowrap;display:inline-block;padding:5px 7px;margin-right:3px;border:1px solid #FF9934;border-radius:4px;}
.label-count:hover {background:#fafafa;color:#222;border-radius:4px}
.Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #eee;transition:all .3s ease-out;}
.Label li:hover {background:#fff;color:#FF9934;}
.Label li:before {content:"\f105";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;
color:#666;transition:all .3s ease-out;}
.Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#29abe2;}
.Label li a {color:#666;transition:all .3s ease-out;}
.Label li a:hover {color:#FF9934;}
.Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:12px;transition:initial;border-radius:2px;}
.Label li span:hover{background-color:#FF9934;color:#fff}
.label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;border:1px solid #FF9934;transition:all 0.3s;border-radius:5px;}
.label-size:hover{background:#FF9934;border-color:#FF9934;}
.label-size a {display:inline-block;color:#444;padding:8px 10px;
font-weight:400;}
.label-size a:hover {color:#fff;}
.label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#444;transition:initial;}
.label-size a:hover:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.Label li:hover {color:#29abe2;}
.Label li a {color:#aaa;transition:all .3s ease-out;}
.Label li a:hover {color:#29abe2;}
.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:13px;font-weight:400;border-radius:2px;}
.Label li span:hover{color:#29abe2}
.label-size{background:#fff;color:#fff;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;transition:all 0.4s;}
.label-size a {display:inline-block;color:#fff;padding:8px 10px;
font-weight:400;transition:initial;}
.label-size a:hover {background:#29abe2;color:#fff;transition:all 0.2s;}
label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#fff;transition:initial;}
.label-size a:hover:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
.label-size:hover, #footer-wrapper-inner .label-size:hover{background:#29abe2;color:#fff;transition:initial;}
.label-count {background:#333;}

Widget Label Style 5

 /*CSS Label 5*
.Label a{ padding-left: 5px; padding-right: 31.5px; color: #fff; height: 32px; background: #359bed; margin-right: 2px; line-height: 32px; text-decoration: none; -webkit-transition: all .3s ease-in-out !important; float: left; margin-top: 2px; font-size: 13px; text-align: left; display: inline-block; border: 1px solid transparent; border-radius: 3px; } .Label a:hover{ background:none; border: 1px solid #545454; border-radius:3px; color:#222; } .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; }

Widget Label Style 6

 /* Label 6*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:10}.cloud-label-widget-content{text-align:left}.label-size{background:#0dd7b4;display:block;float:left;margin:0 3px 3px 0;color:#fff;font-size:11px;text-transform:uppercase}.label-size a,.label-size span{display:inline-block;color:#fff!important;padding:6px 8px;font-weight:700}.label-size:hover{background:#333}.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333;color:#fff!important}.label-size{line-height:1.2}

Widget Label Style 7

 /*CSS Label 7*/
#sidebar-wrapper .Label li{position:relative;background:#fff;border-bottom: 1px solid #bbb;color:#444;padding:0;margin:0;text-align:left;width:100%;font-size:90%;transition:all .3s ease-out}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s}
#sidebar-wrapper .label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}
#sidebar-wrapper .label-size a:hover{color:#444;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);background-position:0 0}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;border-radius:2px;}

5. Setelah memilih dan meletakkan salah satu kode css widget label tersebut maka klik "Simpan Tema" dan cobalah cek perubahannya

Itulah tutorial sekilas tentang Trik Membuat Widget Label Menjadi Keren yang dapat saya sampaikan, selamat mencoba.

terima kasih untuk
Sumber :
13 September 2018 https://www.lk21.news/2018/02/20-cara-membuat-widget-label-keren-di.html

Share this post