CSS Brick style Label Widget

Today We have created Brick style Cloud Label Widget For Blogger.

Before Going Further Check Our Other Label widget:

1. Metro Style Label Widget
2. Awesome Label Widget with aHover Effect

Follow these easy steps to add this Widget:

• Go to Blogger > Settings> Layouts
• Click add a gadget and choose Labels
• Inside the settings make sure to choose the Cloud display. You may set other options as per your requirement.
• Please choose to display at most 25 labels.
• Too much labels on homepage look awkward. So, Show your best categories only.
• Now save the widget and go to settings > Template
• Backup your template
• Click Edit html > Proceed and
• Now search for this ]]></b:skin>
• Now Copy Following CSS Code and Paste Just above/Before ]]></b:skin> :

CODE:

/*-----Custom Labels Cloud widget by www.allin1-web.blogspot.com----*/

.label-size a {
display: inline-block;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 7px;
font-family: 'Helvetica Neue', helvetica, sans-serif;
font-size: 11px;
line-height: 12px;
height: 12px;
vertical-align: middle;
margin-bottom: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}
.label-size a {
color: #FFF;
border: 1px solid #FF3405;
background: rgb(0,132,206);
background: -moz-linear-gradient(left, rgb(0,132,206) 1%, rgb(0,132,206) 99%);
background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgb(0,132,206)), color-stop(99%,rgb(0,132,206)));
background: -webkit-linear-gradient(left, rgb(0,132,206) 1%,rgb(0,132,206) 99%);
background: -o-linear-gradient(left, rgb(0,132,206) 1%,rgb(0,132,206) 99%);
background: -ms-linear-gradient(left, rgb(0,132,206) 1%,rgb(0,132,206) 99%);
background: linear-gradient(to right, rgb(0,132,206) 1%,rgb(0,132,206) 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0084ce', endColorstr='#0084ce',GradientType=1 );
}
.label-size a:before {
content: '\2022';
color: #FFFFFF;
margin-right: 4px;
font-size: 12px;
line-height: 12px;
height: 12px;
vertical-align: text-top;

text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.label-size a:hover {
text-decoration: none;

background: rgb(147,207,83);
background: -moz-linear-gradient(left, rgb(147,207,83) 0%, rgb(147,207,83) 99%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(147,207,83)), color-stop(99%,rgb(147,207,83)));
background: -webkit-linear-gradient(left, rgb(147,207,83) 0%,rgb(147,207,83) 99%);
background: -o-linear-gradient(left, rgb(147,207,83) 0%,rgb(147,207,83) 99%);
background: -ms-linear-gradient(left, rgb(147,207,83) 0%,rgb(147,207,83) 99%);
background: linear-gradient(to right, rgb(147,207,83) 0%,rgb(147,207,83) 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cf53', endColorstr='#93cf53',GradientType=1 );
}

/*-----Custom Labels Cloud widget by www.allin1-web.blogspot.com END----*/

Customization:

font-size: 11px; = This is the Font Size of Labels/Tags that is displayed on your blogger. You can easily customize its font with your own choice.

color: #FFF; = This will change the Text Color of Labels/Tags that is displayed on your blogger. You can easily customize its font with your own choice.