Add CSS3 Brick Style Custom Labels to Blogger

It is necessary for bloggers to make their blogger template looking beautiful and stylish with CSS3 effects. So every one wants to have CSS3 brick/box/block style custom labels/Tags cloud with bullets buttons into blogger blogspot. When their is some custom labels cloud with CSS3 hover effect beautiful tags are paste into blogger, so their are wide chances of clicking and viewing more pages. It will increase your pageviews, page criteria, earning and clicks on ads. These beautiful label clouds may give you award as bookmark for some advanced users to learn the professional tricks for their own blogger.

They may customize their blog according to those tricks you've provide them to stylise your blogger. Beautiful CSS3 Brick/Block/Box Style Custom Labels/Tags will attract users and force them to click on their favorite topics. These stylish label clouds will also involved in the beauty of your blogger template.I've already share Add Pure CSS Social Media Follow Us Widget in Blogger with CSS3 effects.

How to Add CSS3 Brick Style Custom Labels to Blogger

Step 1. Log in to Blogger Dashboard, and select Layout
Step 2. Click on Add a Gadget

Step 3. Select Labels

Step 4. Customize Label Widget with this picture

Step 5. Click on Save and also select Save arrangement.

Step 6. Now from the left menu select Template
Step 7. Now click on Edit HTML

Step 8. Tick Expand Widget Templates

Step 9. Press Ctrl+F button from keyboard to find
Step 10. Type /b:skin in HTML

Step 11. Paste the following code above ]]></b:skin>

.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 );
}

Step 12. Click on Save template.

Customization of CSS3 Brick Style Custom Labels to Blogger

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. You may generate colors from HEX wheel color generator or use our HTML color generator tool to generate color codes own your desires.

Enjoy!

Posted in: Blogger-Widgets, CSS, Labels