How to add stylish LABELS by CSS to blogger.com?

How to add stylish clickable LABELS by CSS to blogger.com?

To add a stylish Cloud Label Widget to your Blogger blog, you can use CSS to customize the appearance of the labels as Blogger coding tips clickable labels appear 

How to add stylish LABELS by CSS to blogger

Here's a basic example steps of how you can do this:

Log in to your Blogger dashboard.

Go to the Theme section.

Click on "Customize".

In the template, search for the ]]></b:skin> tag, and just above it paste the following Code.

/* ######## Cloud Label Widget By https://bloggercodingtips.blogspot.com ######################### */ .cloud-label-widget-content { text-align: left } .cloud-label-widget-content .label-count { background: #2b2b2b; color: #fff!important; margin-left: -3px; padding-right: 3px; white-space: nowrap; border-radius: 2px; padding: 1px 4px !important; font-size: 12px !important; margin-right: 5px; } .cloud-label-widget-content .label-size { background: #ebebeb; display: block; float: left; font-size: 11px; margin: 0 5px 5px 0 } .cloud-label-widget-content .label-size a, .cloud-label-widget-content .label-size span { height: 18px !important; color: #2b2b2b; display: inline-block; font-size: 12px; font-weight: 500!important; padding: 6px 8px } .cloud-label-widget-content .label-size a { padding: 6px 10px } .cloud-label-widget-content .label-size a:hover { color: #000!important } .cloud-label-widget-content .label-size, .cloud-label-widget-content .label-count { height: 30px!important; line-height: 19px!important; border-radius: 2px } .cloud-label-widget-content .label-size:hover { background: #2b2b2b; color: #fff!important } .cloud-label-widget-content .label-size:hover a { color: #fff!important } .cloud-label-widget-content .label-size:hover span { background: #ebebeb; color: #2b2b2b!important; cursor: pointer } .cloud-label-widget-content .label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5 { font-size: 100%; opacity: 10 }