Membuat List Label Blog Keren dengan Warna-Warni

Membuat List Label Blog Keren dengan Warna-Warni - Label sangatlah penting dalam sebuah blog dikarenakan label adalah sebuah daftar terkumpulnya semua postingan yang berkelompok dalam kategori-kategori tertentu. contoh Label Artikel Kesehatan maka akan membahas semua tentang kesehatan, Label Artikel Komputer maka akan membahas semua tentang komputer.

Jika sudah mengerti maka kita akan lanjutkan cara membuat daftar label di blog. 

Cara Membuat Label Di Blog

Nah cara membuat label dalam blog adalah dengan cara memberi label disetiap postingan kita seperti gambar dibawah ini :

Berilah label dalam setiap postingan mu tergantung dari kategori apa postinganmu itu.

Setelah itu kalian untuk menampilkan di blog kalian daftar labelnya, kalian perlu widget label dengan cara seperti ini. 

Tambahkan widgetnya dan lihat apakah sudah ada list label kalian. Lihat juga : 20 Popular Post Keren Untuk Blogger

Cara Membuat Label Warna-Warni

Sekarang kita akan masuk ke pembahasan kita mengenai label warna-warni.

Sebelum kita masuk ke tutorialnya ada baiknya kalian lihat dulu DEMO nya.

Caranya cukup mudah kalian tinggal masuk ke Blogger>Tema>Edit HTML Terus Copy code dibawah ini dan kalian tinggal paste diatas code ]]></b:skin>

/* Label Dark Warna-Warni sirclob.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 sirclob.com */

Nah setelah kalian letakkan code diatas kalian save dan lihat hasilnya. Jika ada masalah mengenai ini bisa komentar dibawah dan semoga bermanfaat.

Lihat juga artikel menarik lainnya :