Cara Menciptakan Label Cloud Flat Ui

Label Cloud Flat UI - Label bahasa inggrisnya Tag yaitu disebut penanda . Fungsi dari Label yaitu untuk mempermudah pengunjung menavigasi Artikel . Pada label berikut ini merupakan Label Cloud Flat UI dengan tempilan cukup menarik mempunyai fitur background Green dan effect Hover .

Menciptakan Lebel ini dengan memakai CSS , dan kabar baik lainnya cukup gampang pembuatannya. Contohnya Anda sanggup melihat screnshotnya diatas . Keren bukan... Bagi Anda yang tertarik berikut ini langkah-langkahnya :

1. Login Keakun Blogger
2. Pilih Layout/Tata Letak , kemudian klik add Gadget
3. Selanjutnya Anda pilih Widget Label dengan Tampilan Cloud, kemudian simpan. Berikut Screnshotnya :

4. Selanjutnya pemasangan CSS, silahkan Anda buka Editor Template kemudian cari arahan berikut ]]></b:skin> dan pasangkan arahan dibawah ini diatasnya .

CSS

/*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;
}

Jika Anda sudah menciptakan Widget dengan Tampilan Cloud sebelumnya ganti arahan CSS yang usang dengan arahan CSS diatas. Namun jikalau belum terdapat CSS Label Cloud di blog Anda lewti langkah tersebut

5. Simpan Template

Mudah bukan , biar bermanfaat!

Sumber http://www.websiteedukasi.com/