How do I change the look of the Widget for labels

Good evening,
Today I want to put a special theme on the table, configuring the Widget for labels.
Over the years that I am in the field of Blogging, I have seen thousands of Widget for labels and I have been informed of the existence of others so. I had never seen yet a Widget that is so easy to install and displays all the labels in a different color.
I find this widget quite beautiful, with imposing and original Design and I believe that in relation to the almost unnoticed widget that gives you Blogger, it will also help you to have a more beautiful presence of the Blog but also the visitor who will navigate better.
Follow the steps below to install:

tags effect widget
Multicolor Widget

1) Login to Blogger
2) Layout "Add Gadget" tags
3) We select the checkboxes so that our Gadget is as in the photo.
]]></b:skin>

4) We go template
5) HTML Editing
6) In the codes now, with the help of CTRL + F We are looking for it:
7) Just above we add the following code:



/*-------------------------------------

Sidebar Label Cloud By OpenFile

--------------------------------------- */

.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}

.sidebar .label-size a {

color:#fff!important;

background:#222;

padding:8px 22px;

margin:0 3px 3px 0;

float:left;

display:block;

-moz-transition: all 0.2s ease-out;

-o-transition: all 0.2s ease-out;

-webkit-transition: all 0.2s ease-out;

-ms-transition: all 0.2s ease-out;

transition: all 0.2s ease-out;

}

.sidebar .label-size-1 a {background:#FF8000}

.sidebar .label-size-2 a {background:#F6FF03}

.sidebar .label-size-3 a {background:#FB2903}

.sidebar .label-size-4 a {background:#298A08}

.sidebar .label-size-5 a {background:#084B8A}

.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {

background:#2288bb; color:#fff; text-decoration:none}

.sidebar .label-size span {

background:#2288bb;

color:#fff;

padding:8px 22px;

margin:0 0 3px;

clear:both;

float:left;

}

.sidebar .label-size {

position:relative;

text-transform: uppercase;

text-decoration:none;

font-size:16px;

font-family:'Oswald', sans-serif;

color:#fff;

}.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;}

8) Storage and end

Comments