Home » » How to Make Flat UI Label Cloud

How to Make Flat UI Label Cloud

Posted by Ran Dreamer on 19 Apr 2015

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.
 Flat UI Label Cloud
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!

Share This Post :
 
Copyright © 2015 LABSTON | Adsense, Blogger, Android, Backlink, SEO, Template. All Rights Reserved
Template Johny Wuss Responsive by Creating Website and CB Design