Hallo Sobat My Zozieman kali ini saya akan memberikan beberapa widget keren untuk menghiasi blog Anda silahkan disimak satu-satu yah
Popular Post style 1
/***** Popular Post Widget for Blogger *****/
.sidebar .popular-posts ul {counter-reset: popcount;padding: 0;margin: 0;}
.sidebar .popular-posts ul li {float: left;position: relative;overflow: hidden;list-style: none !important;border: 0;height: 130px;width: 100%;font-family: “Oswald”,sans-serif;font-weight: bold;margin: 2px;padding: 0px !important;}
.sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;}
.sidebar .PopularPosts ul li img {display: block;float: left;width: 100%;height: 130px;padding: 0;transition:1.0s;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;}
.sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);}
.sidebar .PopularPosts .item-title {position: absolute;padding-bottom: 0;z-index: 999;right: 0;left: 0;bottom:0;}
.sidebar .PopularPosts .item-title a {display: block;background: rgba(32, 32, 32, 0.77);font-family: “Oswald”,sans-serif;font-weight: bold;font-size: 16px;line-height: normal;color: #FFFFFF;text-transform: capitalize;padding: 10px 0px 5px 10px;transition: all .4s ease-in-out;}
.sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;}
.sidebar .popular-posts ul li:before {counter-increment: popcount;content: counter(popcount, decimal);position: absolute;list-style-type: none;background: rgba(255, 252, 8, 1);float: left;color: #000;line-height: 20px;font-size: 14px;padding: 0px 8px 1px 1px;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;border: solid #FFF;top: 0;z-index: 4;}
Popular Post Style 2
/***** Popular Post Widget for Blogger *****/
.sidebar .popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;}
.sidebar .popular-posts ul li {list-style: none !important;float: left;font-family:’Oswald’,Arial,Tahoma,sans-serif;position: relative;width: 48%;height: 130px;overflow: hidden;margin: 2px;padding: 0 !important;border: 0;}
.sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;}
.sidebar .PopularPosts ul li img {float: left;display: block;height: 130px;width: 100%;padding: 0;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;transition:1.0s;}
.sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);}
.sidebar .PopularPosts .item-title {position: absolute;right: 0;left: 0;bottom:0;padding-bottom: 0;z-index: 999;}
.sidebar .PopularPosts .item-title a {display: block;padding: 5px 0px 2px 5px;background: rgba(32, 32, 32, 0.77);text-transform: capitalize;font-size: 12px;color: #fff;line-height: normal;transition: all .4s ease-in-out;}
.sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;}
.sidebar .popular-posts ul li:before {counter-increment: popcount;float: left;position: absolute;content: counter(popcount, decimal);list-style-type: none;background: #e2e2e2;top: 0;font-size: 14px;color: #000;line-height: 20px;padding: 0px 8px 1px 1px;z-index: 4;border: solid #FFF;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;}
Popular Post Style 3
/***** Popular Post Widget for Blogger *****/
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:”1″}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:”2″}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:”3″}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:”4″}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:”5″}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:”6″}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:”7″}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:”8″}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:”9″}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
Popular Post Style 4
/***** Popular Post Widget for Blogger *****/
#PopularPosts1 ul{width:300px;counter-reset:li;left:-7px;padding:8px 0px 1px;list-style:none;}
#PopularPosts1 li .item-title{float:right!important;}
#PopularPosts1 li{left:5px;width:95%;position:relative;margin:0 0 10px 0;padding: 3px 2px 0 17px;}
#PopularPosts1 ul li{position:relative;display:block;margin: .5em 0;*padding: .2em;background:#ddd;padding: .4em .2em .4em 1em;transition: all .3s ease-out;border-radius: .3em;text-decoration: none;}
#PopularPosts1 ul li:before{position:absolute;background:#000;color:#fff;content: counter(li);counter-increment: li;margin: -1.3em;left: 0;top: 50%;width: 2em;border: .2em solid #fff;height: 2em;border-radius: 2em;font-weight: bold;font-size: 15px;text-align: center;line-height: 2em;box-shadow: 0 8px 5px -7px #888;-moz-box-shadow: 0 8px 5px -7px #888;-webkit-box-shadow: 0 8px 5px -7px #888;transition: all .3s ease-out;}
#PopularPosts1 ul li:hover:before{transform: rotate(360deg);}
#PopularPosts1 ul li:hover{background: #eee;}
#PopularPosts1 ul li a img{width:25%; float:left; }
#PopularPosts1 ul li .item-title {width:68%; float:right; margin-top:-15px; margin-right:15px;}
#PopularPosts1 ul li a{min-height:25px;color:#444;display:block;font: 14px Georgia, serif;text-decoration:none;text-transform:uppercase;text-shadow: 0 -1px 2px #fff;}
#PopularPosts1 ul li a:hover{color: #444;}
Popular Post Style 5
/***** Popular Post Widget for Blogger *****/
.popular-posts ul{padding-left:0px;}
.popular-posts ul li a{color:#000; text-decoration:none; font-size:14px;}
.popular-posts ul li .item-title{float:right; width:70%;}
.popular-posts ul li {list-style-type: none;background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd8NNej1qO-9Hd6SAT3MKudC_kHW_6lZrpb3zpYbEPJXKMHvDPH8wGWd7PkR2ObLgXPjfbOjkKnvrHTVPngsLAt2Qsa91r56xwwquLMwJM13fbvplIwyxSEg-xjXOJ3y3lVP8nKAAyKefW/s1600/bo-pp-arrow.gif) no-repeat scroll 5px 10px;border: 1px solid #ddd;padding:5px 5px 5px 20px !important;margin:0 0 5px 0px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
.popular-posts ul li:hover {border:1px solid #6BB5FF;}
.popular-posts ul li a:hover {text-decoration:none;}
.popular-posts .item-thumbnail img {float:left; width:80px; border-radius: 100px;-moz-border-radius: 100px;webkit-border-radius: 100px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);}
Popular Post Style 6
/***** Popular Post Widget for Blogger *****/
.popular-posts{background:#f6f6f6; margin:5px; margin-top:-5px;}
.popular-posts ul{border-radius:3px; box-shadow:0 3px 4px 3px #999; font-size:10pt;margin:0 auto;padding:0}
.popular-posts ul li{border:1px solid #3b95bf; background:#f6f6f6;background:linear-gradient(135deg,#3b95bf 0,#f4f8ff 20%,#d1edff 85%,#3b95bf 100%); line-height:2em;list-style-type:none;margin:0;overflow:hidden;padding:10px 20px!important; margin-bottom:1.5px;}
.popular-posts ul li:hover{background:#c9d5ea;background:linear-gradient(135deg,#f4f8ff 0,#3b95bf 50%,#3b95bf 50%,#f4f8ff 100%);}
.popular-posts ul li a{padding:10px 20px;margin:-10px -20px;display:block}
.popular-posts a{font-weight:bold; font-style:italic; color:#111; text-decoration:none; font-size:16px;}
.popular-posts a:hover{color:#555;}
#PopularPosts1 h2{display:none;}Sumber : mybloggerguides
Widget Follow by Email di Sidebar Blogger
/* Follow by Email */
.FollowByEmail .follow-by-email-inner {
position: relative;}
.follow-by-email-inner {
background: none repeat scroll 0 0 #222;
padding: 15px;}
.follow-by-email-inner:before {
color: #c9c9c9;
content: "Get Our Latest Articles Delivered to Your Email Inbox. It's Free!";
font-family:sans-serif,arial;
font-size: 12px;
font-weight: normal;
padding: 0px 0px 0px 2px;}
.FollowByEmail .follow-by-email-inner .follow-by-email-address{
border: 1px solid #f0f0f0;
font-size: 13px;
height: 28px;
padding-left: 8px;
width: 100%}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
background: #f24024;
border: 0 none;
color: #FFF;
cursor: pointer;
font-size: 11px;
height: 28px;
margin: 0 3px;
width: 80px;
z-index: 0;}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover {
background: #f24024;
border:none !important;
box-shadow:none !important;
border-radius:none !important;
filter: alpha(opacity=60);
opacity: 0.9;
cursor:pointer}Sumber : contohblog
Label Katagori Style 1
/* Label */
.label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5 {
font-size: 100%;
opacity: 10;}
.cloud-label-widget-content {text-align: left}
.label-size {
background-color: #56b8e2;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #ffffff;
font-size: 11px;
text-transform: uppercase;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;}
.label-size a, .label-size span {
display: inline-block;
color: #ffffff!important;
padding: 6px 8px;
font-weight: bold;}
.label-size:hover {background-color: #333333}
.label-size:hover .label-count {background-color: #56b8e2}
.label-size:hover .label-count:before {border-right: 6px solid #56b8e2}
.label-count {
position: relative;
white-space: nowrap;
padding-right: 3px;
margin-left: -2.5px;
background-color: #333333;}
.label-count:before {
content: "";
width: 0;
height: 0;
border: 0 solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-right: 6px solid #333333;
position: absolute;
top: 8px;
left: -6px;}
Label Katagori Style 2
/* CSS label */
#sidebar-wrapper .Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #f1f1f1;transition:all .3s ease-out;}
#sidebar-wrapper .Label li:hover {background:#fff;color:#ef4824;}
#sidebar-wrapper .Label li:before {content:"\f105";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;
color:#666;transition:all .3s ease-out;}
#sidebar-wrapper .Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#ef4824;}
#sidebar-wrapper .Label li a {color:#666;font-size:95%;transition:all .3s ease-out;}
#sidebar-wrapper .Label li a:hover {color:#ef4824;}
#sidebar-wrapper .Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-size:12px;transition:initial;border-radius:2px;}
#sidebar-wrapper .Label li span:hover{background-color:#ef4824;color:#fff}
#sidebar-wrapper .label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-size:13px;border:1px solid #e6e6e6;transition:all 0.3s;}
#sidebar-wrapper .label-size:hover{background:#ef4824;border-color:#b69c6c;}
#sidebar-wrapper .label-size a {display:inline-block;color:#444;padding:8px 10px;
font-weight:400;}
#sidebar-wrapper .label-size a:hover {color:#fff;}
#sidebar-wrapper .label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#444;transition:initial;}
#sidebar-wrapper .label-size a:hover:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}Label Katagori Style 3
.cloud-label-widget-content {
text-align: left;}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #fff;
font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;}
.label-size:nth-child(1) {
background: #F53477;}
.label-size:nth-child(2) {
background: #89C237;}
.label-size:nth-child(3) {
background: #44CCF2;}
.label-size:nth-child(4) {
background: #01ACE2;}
.label-size:nth-child(5) {
background: #94368E;}
.label-size:nth-child(6) {
background: #A51A5D;}
.label-size:nth-child(7) {
background: #555;}
.label-size:nth-child(8) {
background: #f2a261;}
.label-size:nth-child(9) {
background: #00ff80;}
.label-size:nth-child(10) {
background: #b8870b;}
.label-size:nth-child(11) {
background: #99cc33;}
.label-size:nth-child(12) {
background: #ffff00;}
.label-size:nth-child(13) {
background: #40dece;}
.label-size:nth-child(14) {
background: #ff6347;}
.label-size:nth-child(15) {
background: #f0e68d;}
.label-size:nth-child(16) {
background: #7fffd2;}
.label-size:nth-child(17) {
background: #7a68ed;}
.label-size:nth-child(18) {
background: #ff1491;}
.label-size:nth-child(19) {
background: #698c23;}
.label-size:nth-child(20) {
background: #00ff00;}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;}
.label-size:hover {
background: #222;}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;}
Label Katagori Style 4
/* CSS label */
.label-size{ margin:0; padding:0; position:relative; } .label-size a , .label-size span{ float:left; height:24px; line-height:24px; position:relative;font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; } .label-size a:before , .label-size span::before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent;border-style:solid; border-width:12px 12px 12px 0; } .label-size a:after , .label-size span::after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px;height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover , .label-size span::hover { background:#555;} .label-size a:hover:before , .label-size span::hover::before{border-color:transparent #555 transparent transparent;}
Label Katagori Style 5
.label-size{
display: inline-block;
padding: 0px 10px;
height: 29px;
line-height:29px;
border-radius: 5px;
font-weight:bold;
font-size:12px;
text-decoration:none;}
.label-size{
border: 1px solid #769e42;
box-shadow: inset 0 1px 0 #c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #6ea23b;
color: #fff;
background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);}
.label-size:hover{
background-color: #b7fa66;
background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);}
.label-size:active{
background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);}
.label-size{
display:inline-block;
border-radius: 5px 0 0 5px;
border-right-width:0;
position:relative;
z-index:5;
margin-right: 20px;
margin-bottom: 10px;}
.label-size:after{
content: " ";
width: 22px;
height: 22px;
line-height: 18px;
font-size:25px;
border-top: 1px solid #769e42;
border-right: 1px solid #769e42;
box-shadow: inset 0 1px 0 #c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #7eac46;
border-radius: 3px 7px 3px 0;
color: #fff;
background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
position:absolute;
top: 3px;
right: -12px;
z-index:-3;
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(45deg); /* FF3.5+ */
-ms-transform: rotate(45deg); /* IE9 */
-o-transform: rotate(45deg); /* Opera 10.5 */
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
zoom: 1;}
.label-size:hover:after{
background-color: #b7fa66;
background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);}
.label-size:active:after{
background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);}
.label-size:before{
content: " ";
height:5px;
width:5px;
display:block;
position:absolute;
right:-3px;
top:11px;
background-color: #fcfdf5;
border: 1px solid #83ab52;
border-radius:5px;
box-shadow: 0 1px 0 #b2ddd83;}
.label-size span{
padding:2px 5px;
border: 1px solid #9e5c26;
border-radius: 5px;
box-shadow: inset 0 1px 0 #f5bf8c;
background-color: #ed943f;
text-shadow: 0px 1px 1px #000;
margin-left: 10px;
background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);}
#Label1 {height:210px !important;}.
Label Katagori Style 6
/* Labels */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{border:5px dashed #000000;border-bottom-right-radius:30px;border-top-left-radius:30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase} .label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:hover{border:5px dashed #FA0830;background:#000000} .label-count{white-space:nowrap;border-bottom-right-radius:30px;border-top-left-radius:30px;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}
Label Katagori Style 7
/* Labels */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{border:8px inset #0572F8;background:#0572F8;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase} .label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:hover{background:#000000} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}
Label Katagori Style 8
/* Labels */
.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:left;padding:10px;}
.label-count {background:#fff;white-space:nowrap;display:inline-block;padding:5px 7px;margin-right:3px;border:1px solid #FF9934;border-radius:4px;}
.label-count:hover {background:#fafafa;color:#222;border-radius:4px}
.Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #eee;transition:all .3s ease-out;}
.Label li:hover {background:#fff;color:#FF9934;}
.Label li:before {content:"\f105";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;
color:#666;transition:all .3s ease-out;}
.Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#29abe2;}
.Label li a {color:#666;transition:all .3s ease-out;}
.Label li a:hover {color:#FF9934;}
.Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:12px;transition:initial;border-radius:2px;}
.Label li span:hover{background-color:#FF9934;color:#fff}
.label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;border:1px solid #FF9934;transition:all 0.3s;border-radius:5px;}
.label-size:hover{background:#FF9934;border-color:#FF9934;}
.label-size a {display:inline-block;color:#444;padding:8px 10px;
font-weight:400;}
.label-size a:hover {color:#fff;}
.label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#444;transition:initial;}
.label-size a:hover:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.Label li:hover {color:#29abe2;}
.Label li a {color:#aaa;transition:all .3s ease-out;}
.Label li a:hover {color:#29abe2;}
.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:13px;font-weight:400;border-radius:2px;}
.Label li span:hover{color:#29abe2}
.label-size{background:#fff;color:#fff;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;transition:all 0.4s;}
.label-size a {display:inline-block;color:#fff;padding:8px 10px;
font-weight:400;transition:initial;}
.label-size a:hover {background:#29abe2;color:#fff;transition:all 0.2s;}
label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#fff;transition:initial;}
.label-size a:hover:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
.label-size:hover, #footer-wrapper-inner .label-size:hover{background:#29abe2;color:#fff;transition:initial;}
.label-count {background:#333;}
Label Katagori Style 9
/* CSS cloud label */
.cloud-label-widget-content {margin:15px 0 0;position:relative}
.label-size{background:#46506f;position:relative;margin:0 4px 3px 0;padding:0;font-size:12px;transition:all 0.3s;display:inline-block;text-transform:uppercase;height:28px;color:#fff;border-radius:2px;overflow:hidden}
.label-size a{color:inherit;text-decoration:none;font-weight:normal;padding:0 12px;margin:0;height:28px;line-height:28px;}
.label-count{font-size:10px;display:inline-block;background:#2d3759;color:#fff !important;transition:all 0.3s;white-space:nowrap;padding:0 5px;height:28px;line-height:27px;}
.label-size:hover{background:#333}
.label-size:hover .label-count{background:#222}
/* CSS list label */
.list-label-widget-content ul {padding:0 !important;margin:15px 2px 0!important;list-style:none !important;position:relative}
.list-label-widget-content li{position:relative;width:49%;display:inline-block}
.list-label-widget-content li a{color:#46506f;background:#fff;padding:5px;padding-left:10px;font-size:14px;border-radius:3px;border:1px solid #ddd;box-shadow:4px 0 0 #ddd inset;display:inline-block;margin-bottom:10px;}
.list-label-widget-content li a:hover{border-bottom:none;border:1px solid #C3C3C3;color:#2d3759}
.list-label-widget-content li span{font-size:11px;background:#eee;padding:5px;border-radius:2px}
.list-label-widget-content li:hover span{background:#46506f;color:#fff}
Label Katagori Style 10
/*CSS Label*/
.Label a{ padding-left: 5px; padding-right: 31.5px; color: #fff; height: 32px; background: #359bed; margin-right: 2px; line-height: 32px; text-decoration: none; -webkit-transition: all .3s ease-in-out !important; float: left; margin-top: 2px; font-size: 13px; text-align: left; display: inline-block; border: 1px solid transparent; border-radius: 3px; } .Label a:hover{ background:none; border: 1px solid #545454; border-radius:3px; color:#222; } .Label a:after{ content: ""; position: absolute; width: 0px; height: 0px; border-width: 16.5px; border-style: solid; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent; }
Label Katagori Style 11
Label Katagori Style 12
/*CSS Label*/
.label-size{display:block;float:left;background:#555!important;margin:0 1px 1px 0;color:#eee;font-size:100%}.label-size a:hover,.label-size span:hover,.label-size:hover{background:#3384ff}.label-size a,.label-size span{display:inline-block;color:#fff;padding:4px 4px}
Label Katagori Style 13
/*CSS Label*/
.Label a{ padding-left:20px; background:#FFA500; padding:0 20px; color:#000!important; border-radius:100px; -moz-border-radius:100px; height:17px; line-height:17px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000!important; background:#fff; }
Label Katagori Style 14
/* Label kelap-kelip */
.Label a{margin:0 11px 6px 0;padding:5px 5px 0 5px;background:#222;-moz-box-shadow:0 0 5px #000;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;opacity:.5;text-transform:uppercase;border-radius:5px;float:left;text-decoration:none;height:24px;line-height:24px;color:rgba(0,0,0,.6);text-shadow:2px 2px 3px rgba(255,255,255,.1);font:14px 'Arial black';letter-spacing:3px;-moz-animation-name:seociyusdisko;-moz-animation-duration:2s;-moz-animation-timing-function:linear;-moz-animation-delay:.5s;-moz-animation-iteration-count:infinite;-moz-animation-direction:alternate;-moz-animation-play-state:running;-webkit-animation-name:seociyusdisko;-webkit-animation-duration:2s;-webkit-animation-timing-function:linear;-webkit-animation-delay:.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;-webkit-animation-play-state:running;-o-animation-name:seociyusdisko;-o-animation-duration:2s;-o-animation-timing-function:linear;-o-animation-delay:.5s;-o-animation-iteration-count:infinite;-o-animation-direction:alternate;-o-animation-play-state:running}@keyframes seociyusdisko{0%{background:red}25%{background:#ff0}50%{background:#00f}100%{background:green}}@-moz-keyframes seociyusdisko{0%{background:red}25%{background:#ff0}50%{background:#00f}100%{background:green}}.Label a:hover{position:relative;animation:seociyushover .5s infinite;-moz-animation:seociyushover .5s infinite;-webkit-animation:seociyushover .5s infinite;-o-animation:seociyushover .5s infinite}@keyframes seociyushover{from{left:0}to{left:10px}}@-moz-keyframes seociyushover{from{left:0}to{left:10px}}@-webkit-keyframes seociyushover{from{left:0}to{left:10px}}@-o-keyframes seociyushover{from{left:0}to{left:10px}}
Label Katagori Style 15
/*CSS Label*/ .Label a{ padding-left:20px; background:#00FFFF; padding:0 20px; color:#000!important; border-radius:100px; -moz-border-radius:100px; height:17px; line-height:17px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important; background:#fff; }
Label Katagori Style 16
/*CSS Label*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{border-radius:30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase} .label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:hover{border-radius:30px;background:#333333} .label-count{white-space:nowrap;border-radius:30px;padding-right:3px;margin-left:-3px;background:#333333;color:#fff!important} .label-size{line-height:1.2}
Label Katagori Style 17
/*CSS Label*/
.label-size{margin:0 2px 6px 0;padding:3px;text-transform:uppercase;border:solid 1px #adff2f;border-radius:3px;float:left;text-decoration:none;font-size:10px;color:#666}.label-size:hover{border:1px solid #6bb5ff;text-decoration:none;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);zoom:1}.label-size a{text-transform:uppercase;float:left;text-decoration:none}.label-size a:hover{text-decoration:none}
Label Katagori Style 18
/* Label */
.label-size{margin:0 2px 6px 0;padding:3px;text-transform:uppercase;border:solid 1px #c6c6c6;border-radius:3px;float:left;text-decoration:none;font-size:10px;color:#666;display:inline-block;float:none;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-style:normal;font-weight:700;text-decoration:none;background-color:#1ba1e2;color:#fff!important;-webkit-text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;-moz-text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;-o-text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;-webkit-box-shadow:0 0 1px #999;-moz-box-shadow:0 0 1px #999;-o-box-shadow:0 0 1px #999;box-shadow:0 0 1px #999;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:-webkit-transform .1s ease-in;-moz-transition:-moz-transform .1s ease-in;-o-transition:-o-transform .1s ease-in;transition:transform .1s ease-in}.label-size:hover{color:#fff;background-color:#0c92da;-webkit-box-shadow:0 0 20px #000032;-moz-box-shadow:0 0 20px #000032;-o-box-shadow:0 0 20px #000032;box-shadow:0 0 10px #000032;-webkit-transform:rotate(3deg) scale(1.2);-moz-transform:rotate(3deg) scale(1.2);-o-transform:rotate(3deg) scale(1.2);transform:rotate(3deg) scale(1.2);zoom:1}.label-size a{display:inline-block;float:none;margin:2px 1px;padding:6px 3px;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-style:normal;font-weight:700;text-decoration:none;background-color:#252c44;color:#fff!important;-webkit-text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;-moz-text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;-o-text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;text-shadow:rgba(0,0,0,.2) 1px 0,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.2) -1px 0,rgba(255,255,255,.2) 0 -1px,rgba(0,0,0,.2) 1px 1px,rgba(255,255,255,.2) -1px -1px;-webkit-box-shadow:0 0 1px #999;-moz-box-shadow:0 0 1px #999;-o-box-shadow:0 0 1px #999;box-shadow:0 0 1px #999;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:-webkit-transform .1s ease-in;-moz-transition:-moz-transform .1s ease-in;-o-transition:-o-transform .1s ease-in;transition:transform .1s ease-in;background-color:#252c44;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);background-color:#252c44;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);background-color:#252c44;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}
Label Katagori Style 19
/* Label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:10}.cloud-label-widget-content{text-align:left}.label-size{background:#0dd7b4;display:block;float:left;margin:0 3px 3px 0;color:#fff;font-size:11px;text-transform:uppercase}.label-size a,.label-size span{display:inline-block;color:#fff!important;padding:6px 8px;font-weight:700}.label-size:hover{background:#333}.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333;color:#fff!important}.label-size{line-height:1.2}
Label Katagori Style 20
/*CSS Label*/
#sidebar-wrapper .Label li{position:relative;background:#fff;border-bottom: 1px solid #bbb;color:#444;padding:0;margin:0;text-align:left;width:100%;font-size:90%;transition:all .3s ease-out}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;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 10px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out}
#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{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;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:400;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s}
#sidebar-wrapper .label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-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}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}
#sidebar-wrapper .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}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;border-radius:2px;}Sumber : lk21
Thumb Pic : belajarkuh.com
0 Comment:
Posting Komentar