 |
| Contoh Label FlatUI |
Saya akan membarikan tutorial tentang cara membuat widget label pada blog dengan desain FlatUI. Lalu bagaimana cara memasang widget ini? Mari simak tutorial berikut ini:
Memasang Font Awesome
Kalian harus menambahkan script ini agar widget berkerja. Bagi yang belum memasang saja, kalau sudah abaikan, silahkan tambahkan kode di bawah ini sebelum penutup </head><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Setting Widget Label Melalui Tata Letak
Pertama adalah memasang widget label standar melalui tata letak/layout. Lalu samakan konfigurasi widget seprti gambar dibawah ini kalian juga bisa mengedit pada bagian Menyortir bisa di setting ke Alfabetik sesuai keinginan kalian.
Menambahkan CSS
Nah, sekarang tinggal menambahkan CSS, tempatnya di Dasbor Blog > Template > Edit HTML. Tambahkan kode CSS di bawah ini sebelum tag </style> atau </b:skin>
.cloud-label-widget-content {
text-align: justify;
max-height: 300px;
overflow-y: auto;
}
.cloud-label-widget-content::-webkit-scrollbar-thumb {
background-color: #ecf0f1;
border-radius: .425em;
}
.cloud-label-widget-content::-webkit-scrollbar {
background: 0 0;
}
span.label-size {
float: left;
font-size: 10pt;
background: #fff;
border: 1px solid #bdc3c7;
border-radius: 3px;
margin: 4px;
padding: .4em .75em;
}
span.label-size:before {
content: "\f02b";
font-family: FontAwesome;
color: #95a5a6
}
span.label-size a {
color: #666;
margin-left: .5em;
}
Sekian tutorialnya, semoga bermanfaat.
loading...