Posted by Aak
Aak-share.com Updated at: 7:38:00 PM

Cara Membuat Label Cloud Flat UI

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


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

1. Login Keakun Blogger
2. Pilih Layout/Tata Letak , lalu 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 lalu cari kode berikut ]]></b:skin> dan pasangkan kode 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 membuat Widget dengan Tampilan Cloud sebelumnya ganti kode CSS yang lama dengan kode CSS diatas. Namun jika belum terdapat CSS Label Cloud di blog Anda lewti langkah tersebut

5. Simpan Template

Mudah bukan , semoga bermanfaat!
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

2 comments

keren gan widget labelnya,
saya langsung pasang di Blog.
thanks gan.

Balas

iya gan silahkan,
Thanks too gan sudah berkunjung .

Balas