تغيير شكل التسميات لشكل جميل | الشكل الاول

/* CSS label by http://sh7na.blogspot.com/ */
.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}
.widget-content.list-label-widget-content {padding:0;}
.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:right;padding:10px;}
.label-count {white-space:nowrap;display:inline-block;}
.Label ul {list-style:none !important;margin:15px 0 0;padding:0;width:100%}
.Label li{position:relative;background:#f5f5f5;color:#444;padding:0;margin:0;text-align:right;max-width:100%;font-size:90%;transition:all .3s ease-out;border:none !important}
.Label li:nth-child(even) {background-color:#fff;}
.Label li:hover {background:#fff;color:#cf4d35;}
.Label li:before {content:"";position:absolute;width:0;height:100%;background:#f35858;transition:all .2s ease-in-out;}
.Label li:hover:before {width:100%;}
.Label li a{padding:0 10px 0 0;border-right:5px solid #f35858;display:block;position:relative;line-height:42px !important;color:#787878;text-decoration:none;transition:all .3s ease-out;font-weight:normal !important}
.Label li a:hover {color:#fff !important}
.Label li span{float:left;height:42px;line-height:42px !important;width:42px;text-align:center;display:inline-block;background:#999;color:#FFF;position:absolute;top:0;left:0;z-index:2}
.Label li:nth-child(even) > span {background:#aaa}
.label-size{position:relative;display:block;float:right;margin:0 0 4px 4px;font-size:17px;transition:all 0.3s;}
.label-size a{background:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);display:inline-block;color:#444;padding:5px 8px;font-weight:normal !important;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s}
.label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;left:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}
.label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}
.label-size a:hover{color:#444;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);background-position:0 0}