Archive Pages Design$type=blogging

Memodifikasi Tampilan Label-Size Pada Blog

S obat blogger, ketika kita mengunjungi sebuah blog pernah kita lihat ada kolom yang diberi nama LABEL dan biasa diletakan di Sidebar atau...


Sobat blogger, ketika kita mengunjungi sebuah blog pernah kita lihat ada kolom yang diberi nama LABEL dan biasa diletakan di Sidebar atau Footer area, label-size ini berfungsi sebagai salah satu navigator bagi pengunjung blog kita untuk mencari artikel dengan tags khusus, seperti Tutorial, Template, SEO, HTML, CSS dan sebagainya.
Label-size ini sangat bisa di modifikasi secara tampilan sob... nah masih ada hubunganya dengan template yang saya pake ini jika sobat ingin merubah tampilan label-size yang ada diblog sobat menjadi seperti yang ada di blog.
Memodifikasi Tampilan Label-Size Pada Blog
Memodifikasi Tampilan Label-Size Pada Blog
Label-size ini secara default bagi yang menggunakan flatform blogger biasanya sudah tersedia, tetapi tampilannya tentulah sama seperti widget bawaan lainnya sederhana saja, nah jika sobat ingin membuat tampilan label-size pada blog sobat menjadi "cantik", saya ada solusinya sob... masih berhubungan dengan template yang saya gunakan saat ini, tampilan label-sizenya agak sedikit berbeda dari biasanya, sebenarnya cara memodifikasi label-size seperti ini tidaklah sulit-sulit amat sob, jika sobat mengikuti langkah-langkah dibawah ini dengan benar dan teliti, sudah pasti dan saya jamin akan bisa dipasang diblog kesayangan sobat.
Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

Cara Memodifikasi Tampilan Label-Size Pada Blog

Langkah Ke-1: Masuk ke menu Template>>Edit HTML Cari Kode Css Label-size bawan blogger pada template sobat jika sudah ketemu replace atau ganti saja dengan kode ini...

 /* CSS label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;}
.label-size {background:#fff;display:block;float:left;margin:0 2px 2px 0;
color:#666;font-size:11px;border:1px solid #eceeee;transition:.8s linear;}
.label-size a,.label-size span{display:inline-block;color:#666;padding:8px 10px;
font-weight:400;}
.label-size:hover {background:#ea5c35;}
.label-size a:hover {color:#fff!important;}
.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;
background:#e25756;color:#fff;transition:.8s linear;}
.label-count:hover {background:#ea5c35;color:#fff;}
.label-size {line-height:1.2}
#sidebar-wrapper .label-size{background:#ea5c35;color:#fff;border:1px solid #e25756;display:block;float:left;margin:0 2px 2px 0;font-size:11px;transition:all 0.6s linear;}
#sidebar-wrapper .label-size a:hover {background:#23292b;color:#fff;transition:all 0.3s linear;}
#sidebar-wrapper .label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#fff;transition:.3s linear;}
#sidebar-wrapper .label-size a:hover:before {content:"\f061";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#ea5c35;transition:.3s linear;}
#sidebar-wrapper .label-size a {display:inline-block;color:#fff;padding:8px 10px;
font-weight:400;transition:all 0.6s linear;}
#footer-wrapper .label-size{background:#ea5c35;color:#fff;border:1px solid #e25756;display:block;float:left;margin:0 2px 2px 0;font-size:11px;transition:all 0.6s linear;}
#footer-wrapper .label-size a {display:inline-block;color:#fff;padding:8px 10px;
font-weight:400;transition:all 0.6s linear;}
#footer-wrapper .label-size a:hover {background:#23292b;color:#fff;transition:all 0.3s linear;}
#footer-wrapper .label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#fff;transition:.3s linear;}
#footer-wrapper .label-size a:hover:before {content:"\f061";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#ea5c35;transition:.3s linear;}
#footer-wrapper .label-size:hover, #footer-wrapper-inner .label-size:hover{background:#23292b;color:#fff;border:1px solid #372f41;transition:all 0.3s linear;}
#footer-wrapper .label-count {white-space:nowrap;padding:3px;
background:#23292b;color:#fff!important;transition:all 0.2s linear;}
#Label1 span{float:right;background-color:#fafafa;color:#666;line-height:1.2;margin:0;padding:3px 5px;text-align:center;font-size:12px;transition:.3s linear;}
#Label1 span:hover{background-color:#ea5c35;color:#fff}

Langkah Ke-2: Simpan template sobat, dan lihat hasilnya

SELESAI !

Oh ya satu lagi sob, sobat harus merubah konfigurasi tampilan label sobat dari Daftar menjadi Cloud, lihat screenshot.
Memodifikasi Tampilan Label-Size Pada Blog
Memodifikasi Tampilan Label-Size Pada Blog


Jika menemukan kendala silahkan tanyakan pada kolom komentar dibawah, terimakasih dan selamat mencoba.

COMMENTS

Nama

Animasi Blogger Button Css Javascript jQuery Sider Sosial Media Syntax Highlighter Template Tips Tutorial Windows 10
false
ltr
item
Simple Tutorial: Memodifikasi Tampilan Label-Size Pada Blog
Memodifikasi Tampilan Label-Size Pada Blog
http://2.bp.blogspot.com/-jJyanbdOH2g/Vc2mN1YaT-I/AAAAAAAAAbs/dXqVTyu1gDQ/s640/label-size.jpg
http://2.bp.blogspot.com/-jJyanbdOH2g/Vc2mN1YaT-I/AAAAAAAAAbs/dXqVTyu1gDQ/s72-c/label-size.jpg
Simple Tutorial
http://mirandahardy.blogspot.com/2015/08/memodifikasi-tampilan-label-size-pada.html
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/2015/08/memodifikasi-tampilan-label-size-pada.html
true
4419251694985783704
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago