Cara Membuat Widget Label Cloud Flat UI Hijau Keren - Helo Sobat, Kali ini aku akan membagikan artikel perihal bagaimana cara menciptakan Widget Label Cloud Flat UI Hijau keren ala Saya sendiri Fajri Andaviar, untuk menciptakan Widget Label ini hanya perlu menambahkan atau mengedit ulang css label cloud yang sebelumnya sudah ada, berikut screenshot nya :
Berikut Tutorial nya :
1. Sebelum menciptakan Widget Label ini sahabat masuk ke Tata Letak > Klik "Edit" pada Widget Label atau Buat Widget Label gres apabila sahabat belum menciptakan Widget nya, sesudah itu buat menyerupai ini :
2. Apabila sudah eksklusif saja menuju Template > Edit HTML , Cari instruksi CSS Label Cloud blog sobat, kemudian hapus saja css yang usang dan ganti dengan instruksi css dibawah ini, namun apabila di template blog sahabat belum terdapat instruksi CSS Label Cloud eksklusif saja sahabat tambahkan instruksi CSS berikut :
3. Selesai.
Sekian artikel aku hari ini, maaf atas segala kekurangan atau kelebihannya, Wassalam.
(Screenshot) Cara Membuat Widget Label Cloud Flat UI Hijau Keren |
Berikut Tutorial nya :
1. Sebelum menciptakan Widget Label ini sahabat masuk ke Tata Letak > Klik "Edit" pada Widget Label atau Buat Widget Label gres apabila sahabat belum menciptakan Widget nya, sesudah itu buat menyerupai ini :
(Penampakan) Konfigurasi Widget Sebelum menciptakan Widget Label Cloud Flat UI |
2. Apabila sudah eksklusif saja menuju Template > Edit HTML , Cari instruksi CSS Label Cloud blog sobat, kemudian hapus saja css yang usang dan ganti dengan instruksi css dibawah ini, namun apabila di template blog sahabat belum terdapat instruksi CSS Label Cloud eksklusif saja sahabat tambahkan instruksi 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. Selesai.
Sekian artikel aku hari ini, maaf atas segala kekurangan atau kelebihannya, Wassalam.