Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogspot / Widget

20 Cara Menciptakan Widget Label Keren Di Blog

Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog
Widget yaitu salah satu komponen utama dalam hal mempercantik tampilan blog Anda. Ada beberapa widget yang biasanya dipasang di blog kesayangannya masing-masing, salah satunya yaitu widget Label. Label sendiri dalam blog mempunyai tugas  yang terbilang penting dalam mengelompokkan beberapa artikel menurut kategori yang sama, dan mempermudah pengunjung blog untuk melihat artikel lainnya menurut Label/Kategory.  Jadi bisa dikatakan widget kategori itu merupakan sebuah penggambaran secara garis besar terhadap seluruh konten blog Anda. Misal kita menciptakan suatu blog bertemakan Anime, kemudian kita menciptakan beberapa postingan perihal anime entah itu berupa video, ataupun sinopsis. Namun kita tidak mengelompokkan anime tersebut menurut genre / jenisnya. Maka hal  yang akan terjadi ialah konten kita akan terlihat awut-awutan dan terkesan tidak rapi apabila di lihat pengunjung. Nah untuk menghindari hal itu terjadi maka kita disarankan untuk memakai label di setiap artikel kita. Agar kesudahannya optimal, biasanya penempatan navigasi Label ini di bab sidebar atau terkadang diarea footer, dimana ini menjadi langkah yang cukup efektif untuk menarik perhatian pengunjung biar mengklik label tersebut. Nah apalagi jikalau label Anda mempunyai tampilan yang keren dan menarik, jadi tidak heran apabila nanti nya pengunjung sering mengekliknya. Nah kali ini aku akan membagikan beberapa widget Label/ketegori yang keren untuk di pasang pada blog Anda dengan bentuk yang responsive, seo friendly, dan valid html5 & CSS3. Menariknya lagi pemasangannya tidak terlalu sulit amat. Simak aja pemasangannya dibawah ini.
Cara Memasang Kode CSS Label di Blog
1. Pertama silahkan Anda login dulu ke Blogger
2. Selanjutnya silahkan pilih Menu Tema → Template → Edit HTML
6. Lalu cari kode ]]></b:skin> atau </style>
7. Kemudian Copy beberapa instruksi style CSS untuk lebel dibawah ini, lalu Paste diatas atau sebelum kode ]]></b:skin> atau </style> 

Nah Berikut ini beberapa style widget label yang dapat Anda pilih sesuka hati untuk dipasang di blog Anda. 

8. Dan Jangan lupa, jika kode sudah terpasang di templatenya, silahkan Anda  Simpan atau Save Templatenya.

Style 1
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 /* Label */ .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; }

Style 2
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 /* CSS label */ #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:&quot;\f105&quot;;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:&quot;\f02b&quot;;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:&quot;\f02b&quot;;font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}

Style 3

 .cloud-label-widget-content { text-align: left; } .label-size { background: #5498C9; display: block; float: left; margin: 0 3px 3px 0; color: #fff; font-family: &#39;Open Sans&#39;,&quot;Segoe UI&quot;,Arial,Tahoma,sans-serif; font-size: 11px; text-transform: uppercase; } .label-size:nth-child(1) { background: #F53477; } .label-size:nth-child(2) { background: #89C237; } .label-size:nth-child(3) { background: #44CCF2; } .label-size:nth-child(4) { background: #01ACE2; } .label-size:nth-child(5) { background: #94368E; } .label-size:nth-child(6) { background: #A51A5D; } .label-size:nth-child(7) { background: #555; } .label-size:nth-child(8) { background: #f2a261; } .label-size:nth-child(9) { background: #00ff80; } .label-size:nth-child(10) { background: #b8870b; } .label-size:nth-child(11) { background: #99cc33; } .label-size:nth-child(12) { background: #ffff00; } .label-size:nth-child(13) { background: #40dece; } .label-size:nth-child(14) { background: #ff6347; } .label-size:nth-child(15) { background: #f0e68d; } .label-size:nth-child(16) { background: #7fffd2; } .label-size:nth-child(17) { background: #7a68ed; } .label-size:nth-child(18) { background: #ff1491; } .label-size:nth-child(19) { background: #698c23; } .label-size:nth-child(20) { background: #00ff00; } .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: #ff6bb5; }

Style 4
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 /* CSS label */ .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;}

Style 5
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 .label-size{    display: inline-block;    padding: 0px 10px;    height: 29px;    line-height:29px;    border-radius: 5px;    font-weight:bold;    font-size:12px;    text-decoration:none; }  .label-size{   border: 1px solid #769e42;   box-shadow: inset 0 1px 0 #c5e59c ;   background-color: #9ed35a;   text-shadow: 0px 1px 1px #6ea23b;   color: #fff;   background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%); }  .label-size:hover{   background-color: #b7fa66;   background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);   background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);   background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);   background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);   background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%); }  .label-size:active{   background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%); }  .label-size{   display:inline-block;   border-radius: 5px 0 0 5px;   border-right-width:0;   position:relative;   z-index:5;   margin-right: 20px;   margin-bottom: 10px; }  .label-size:after{   content: " ";   width: 22px;   height: 22px;   line-height: 18px;   font-size:25px;   border-top: 1px solid #769e42;   border-right: 1px solid #769e42;   box-shadow: inset 0 1px 0 #c5e59c ;   background-color: #9ed35a;   text-shadow: 0px 1px 1px #7eac46;   border-radius: 3px 7px 3px 0;   color: #fff;   background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   position:absolute;   top: 3px;   right: -12px;   z-index:-3;   -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */        -moz-transform: rotate(45deg);  /* FF3.5+ */         -ms-transform: rotate(45deg);  /* IE9 */          -o-transform: rotate(45deg);  /* Opera 10.5 */             transform: rotate(45deg);                filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */                        M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');                  zoom: 1; }  .label-size:hover:after{   background-color: #b7fa66;   background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);   background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);   background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);   background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);   background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%); }  .label-size:active:after{   background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);   background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%); }  .label-size:before{   content: " ";   height:5px;   width:5px;   display:block;   position:absolute;   right:-3px;   top:11px;   background-color: #fcfdf5;   border: 1px solid #83ab52;   border-radius:5px;   box-shadow: 0 1px 0 #b2ddd83; }  .label-size span{   padding:2px 5px;   border: 1px solid #9e5c26;   border-radius: 5px;   box-shadow: inset 0 1px 0 #f5bf8c;   background-color: #ed943f;   text-shadow: 0px 1px 1px #000;   margin-left: 10px;   background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);   background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);   background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);   background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);   background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%); }  #Label1 {height:210px !important;}.

Style 6
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 /* Labels */ .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{border:5px dashed #000000;border-bottom-right-radius:30px;border-top-left-radius:30px;background:#FA0830;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{border:5px dashed #FA0830;background:#000000} .label-count{white-space:nowrap;border-bottom-right-radius:30px;border-top-left-radius:30px;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}

Style 7
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 /* Labels */ .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{border:8px inset #0572F8;background:#0572F8;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:#000000} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}

Style 8
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 /* Labels */ .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;}

Style 9
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog
 /* CSS cloud label */ .cloud-label-widget-content {margin:15px 0 0;position:relative} .label-size{background:#46506f;position:relative;margin:0 4px 3px 0;padding:0;font-size:12px;transition:all 0.3s;display:inline-block;text-transform:uppercase;height:28px;color:#fff;border-radius:2px;overflow:hidden} .label-size a{color:inherit;text-decoration:none;font-weight:normal;padding:0 12px;margin:0;height:28px;line-height:28px;} .label-count{font-size:10px;display:inline-block;background:#2d3759;color:#fff !important;transition:all 0.3s;white-space:nowrap;padding:0 5px;height:28px;line-height:27px;} .label-size:hover{background:#333} .label-size:hover .label-count{background:#222} /* CSS list label */ .list-label-widget-content ul {padding:0 !important;margin:15px 2px 0!important;list-style:none !important;position:relative} .list-label-widget-content li{position:relative;width:49%;display:inline-block} .list-label-widget-content li a{color:#46506f;background:#fff;padding:5px;padding-left:10px;font-size:14px;border-radius:3px;border:1px solid #ddd;box-shadow:4px 0 0 #ddd inset;display:inline-block;margin-bottom:10px;} .list-label-widget-content li a:hover{border-bottom:none;border:1px solid #C3C3C3;color:#2d3759} .list-label-widget-content li span{font-size:11px;background:#eee;padding:5px;border-radius:2px} .list-label-widget-content li:hover span{background:#46506f;color:#fff}

Style 10
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 /*CSS Label*/  .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; }

Style 11
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 /*CSS Label*/  .label-size { display:inline-block; margin: 0 4px 4px 0; padding:7px; font:13px verdana; float:left; background: #FF0000; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .label-size:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; right: 0; background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .label-size:hover:before, .label-size:focus:before, .label-size:active:before { width: 16px; height: 16px; } .label-size a {color: #fff; text-decoration:none;}

Style 12
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 /*CSS Label*/  .label-size{display:block;float:left;background:#555!important;margin:0 1px 1px 0;color:#eee;font-size:100%}.label-size a:hover,.label-size span:hover,.label-size:hover{background:#3384ff}.label-size a,.label-size span{display:inline-block;color:#fff;padding:4px 4px}

Style 13
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 /*CSS Label*/  .Label a{ padding-left:20px; background:#FFA500; padding:0 20px; color:#000!important; border-radius:100px; -moz-border-radius:100px; height:17px; line-height:17px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000!important; background:#fff; }

Style 14
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

/* Label kelap-kelip */  .Label a{margin:0 11px 6px 0;padding:5px 5px 0 5px;background:#222;-moz-box-shadow:0 0 5px #000;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;opacity:.5;text-transform:uppercase;border-radius:5px;float:left;text-decoration:none;height:24px;line-height:24px;color:rgba(0,0,0,.6);text-shadow:2px 2px 3px rgba(255,255,255,.1);font:14px 'Arial black';letter-spacing:3px;-moz-animation-name:seociyusdisko;-moz-animation-duration:2s;-moz-animation-timing-function:linear;-moz-animation-delay:.5s;-moz-animation-iteration-count:infinite;-moz-animation-direction:alternate;-moz-animation-play-state:running;-webkit-animation-name:seociyusdisko;-webkit-animation-duration:2s;-webkit-animation-timing-function:linear;-webkit-animation-delay:.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;-webkit-animation-play-state:running;-o-animation-name:seociyusdisko;-o-animation-duration:2s;-o-animation-timing-function:linear;-o-animation-delay:.5s;-o-animation-iteration-count:infinite;-o-animation-direction:alternate;-o-animation-play-state:running}@keyframes seociyusdisko{0%{background:red}25%{background:#ff0}50%{background:#00f}100%{background:green}}@-moz-keyframes seociyusdisko{0%{background:red}25%{background:#ff0}50%{background:#00f}100%{background:green}}.Label a:hover{position:relative;animation:seociyushover .5s infinite;-moz-animation:seociyushover .5s infinite;-webkit-animation:seociyushover .5s infinite;-o-animation:seociyushover .5s infinite}@keyframes seociyushover{from{left:0}to{left:10px}}@-moz-keyframes seociyushover{from{left:0}to{left:10px}}@-webkit-keyframes seociyushover{from{left:0}to{left:10px}}@-o-keyframes seociyushover{from{left:0}to{left:10px}}

Style 15
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 /*CSS Label*/ .Label a{ padding-left:20px; background:#00FFFF; padding:0 20px; color:#000!important; border-radius:100px; -moz-border-radius:100px; height:17px; line-height:17px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important; background:#fff; }

Style 16
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 
 /*CSS Label*/ .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{border-radius:30px;background:#FA0830;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{border-radius:30px;background:#333333} .label-count{white-space:nowrap;border-radius:30px;padding-right:3px;margin-left:-3px;background:#333333;color:#fff!important} .label-size{line-height:1.2}

Style 17
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 
 /*CSS Label*/ .label-size{margin:0 2px 6px 0;padding:3px;text-transform:uppercase;border:solid 1px #adff2f;border-radius:3px;float:left;text-decoration:none;font-size:10px;color:#666}.label-size:hover{border:1px solid #6bb5ff;text-decoration:none;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);zoom:1}.label-size a{text-transform:uppercase;float:left;text-decoration:none}.label-size a:hover{text-decoration:none}

Style 18
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 
 /* Label */ .label-size{margin:0 2px 6px 0;padding:3px;text-transform:uppercase;border:solid 1px #c6c6c6;border-radius:3px;float:left;text-decoration:none;font-size:10px;color:#666;display:inline-block;float:none;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-style:normal;font-weight:700;text-decoration:none;background-color:#1ba1e2;color:#fff!important;-webkit-text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;-moz-text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;-o-text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;-webkit-box-shadow:0 0 1px #999;-moz-box-shadow:0 0 1px #999;-o-box-shadow:0 0 1px #999;box-shadow:0 0 1px #999;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:-webkit-transform .1s ease-in;-moz-transition:-moz-transform .1s ease-in;-o-transition:-o-transform .1s ease-in;transition:transform .1s ease-in}.label-size:hover{color:#fff;background-color:#0c92da;-webkit-box-shadow:0 0 20px #000032;-moz-box-shadow:0 0 20px #000032;-o-box-shadow:0 0 20px #000032;box-shadow:0 0 10px #000032;-webkit-transform:rotate(3deg) scale(1.2);-moz-transform:rotate(3deg) scale(1.2);-o-transform:rotate(3deg) scale(1.2);transform:rotate(3deg) scale(1.2);zoom:1}.label-size a{display:inline-block;float:none;margin:2px 1px;padding:6px 3px;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-style:normal;font-weight:700;text-decoration:none;background-color:#252c44;color:#fff!important;-webkit-text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;-moz-text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;-o-text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;-webkit-box-shadow:0 0 1px #999;-moz-box-shadow:0 0 1px #999;-o-box-shadow:0 0 1px #999;box-shadow:0 0 1px #999;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:-webkit-transform .1s ease-in;-moz-transition:-moz-transform .1s ease-in;-o-transition:-o-transform .1s ease-in;transition:transform .1s ease-in;background-color:#252c44;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);background-color:#252c44;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);background-color:#252c44;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}

Style 19
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 
 /* Label */ .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}

Style 20
Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

 Khusus Label yang ini silahkan setting widgetnya, pada opsi widget wajib menentukan Daftar  dan jangan lupa centang tampilkan jumlah postingan perlabel.

 /*CSS Label*/ #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;}

Cara Membuat widget Label di Blog
1.  Selanjutnya silahkan Anda pergi ke sajian "Tata Letak atau Layout" kemudian pilih Tambahkan Gadget → Label, kemudian pasang di mana saja yang Anda suka.
2. Nanti akan muncul pop-up browser, yakni Konfigurasikan Label
3. Nah sehabis itu setting dengan mengisi Judul, pilih label yang ingin ditampilkan, menyortir terserah pilih mana saja, kemudian pada opsi tampilkan wajib pilih Cloud, dan terakhir Simpan. Kurang lebih aturlah menyerupai gambar dibawah ini.

Cara Membuat Label Kategori Keren di Blog 20 Cara Membuat Widget Label Keren di Blog

4.  Kemudian jangan lupa untuk mengecek widget labelnya

Nah itulah beberapa style widget label yang keren abis untuk dipasang pada blog kesayangan Anda, yang mana mereka semua mempunyai tampilan yang menarik dengan aneka macam effek warna-warni yang mengugah selera. Sekian dulu dari artikel kali ini, jikalau ada yang ingin Anda tanyakan atau tidak mengerti silahkan komentar dibawah ini terima kasih.

Anda mungkin menyukai postingan ini :