Cara Memperkeren Label di Blog Dengan CSS - EnterBlogger.Com - Solusi Lengkap Download dan Informasi™‎

Cara Memperkeren Label di Blog Dengan CSS
Ditulis Oleh
Enter Blogger

Cara Memperkeren Label di Blog Dengan CSS



Cara Memperkeren Label di Blog Dengan CSS - Pembuatan Label di Blog Memang Sangat mudah, Sobat hanya cukup pergi ke Tata Letak, dan Tambahkan Label. Namun, Banyak orang yang Bosan Dengan Tampilan Label bawaan Blogger, sehingga admin mencoba buat artikelnya untuk mempercantik label di blog.

Jika sobat ingin mencobanya, mari simak tata caranya ya hehe..

Cara Memperkeren Label di Blog Dengan CSS

1. Login ke Blogger
2. Masuk ke Tema > Edit HTML
3. Letakkan Kode Dibawah ini Tepat diatas Kode ]]></b:skin> Atau </style>

/* Label Dark Warna-Warni enterblogger.com */
.widget-content.cloud-label-widget-content {
    width: 100%;
    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;
    margin: 10px 10px 5px
}

.label-count {
    white-space: nowrap;
    display: inline-block
}

.Label li {
    background: 0 0;
    float: left;
    padding: 5px;
    margin: 0;
    text-align: left;
    width: 45%;
    transition: all .3s ease-out
}
#sidebar-wrapper .Label li {
    position: relative;
    background: #2a2a2a;
    color: #fff;
    padding: 0;
    margin: 5px;
    text-align: left;
    width: 97%;
    transition: all .8s ease-out;
    text-transform: none;
    border: 1px solid #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, .4)
}

#sidebar-wrapper .Label li:hover {
    color: #fff;
    transition: all 0 ease-out
}

#sidebar-wrapper .Label li:before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    background: #4fafe9;
    transition: all .8s ease-in-out
}

#sidebar-wrapper .Label li:hover:before {
    width: 100%;
    transition: all 0 ease-out
}

#sidebar-wrapper .Label li a {
    padding: 0 0 0 10px;
    display: block;
    position: relative;
    line-height: 35px;
    color: #fff;
    text-decoration: none;
    transition: all .8s ease-out
}

#sidebar-wrapper .Label li a:before {
    font-family: fontawesome;
    content: "\f07c";
    padding-right: 10px!important
}

#sidebar-wrapper .Label li a:hover {
    color: #fff;
    transition: all 0 ease-out
}

#sidebar-wrapper .Label li span {
    float: right;
    height: 100%;
    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(10) span,
#sidebar-wrapper .Label li:nth-child(10):before,
#sidebar-wrapper .Label li:nth-child(4) span,
#sidebar-wrapper .Label li:nth-child(4):before {
    background: #f4b23f
}

#sidebar-wrapper .Label li:nth-child(11) span,
#sidebar-wrapper .Label li:nth-child(11):before,
#sidebar-wrapper .Label li:nth-child(5) span,
#sidebar-wrapper .Label li:nth-child(5):before {
    background: #46c49c
}

#sidebar-wrapper .Label li:nth-child(12) span,
#sidebar-wrapper .Label li:nth-child(12):before,
#sidebar-wrapper .Label li:nth-child(6) span,
#sidebar-wrapper .Label li:nth-child(6):before {
    background: #607ec7
}

#sidebar-wrapper .label-size {
    position: relative;
    display: block;
    float: left;
    margin: 0 4px 4px 0;
    font-size: 13px;
    transition: all .3s
}

#sidebar-wrapper .label-size a {
    background: #fff;
    display: inline-block;
    color: #666;
    padding: 5px 8px;
    font-weight: 400;
    border: 1px solid #ccc;
    transition: all .3s
}

#sidebar-wrapper .label-count {
    backface-visibility: hidden;
    opacity: 0;
    visibility: hidden;
    font-size: 85%;
    display: inline-block;
    position: absolute;
    top: -5px;
    right: -10px!important;
    background: #4fafe9;
    color: #fff;
    white-space: nowrap;
    padding: 0;
    width: 25px;
    height: 22px;
    line-height: 22px;
    border-radius: 4px;
    text-align: center;
    z-index: 1;
    transition: all .3s
}

#sidebar-wrapper .label-size:hover .label-count {
    opacity: 1;
    visibility: visible;
    right: -15px!important
}

#sidebar-wrapper .label-size a:hover {
    color: #666;
    border-color: #4fafe9
}
/* Label Dark Warna-Warni enterblogger.com */
SIMPAN TEMA
Selamat, Label di Blog Sobat sudah menjadi keren. Semoga bisa bermanfaat:)



Emoticon

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2014-2018 Enter Blogger - Solusi Lengkap Download dan Informasi - All Rights Reserved