Cara Membuat Label Blog Berwarna,Keren Dan Menarik 2019

Pada tahun 2019 kali ini saya akan memberikan sedikit cara sekaligus tutorial bagaimana membuat label blog berwarna. Di suatu blog tentu memiliki label blog versi masing - masing, dan tentu dari setiap blog memiliki label blog berbeda - beda, mulai dari label blog berwarna sampai label blog terkeren. Pada kesempatan kali ini saya akan membagikan tutorial cara membuat label blog berwarna, keren, dan menarik 2019.

Sebelum saya memberikan tutorial membuat label blog berwarna, keren, dan menarik. Sobat harus sudah memiliki blog dan mengetahui apa itu label blog agar nanti di tutorial yang saya kasih tidak bingung untuk mempraktekannya.

Langsung saja ke tutorial cara membuat label blog berwarna

Membuat Label Blog Berwarna 2019

• Login dahulu ke Blogger  
• Setelah masuk kedalam blog. Lalu pilihlah menu Template dan Edit HTML Lalu cari Kode /head
• Setelah ketemu masukkan CSS label blog berwarna diatasnya
Kode Pembungkus CSS

<style type='text/css'>
/* 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;}
</style>

• Setelah memasukkan CSS label blog berwarna ke bagian atas kode </head> . Langkah berikutnya save template. Mari kita menuju tata letak blog sobat dan cari label. 
• Untuk cara menampilkan label berwarnanya cukuplah mudah, tinggal kalian atur seperti gambar dibawah ini

• Simpan dan lihat hasilnya di label blog sobat semua. Label blog akan berwarna.

Bagaimana sudah paham belum dengan tutorial diatas. Atau masih bingung dengan tutorialnya? kalau masih bingung dengan tutorial di atas bisa langsung komen di bawah ya sob. Sekian tutorial Cara Membuat Label Blog Berwarna,Keren Dan Menarik 2019 semoga bermanfaat ya sob.