-->

Ad Unit (Iklan) BIG

7 (Tujuh) Pilihan Style Widget Label Menarik Pada Blog

Post a Comment

7 (Tujuh) Pilihan Style Widget Label Menarik Pada Blog

Salah satu cara untuk menarik pengunjung supaya betah berlama - lama di blog kita adalah dengan membuat tampilan blog kita menjadi menarik. Ada banyak cara yang bisa di lakukan untuk mempercantik tampilan blog, salah satunya adalah dengan menambahkan beberap widget tambahan pada layout atau tata letak blog.

Namun satu yang harus selalu di ingat bahwa kita jangan hanya fokus untuk membeanhi tampilan blog sehingga melupakan tugas utama sebagai seorang blogger yakni membuat dan menulis artikel yang baik dan berkualitas agar blog kita semakin berkembang dan di sukai oleh banyak orang. Tampilan blog bisa kita lakukan sambil berjalan saja.

Salah satu widget yang bisa kita buat supaya menjadi lebih menarik adalah widget label atau kategori. Dan berikut ini adalah 7 (Tujuh) Pilihan Style Widget Label Menarik Pada Blog, yang bisa Anda pilih untuk di terapkan pada blog Anda.

Untuk itu Anda hanya perlu menerapkan beberapa kode CSS di bawah ini untuk memodifikasi tampilan widget label Anda agar menjadi lebih menarik.

Berikut adalah langkah - langkahnya :
  • Login ke dashboard Blog Anda.
  • Pilih menu "Tema" kemudian klik "Edit Tema".
  • Kemudian cari kode </b:skin> atau </style> (Supaya mudah gunakan shortcut tombol Ctrl+F pada keybord).
  • Kemudian copy dan pastekan salah satu kode CSS berikut ini di atas kode  </b:skin> atau </style>
  • Kemudian Save

1. Pilihan 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; }

Maka Hasilnya akan tampak seperti gambar di bawah ini.

7 (Tujuh) Pilihan Style Widget Label Menarik Pada Blog


2. Pilihan 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:&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;}

Maka Hasilnya akan tampak seperti gambar di bawah ini.

7 (Tujuh) Pilihan Style Widget Label Menarik Pada Blog

3. Pilihan 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;}

Hasilnya akan tampak seperti gambar di bawah ini.

7 (Tujuh) Pilihan Style Widget Label Menarik Pada Blog


3. Pilihan 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;}

Hasilnya akan tampak seperti gambar di bawah ini.

7 (Tujuh) Pilihan Style Widget Label Menarik Pada Blog


5. Pilihan 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; }

Hasilnya akan tampak seperti gambar di bawah ini.

7 (Tujuh) Pilihan Style Widget Label Menarik Pada Blog


6. Pilihan 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}

Hasilnya akan tampak seperti gambar di bawah ini.


7 (Tujuh) Pilihan Style Widget Label Menarik Pada Blog


7. Pilihan 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;}

Hasilnya akan tampak seperti gambar di bawah ini.

7 (Tujuh) Pilihan Style Widget Label Menarik Pada Blog


Itulah beberapa kode CSS untuk mempercatik tampilan widget label di blog Anda. Anda bisa memilih salah satu yang kira - kira cocok dengan template dan selera Anda.


referensi :
zonainternetku.blogspot.com
www.lk21.news

Related Posts

Post a Comment

Subscribe To Our Newsletter