Cara Membuat Widget Counter Label Ala MasTamvan Blog

Kembali ke tutorial blogger lagi kali ini saya akan membahas kembali tentang bagaimana cara mengubah tampilan desain widget label seperti mas tamvan blog. Pertemuan sebelumnya saya sudah memberikan tutorialnya pada postingan cara modifikasi widget label seperti risen simple template namun kali ini berbeda karena desain widget ini akan memiliki banyak warna yang cerah.

Cara Membuat Widget Counter Label Ala MasTamvan Blog

Tentunya anda sebagai seorang blogger sudah mengetahui dong apa sih fungsi dari widget label di blog tersebut? nah fungsi itu adalah untuk mempermudah dan membantu para pengunjung di dalam menelusuri artikel yang ada disetiap label maupun kategori semisal jika artikel tersebut termasuk label lifehack kita bisa menekan tombol label yang ada pada widget maka secara otomatis semua artikel yang berkaitan dengan label tersebut akan tampil.

Selain mempercantik widget label di blog dengan warna yang berbeda, widget ini juga memiliki desain warna yang unik dan menarik serta mensupport counter (jumlah) postingan yang ada pada label tertentu.

Apabila anda berminat untuk mempercantik dan membuat tampilan widget label seperti mastamvan maka ikuti tutorial cara pembuatannya pada berikut ini.

Cara Membuat Widget Counter Label Sama Seperti MasTamvan Blog

Langkah pertama, masuk dan login ke dalam dashboard blogger anda. Lalu pilihlah menu Template > Edit HTML.

Langkah kedua, salin atau ganti kode css label anda menggunakan kode di bawah tepat diatas kode </style> atau ]]></b:skin>.


.widget-content.cloud-label-widget-content{display:inline-block;width:100%}
.widget-content.cloud-label-widget-content{display:inline-block}
.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;padding:10px;margin:10px 10px 5px 10px}
.label-count{white-space:nowrap;display:inline-block}
#sidebar-wrapper .Label li{position:relative;background:#FFFEFC;color:#333;padding:0px;margin:5px;text-align:left;width:97%;transition:all .8s ease-out;text-transform:none;border:1px solid #fff;box-shadow:0px 0px 1px rgba(0,0,0,0.4)}
#sidebar-wrapper .Label li:hover{color:#0074D9;transition:all 0s ease-out}
#sidebar-wrapper .Label li:before{content:"";position:absolute;width:0;height:98%;background:#4fafe9;transition:all .8s ease-in-out}
#sidebar-wrapper .Label li:hover:before{width:100%;transition:all 0s ease-out}
#sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:35px;color:#787878;text-decoration:none;transition:all .8s ease-out}
#sidebar-wrapper .Label li a:before{font-family:fontawesome;content:"f07c";padding-right:10px !important}
#sidebar-wrapper .Label li a:hover{color:#fff;transition:all 0s ease-out}
#sidebar-wrapper .Label li span{float:right;height:98%;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,
#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before{background:#ca85ca}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,
#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before{background:#e54e7e}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,
#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before{background:#61c436}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,
#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before{background:#f4b23f}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,
#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before{background:#46c49c}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,
#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before{background:#607ec7}
#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s}
#sidebar-wrapper .label-size a{background:#fff;display:inline-block;color:#666;padding:5px 8px;font-weight:400;border:1px solid #ccc;transition:all .3s}
#sidebar-wrapper .label-count{backface-visibility:hidden;opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-5px;right:-10px!important;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:25px;height:22px;line-height:22px;border-radius:4px;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;right:-15px!important}
#sidebar-wrapper .label-size a:hover{color:#666;border-color:#4fafe9}.Label li{background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out} .somed{float:right;width:auto;position:absolute;top:0;right:7px;cursor:pointer;color:#fff}.somed li:nth-child(1) a:hover{color:#5d82d1}.somed li:nth-child(2) a:hover{color:#eb5e4c}.somed li:nth-child(3) a:hover{color:#91653f}.somed li:nth-child(4) a:hover{color:#40bff5}

Untuk mengubah warna pada label, silahkan ganti kode css yang sudah saya tandai diatas menggunakan warna sesuai dengan keinginan anda. Dan apabila kode css pada sidebar anda berbeda dengan diatas maka ubahlah dengan kode css sidebar yang ada pada template blog anda.

Langkah ketiga, silahkan simpan template blog anda. dan lihatlah hasilnya.

Demikianlah bagaimana cara modif label di blog dengan tampilan desain mirip mastamvan blog, semoga bermanfaat guys.


Gambar Gravatar
Seseorang yang malas, suka tidur molor pengen sukes

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *