Cara Membuat Widget Label Cloud Flat UI Keren

Cara Membuat Widget Cloud Flat UI Keren - Pada kesempatan kali ini saya akan membagikan tutorial blogger tentang bagaimana Cara Membuat Widget label Cloud UI Keren. Widget Label Cloud digunakan untuk memisahkan artikel - artikel menurut tag untuk mempermudah para pengunjung atau para pembaca menelusuri artikel blog menurut tag. Pastinya untuk semua para blogger ingin mempunyai widget label yang keren, untuk itu  sekarang kita akan membuat widget label menjadi menarik dan pastinya lebih keren dengan desain Flat UI. untuk membuat widget label ini hanya perlu menambahkan atau mengedit ulang css label cloud yang sebelumnya sudah ada di TEMPLATE HTML anda, disini saya memberikan 2 warna pada Widget Cloud Flat UI yaitu warna Hijau dan Biru. Berikut screenshotnya..

Widget Cloud Flat UI Hijau

Widget Cloud Flat UI Biru

Cara Membuat Widget Label Cloud Flat UI Keren :

1. Sebelum anda membuat Widget Label ini silahkan masuk kedalam Dashboard Blog anda pilih Tata Letak lalu Tambahkan Gadget pilih Label dengan pengaturan seperti gambar dibawah ini.

2. Klik Simpan.
3. Setelah itu anda pergi ke Template lalu Klik Edit HTML.
4. Cari kode CSS Label blog anda biasanya terletak diatas kode ]]></b:skin> atau </style>, lalu hapus saja kode CSS yang lama dan ganti dengan kode CSS dibawah ini. Namun apabila di template blog anda belum terdapat kode CSS, maka langsung saja anda tambahkan kode CSS berikut diatas kode ]]></b:skin> atau </style> :
   
   /* CSS Label Cloud Flat UI By Ali-DuniaBlog */
   .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;
   }
Kode diatas untuk Widget Label Cloud Flat UI berwarna hijau, sedangkan untuk Widget Label Cloud Flat UI berwarna biru silahkan ganti tulisan yang berwarna merah dengan kode #5797bf; untuk tulisan berwarna kuning silahkan ganti dengan kode #4c80a1;
5. Terakhir Simpan Template

Demikian Tutorial Blogger mengenai Cara Membuat Widget Label Cloud Flat UI Keren yang saya bagikan kepada anda, Semoga Widget Label Blog anda menjadi lebih menarik dan pastinya lebih keren.
Semoga bermanfaat bagi semuanya, salam blogger....

Author : aliridho

Terimakasih, telah membaca artikel mengenai Cara Membuat Widget Label Cloud Flat UI Keren. Semoga artikel tersebut bermanfaat untuk Anda. Mohon untuk memberikan 1+ pada Google+, 1 Like pada Facebook. Jika ada pertanyaan atau kritik dan saran silahkan tulis pada kotak komentar yang sudah disediakan.

Share Artikel

Facebook

Google+