Widget label cloud Flat UI

Helo Sobat, Kali ini saya akan membagikan artikel mengenai cara membuat Widget Label cloud Flat UI.
Widget ini saya dapatkan dari blog Fajri Andaviar, untuk membuat Widget Label ini sangat sederhana sobat hanya menambahkan css label cloud yang sebelumnya sudah ada,
berikut screenshot nya :

(Screenshot) Cara Membuat Widget Label cloud Flat UI

Simak langkah² dibawah ini :

1. Sebelum membuat Widget Label ini sobat masuk ke Tata Letak » Klik Edit pada Widget Label atau Buat Widget Label baru apabila sobat belum membuat Widget nya, setelah itu buat seperti ini :

(Penampakan) Konfigurasi Widget Sebelum membuat Widget Label Cloud Flat UI

2. Kalau sudah klik simpan kemudian sobat langsung menuju Template » Edit HTML, Cari kode CSS Label Cloud blog sobat, lalu hapus saja css yang lama dan ganti dengan kode css dibawah ini, namun apabila di template blog sobat belum terdapat kode CSS Label Cloud langsung saja sobat tambahkan kode CSS berikut :

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

3. Kemudian simpan template sobat.
Sekian artikel dari saya hari ini, mohon maaf kalo ada salah kata.

Widget label cloud Flat UI 2014-09-13T18:45:00-07:00 Rating: 4.5 Diposkan Oleh: Unknown