20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Add Flat Colorful Cloud Label Widget In Blogger

learn trick to add install flat cloud ui color label widget in blogger template.Custom labels gadget for blogger template.stylish beautiful label design diamond style for website.
install add stylish beautiful custom label widget in blogger template
Hello Folks, Today in this article we are going to explain How to add Flat Colorful Label Widget in blogger template.You might have noticed in other websites that there tags or categories looks in different style.In this gadget we have used pure CSS for styling.However you can change the color according yourself.Blogger default cloud label widget is very simple and does not suits any blogger website niche.This widget looks like diamond shape and definitely increase the look of your blogspot blog.In order to increase page views of your website you must install categories section so the visitors can understand the topics of your website.In previous post we have shared Adding drop down function on blogger labels.So to give stylish on your labels you must install flat colorful label widget in your blogger template.To create widget follow the steps mentioned below.

How to Create Flat Cloud Colorful Label Gadget In Blogger Template

Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.

Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.

Step 4. Now Copy the below CSS and paste it just before/above </style> or ]]></b:skin>.


/*Flat Cloud Label Widget By www.Bloggersstand.com*/
.Label a{
padding-left: 5px;
padding-right: 31.5px;
color: #fff!important;
height: 32px;
background: #63953D;
margin-right: 2px;
line-height: 28px;
text-decoration: none;
border: none !important;
-webkit-transition: all .3s ease-in-out !important;
float: left;
margin-top: 2px;
font-size: 12px;
text-align: left; }
.Label a:hover{
color:#fff !important;
background:#8ED557; }
.Label a:after{
content: "";
position: absolute;
width: 0px;
height: 0px;
border-width: 16.5px;
border-style: solid;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent;}

Customization:
  • To Change the background color replace 63953D with your desired color.
  • To Change the Hover background color replace 8ED557 with your desired color.
  • You can choose colors from color wheel picker or color code generator.
Step 5. Now Save your Template..Done !

Post a Comment