Cara Membagi List Label Footer Menjadi Dua - Bagi sobat yang mempunyai blog dengan banyak label didalamnya, bisa menggunakan trik di bawah ini agar list label terlihat lebih rapi dan menghemat tempat.
Trik ini khusus untuk pengguna template Vikka, namun tidak menutup kemungkinan bisa juga diterapkan di template lain.
Login ke Blogger > Edit HTML > Cari kode di bawah ini :
/* Arlina 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;padding:0;}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .Label
li{position:relative;background:#fff;color:#444;padding:0;margin:0;text-align:left;width:100%;transition:all
.3s}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before
{content:"";position:absolute;width:2px;height:100%;background:#4fafe9;transition:all
.2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0
20px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all
.3s}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li
span{float:right;height:42px;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{background:#45a2db;position:relative;display:block;float:left;margin:0
1px 1px 0;font-size:11px;transition:all .3s}
#sidebar-wrapper .label-size a{display:inline-block;color:#fff;padding:4px 6px;font-weight:400;transition:all .3s}
#sidebar-wrapper
.label-count{display:inline-block;background:#3a91c7;color:#fff;padding:5px
8px;text-align:center;transition:all .3s}
#sidebar-wrapper .label-size a:hover{color:#fff;text-decoration:underline}
#footer-wrapper
.label-size{background:#2e2e2e;color:#eee;display:block;float:left;margin:0
1px 1px 0;font-size:11px;transition:initial;}
#footer-wrapper .label-size a{display:inline-block;color:#eee;padding:4px 6px;font-weight:400;transition:all .3s}
#footer-wrapper .label-size a:hover {color:#fff;text-decoration:underline}
#footer-wrapper
.label-count{white-space:nowrap;background:#2e2e2e;display:inline-block;color:#eee;padding:5px
8px;text-align:center}
#footer-wrapper .Label li{padding:5px 0;margin:0;text-align:left;border-bottom:1px solid #444;transition:all .3s}
#footer-wrapper .Label li a {color:#eee;transition:all .3s;}
#footer-wrapper .Label li
span{background:#2e2e2e;float:right;color:#eee;margin:0;padding:4px
6px;text-align:center;font-size:13px;font-weight:400;transition:all
.3s;}
#footer-wrapper .Label li a:hover,#footer-wrapper .Label
li:hover,#footer-wrapper .Label li span:hover
{color:#fff;text-decoration:underline}Ganti semua kode di atas dengan kode di bawah ini :
/* Arlina 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;padding:0;}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .Label
li{position:relative;background:#fff;color:#444;padding:0;margin:0;text-align:left;width:100%;transition:all
.3s}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before
{content:"";position:absolute;width:2px;height:100%;background:#4fafe9;transition:all
.2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0
20px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all
.3s}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li
span{float:right;height:42px;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{background:#45a2db;position:relative;display:block;float:left;margin:0
1px 1px 0;font-size:11px;transition:all .3s}
#sidebar-wrapper .label-size a{display:inline-block;color:#fff;padding:4px 6px;font-weight:400;transition:all .3s}
#sidebar-wrapper
.label-count{display:inline-block;background:#3a91c7;color:#fff;padding:5px
8px;text-align:center;transition:all .3s}
#sidebar-wrapper .label-size a:hover{color:#fff;text-decoration:underline}
#footer-wrapper
.label-size{background:#2e2e2e;color:#eee;display:block;float:left;margin:0
1px 1px 0;font-size:11px;transition:initial;}
#footer-wrapper .label-size a{display:inline-block;color:#eee;padding:4px 6px;font-weight:400;transition:all .3s}
#footer-wrapper .label-size a:hover {color:#fff;text-decoration:underline}
#footer-wrapper
.label-count{white-space:nowrap;background:#2e2e2e;display:inline-block;color:#eee;padding:5px
8px;text-align:center}
#footer-wrapper .Label li{padding:5px
0;margin:0;text-align:left;border-bottom:1px solid
#444;width:48%;float:left;transition:all .3s}
#footer-wrapper .Label li:nth-child(odd) {margin-right:4px;}
#footer-wrapper .Label li:nth-child(even) {margin-left:4px;}
#footer-wrapper .Label li a {color:#eee;transition:all .3s;}
#footer-wrapper .Label li
span{background:#2e2e2e;float:right;color:#eee;margin:0;padding:4px
6px;text-align:center;font-size:13px;font-weight:400;transition:all
.3s;}
#footer-wrapper .Label li a:hover,#footer-wrapper .Label
li:hover,#footer-wrapper .Label li span:hover
{color:#fff;text-decoration:underline}Dan mengembalikan CSS seperti semula pada media query tertentu :
@media screen and (max-width:640px) {
.post-info {display:none}
.status-msg-border {width:97%}
.post h2 {font-size:100%}
#footer-wrapper{margin:auto;}
#footer-adwidget {width:100%;overflow:hidden;}
#footer-adwidget .footer-widget {width:94%;float:left;margin-left:10px;}
.cpleft, #ftright {line-height:normal;}}Ganti semua kode di atas dengan kode di bawah ini :
@media screen and (max-width:640px) {
.post-info {display:none}
.status-msg-border {width:97%}
.post h2 {font-size:100%}
#footer-wrapper{margin:auto;}
#footer-adwidget {width:100%;overflow:hidden;}
#footer-adwidget .footer-widget {width:94%;float:left;margin-left:10px;}
.cpleft, #ftright {line-height:normal;}
#footer-wrapper .Label li{width:100%;float:none;}
#footer-wrapper .Label li:nth-child(odd) {margin-right:0;}
#footer-wrapper .Label li:nth-child(even) {margin-left:0;}}Selesai, simpan template.
Intinya di sini Saya hanya menambahkan CSS pseudo nth child serta membatasi lebar dengan width:48% pada atribut CSS label. Seperti di bawah ini :
#footer-wrapper .Label li{padding:5px 0;margin:0;text-align:left;border-bottom:1px solid #444;transition:all .3s}Setelah ditambahkan :
#footer-wrapper .Label li{padding:5px
0;margin:0;text-align:left;border-bottom:1px solid
#444;width:48%;float:left;transition:all .3s}
#footer-wrapper .Label li:nth-child(odd) {margin-right:4px;}
#footer-wrapper .Label li:nth-child(even) {margin-left:4px;}Ok, cukup mudah bukan. Happy blogging.
0 komentar
Posting Komentar