Label Cloud Flat UI - Label Tag English language is called a marker. The function of the label is to facilitate visitors navigate the article. In the following label is a label Cloud Flat UI to look pretty attractive features and effects Hover Green background.
Creating this label by using CSS, and other good news is quite easy to produce. For example you can see screnshotnya above. Cool is not it ... For those of you who are interested in following these steps:
1. Log in to your Blogger account
2. Select Layout, and then click Add Gadgets> label
3. Next you select the Display Label Cloud Widget, then save. Screenshot below it:
4. The setting of CSS, you simply open the Template Editor and find the following code]]> </ b: skin> and attach the following code above.
*Label Cloud Flat UI */
.Label a{
padding-left: 5px;
padding-right: 31.5px;
color: #fff!important;
height: 32px;
background: #1abc9c;
margin-right: 2px;
line-height: 32px;
text-decoration: none;
border: none !important;
-webkit-transition: all .3s ease-in-out !important;
float: left;
margin-top: 2px;
font-size: 13px;
text-align: left; }
.Label a:hover{ color:#fff !important;
background:#16a085; }
.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;
}
Note: If you already made a widget to display the previous Cloud, replace the old CSS code with CSS code above. But if there are not CSS Label Cloud on your blog skip this step
5. Save Template
Easy is not it, may be useful!
