Thứ Sáu, 18 tháng 8, 2017

Label Column

<style>
body#layout .footer-widget-box ul {
    padding: 0;
}
.footer-widget-box {
float: left;
margin-right: 2%;
width: 240px;
text-align:center;
}
.footer-widget-box .widget-content {
margin: 0 0 15px 0;
line-height: 20px;
font-size: 14px;
}
.footer-widget-box.footer-widget-box-last {
margin-right: 0px!important;
}
.footer-widget-box {
margin-top: 10%;
width: 100%;
}
.footer-widget-box ul {
padding: 0px;
margin: 0px;
}
.footer-widget-box ul li {
list-style: none;
display: block;
}
#top-social-profiles .widget-container {
background: none;
padding: 0;
border: 0;
}
.widget-container {
    list-style-type: none;
    list-style: none;
    margin: 0 0 15px 0;
    padding: 0;
    color: #374142;
    font-size: 13px;
}

.widget-container2 {
    list-style-type: none;
    list-style: none;
    margin: 5px 15px 10px 0px;
    padding: 0;
    color: #374142;
    font-size: 13px;
}
#rsidebar-wrapper {
width: 290px;
float: right;
margin: 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper{margin-right:10px;margin-left:-10px;max-width:240px;}
#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}
</style>
<div class='footer-widget-box' id='sidebar-wrapper'>
<ul class='widget-container'>
<li>
<div class='footersec section' id='footersec2'><div class='widget Label' data-version='1' id='Label1'>
<h2>Labels</h2>
<div class='sidebar section' id='sidebartab3'><div class='widget Label' data-version='1' id='Label1'>
<ul>
<li>
<a dir='ltr' href='http://www.searchtools.top/search/label/1-Columns'>1-Columns</a>
<span dir='ltr'>(2)</span>
</li>
<li>
<a dir='ltr' href='http://www.searchtools.top/search/label/2-Columns'>2-Columns</a>
<span dir='ltr'>(4)</span>
</li>
<li>
<a dir='ltr' href='http://www.searchtools.top/search/label/3-Columns'>3-Columns</a>
<span dir='ltr'>(9)</span>
</li>
<li>
<a dir='ltr' href='http://www.searchtools.top/search/label/4-Columns'>4-Columns</a>
<span dir='ltr'>(8)</span>
</li>
<li>
<a dir='ltr' href='http://www.searchtools.top/search/label/5-Columns'>5-Columns</a>
<span dir='ltr'>(4)</span>
</li>
<li>
<a dir='ltr' href='http://www.searchtools.top/search/label/D%E1%BB%8Bch%20v%E1%BB%A5'>Dịch vụ</a>
<span dir='ltr'>(1)</span>
</li>
</ul>
</div>