Referensi mahrus.net tentang tutorial android, blogging, daftar, kesehatan, komputer, internet, operator update terbaru dan terlengkap setiap hari.

Friday, June 19, 2015

Cara Membuat Widget Label Blogger FlatUI

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.
Cara Membuat Widget Label Blogger FlatUI

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...
Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Cara Membuat Widget Label Blogger FlatUI