3 Macam Widget Label (Kategori) Responsiv Keren dan Simple Untuk Blog

Hallo readers~ Kali saya akan membagikan 3 Macam Widget Label (Kategori) Responsiv Keren dan Simple Untuk Blog. Widget label yang akan saya bagikan kali ini sangatlah keren, karena tampilan dan bentuk dari labelnya yang menarik dan menyejukan mata ketika memandangnya.

Widget label atau kategori ini sangatlah penting untuk dimiliki oleh setiap blog, karena dengan widget ini akan menampilkan label atau kategori yang telah kita buat. Widget label atau kategori juga berguna untuk pengunjung agar pengunjung mudah untuk menavigasi kategori yang mereka ingin lihat.

Nah, untuk itu ada baiknya Anda memasang salah satu dari 3 widget label atau kategori yang saya berikan ini. Anda dapat memilihnya yang mana Anda suka. Berikut 3 Macam Widget Label (Kategori) Responsiv Keren dan Simple Untuk Blog.

Cara Membuat Widget Label (Kategori) Responsiv Keren dan Simple Untuk Blog

Bagi Anda yang ingin memiliki widget label atau kategori yang responsiv, keren dan simple untuk blog Anda, silahkan pasang widget label atau kategori yang saya berikan ini pada blog Anda. Berikut 3 Macam Widget Label (Kategori) Responsiv Keren dan Simple Untuk Blog yang dapat Anda pasang langsung pada blog Anda.

1. Widget Label (Kategori) Cloud Warna-Warni

Widget yang satu sangatlah keren, karena tampilan cloud yang keren yang penuh dengan warna-warni dan tidak akan membuat kita bosan ketika memandangnya.
Berikut cara memasang Widget Label (Kategori) Cloud Warna-Warni.

• Masuk ke blogger
• Pergi ke Template > Edit HTML
• Lalu cari kode ]]></b:skin> untuk lebih cepatnya tekan CTRL F
• Setelah itu copy kode script dibawah lalu letakan tepat di atas kode ]]></b:skin>

#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;padding: 5px 0}
#Label1 .cloud-label-widget-content span {display: inline-table; line-height: 1.2;}
#Label1 .cloud-label-widget-content span a {padding:4px 5px;color:#fff}
#Label1 .label-size {margin:4px 0;}
#Label1 .label-size span {background:#007abe;padding:4px 5px;color:#fff}
#Label1 .label-size-1 a {background:#abc123;font-size:15px;}
#Label1 .label-size-2 a {background:#5cc9cd;font-size:15px;}
#Label1 .label-size-3 a {background:#e24f4f;font-size:15px;}
#Label1 .label-size-4 a {background:#f568dc;font-size:15px;}
#Label1 .label-size-5 a {background:#38a3ee;font-size:15px;}
#Label1 .cloud-label-widget-content span a:hover {background:#007abe;} 

• Save Template atau simpan template dan lihat blog Anda

Keterangan: 
Warna merah : Kode HTML Warna
Warna Biru : Ukuran Font / Tulisan Pada Label
Padding : Jarak Spasi

 

 Namun jika belum terpasang juga, ikuti langkah-langkah berikut.
*. Masuk ke blogger
*. Pergi ke Tata Letak > Tambahkan widget atau add gadget
*. Setelah itu pilih Label > pilih Cloud
*. Simpan

2. Widget Label (Kategori) Cloud FLAT UI Warna Hijau Super Keren

Widget yang kedua ini sangatlah super keren, karena dengan tampilan Cloud FLAT UI yang dipadukan dengan Warna Hijau yang Super Keren. Untuk memasang widget ini kita hanya memerlukan sedikit pengeditan pada CSS Label Cloud yang sebelumnya.
Berikut cara pemasangannya.

• Masuk ke blogger
• Pilih Template > Edit HTML
• Cari kode CSS Label Cloud Anda, dan hapus saja kode itu lalu ganti dengan kode dibawah ini. Namun jika sebelumnya template Anda tidak ada kode CSS Label Cloud, langsung saja pasang kode dibawah ini.

/*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: &quot;&quot;;
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;
}

• Klik save atau simpan template

Namun jika belum terpasang juga, ikuti langkah-langkah berikut.
*. Masuk ke blogger
*. Pergi ke Tata Letak > Tambahkan widget atau add gadget
*. Setelah itu pilih Label > pilih Cloud
*. Simpan

3. Widget Label (Kategori) Keren Seperti Evo Template

Widget label atau kategori yang terakhir ini sangatlah keren. Karena ini sangatlah mirip dengan label atau kategorinya Evo Template miliknya Mas Sugeng.
Berikut cara pemasangannya.

• Masuk ke blogger
• Pilih Template > Edit HTML
• Lalu cari kode ]]></b:skin> untuk lebih cepatnya tekan CTRL F
• Lalu copy kode script dibawah dan pastekan tepat di atas kode ]]></b:skin>

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size{
display:block;
float:left;
margin:0 2px 2px 0;
color:#333;
border:3px solid #EDEFF1;
}
#footer-wrap .label-size {
border:3px solid #444444;
}
#footer-wrap .label-size span {
color:#ccc;
}
.label-size a,.label-size span{
display:inline-block;
color:#333;
padding:5px 8px;
}
.label-size:hover, #footer-wrap .label-size:hover{
border:3px solid #07ACEC;
}
.label-count{
white-space:nowrap;
padding-right:6px;
margin-left:-3px;
}
.label-size{line-height:1.2
}

• Simpan template

Nah itulah 3 Macam Widget Label (Kategori) Responsiv Keren dan Simple Untuk Blog, Semoga bermanfaat untuk Anda.
Terimakasih! 

Scourse : seyosnya.blogspot.co.id

Authors : *2RI$1* TURISWAN

Like This Article :

Share This Article :

Read More