Modify the blogger default cloud label widget style

Yesterday when I add a cloud label widget on my blog then I see it looks so bad. So in this article, we will change the look of the cloud label widget of the blogger. Every template has a different cloud label style. So we are use css to customize the label cloud widget. We follow 3 steps to change the default cloud label widget style.

Step 1: Removing the old css of cloud label

If you do not remove the old css and add new css in the same class division then you use so many coding errors. First open your blogger dashboard then theme edit HTML, now search for .label. Before searching for this word you will see so many css with this class division now remove all css and save the theme.

Step 2: Adding the new css of cloud label

Now search on the theme for ]]></b:skin> tag. Now add the below css after ]]></b:skin> tag.

/* Label By Sayem Tutorial */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}#Label1{font-size:0;overflow:hidden}#Label1 .label-size{display:inline-block;position:relative;text-transform:none;text-decoration:none;font-size:13px;margin:0 5px 5px 0}#Label1 .label-size a{background:#4f4387;color:#fff;display:inline-block;padding:6px 10px;margin:0;float:left;font-weight:700;border-radius:3px}#Label1 .label-size a:hover{background:#443a75;color:#fff}#Label1 .cloud-label-widget-content{text-align:left;display:inline-block}

Now save your theme

Step 3: Fixing other problem

Now your widget is adding done. If see widget is not changed then please remove all the css with label1 class division.

Conclosing

After you adding this widget please don't forget to give a small thanks on the comment also if you face any problem with this article then please comment down below. Thanks for with us.