Add interesting List Label and Cloud Label Widget to the blog!

There is a widget with plenty of work in the blogger blog called Label. Using it, all the pages of a blog can be presented in front of the reader. This allows the reader to easily read his favorite label's posts. By default, this widget does not seem to be as attractive as it seems, so many do not want to use it. However, anyone can design it according to their preferences. Considering all the choices we make, we are sharing this widget with two designs.

In the post we will share two designs. We will divide the designs into two parts separately. First, we will show the list label and the next to insert the Cloud Label. Click the button below to see the Live Demo of the List Label widget.

How to add List Label?

First login to the blog.

Then, from the Blogger dashboard,

click on the Layout option.

Now click on the Add Gadget option from the Layout sidebar of the blog.

After clicking on the Label Widget, you will see the following image options.

The above image options can be sorted like your mind. Can not change list's only display option. Changing this will not work in style codes.

Then click on Save button in yellow color.

Now click on Template> Edit Html button from the Blogger Dashboard.

Ctrl + F by pressing the keyboard
]]> </ b: skin> Search the section.

Now paste the following CSS codes]]> </ b: skin> tag.

<blockquote>/* Sidebar List Label

-------------------------------------------------------- */
.Label h2{background:#009688;border-bottom:3px solid #9BD2F4;margin:0 0 10px;padding:8px 10px 8px;color:#fff;font-size:16px;line-height:16px;font-family:"Oswald",sans-serif;font-weight:bold;text-decoration:none;text-transform:none}
.Label h2:before{content:"\f02c";color:#fff;font-size:16px;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:10px;margin-left:2px}
.label-size a,.label-size span{display:inline-block;color:#666;padding:10px 12px;font-weight:400}
.label-size{line-height:1.2}
.Label ul{margin-left:10px}
.Label ul li{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj04q9fbh7lNocv0hDENsrptJ673C2skY9McC6CCTmk-Vlh9mQGJW1YaBwShf_nJwZhR1zHS9iHotWPxFfOxsHJjDi9e3hOjdjRPMHAUjk0w_krRMGlqD6z9yUGqEC3pKjB-QWGvYt8jUKb/s1600/bullet.gif") no-repeat scroll 0 2px rgb(255,255,255);list-style-type:none;padding-left:20px;margin:0 0 5px}
.Label li{background:#fff;color:#1359ae;float:left;padding:5px;margin-left:3px;text-align:left;width:40%;transition:.3s linear;font-size:13px}
.Label li a{color:#1359ae;transition:.3s linear}
.Label li a:hover{color:#FF0900;text-decoration:underline}
.label-size{background:#fff;color:#666;border:none;display:block;float:left;margin:0 3px 3px 0;font-size:11px;transition:all 0.8s linear}
.label-size a{display:inline-block;color:#666;padding:10px 12px;font-weight:400;transition:all 0.8s linear}
.label-size a:hover{background:#eac965;color:#fff;transition:all 0.1s linear}</blockquote>

Finally, come out with the Template Save. Then the design of your blog labels will change.

How to add Cloud Label?

From the previous blogger dashboard,

click on the Layout option.

Now click on the Add Gadget option from the Layout sidebar of the blog.

After clicking on the Label Widget,
you will see the following image options.

Here you can sort all the options of the image above like your mind. Can not change Display's Cloud option only. Changing this will not work in style codes.

Now click on Template> Edit Html button from the Blogger Dashboard.

Ctrl + F by pressing the keyboard
]]> </ b: skin> Search the section.

Now paste the following CSS codes ]]> </ b: skin> tag.

<blockquote>
/* Sidebar Cloud Label
-------------------------------------------------------- */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10}
.cloud-label-widget-content{text-align:left;padding:7px 10px}
.label-size{background:#47B7B6;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase}
.label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold;text-transform:none;font-size:13px}
.label-size:hover{background:#005F5E}
.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#1E807F;color:#fff!important}
.label-size{line-height:1.2;border-radius:1px}
</blockquote>
Finally, come out with the Template Save. Then the design of your blog labels will change.

Asking help:

In the above methods we only added the CSS Style Sheet. That's why I do not think there will be any problem for anyone to apply it. Even if someone has problems understanding any part of it, then we can inform them.