Sabtu, 15 Agustus 2015

Cara Membagi List Label Footer Menjadi Dua

Cara Membagi List Label Menjadi Dua

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.

28 komentar:

  1. keren kak speed and responsive banget templatenya

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. Saya sangat suka template ini... fast & simple...

    BalasHapus
  4. keren-keren banget templatenya mbak..

    BalasHapus
  5. cepet mbak, tapi kenapa H1 nya ada 2 ?

    ditunggu update utk dynamic headingnya :)

    BalasHapus
  6. Warning!! SPAM has been detected!

    BalasHapus
    Balasan
    1. http://tipscaradaftar.blogspot.com macannn

      Hapus
  7. bags banget info nya, bermanfaat gan. makasih

    BalasHapus
  8. ijin download kak arlina, thanks beraaat

    BalasHapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  10. This is fantastic! thanks for this love from PkCod

    BalasHapus
  11. cepet mbak, tapi kenapa H1 nya ada 2 ?

    ditunggu update utk dynamic headingnya :) love from PkCod

    BalasHapus
  12. kalo udah komen tampilannya kok berubah yaa?

    BalasHapus
  13. BAGIMAN CAR MENGHAPUS RELATED POST ?

    BalasHapus
  14. mba... kolom komentar nya suka gak muncul, terus di hp juga gak muncul kolom komentarnya... gmn mba?

    BalasHapus
  15. Ijin pakai, masih belajar, silahkan berkunjung dn mohon saran untuk perbaikan https://nanangtjahjono.blogspot.co.id/

    BalasHapus
  16. Komentar ini telah dihapus oleh pengarang.

    BalasHapus