Customize Labels Widget with Stylish Cool Effects

Customize Labels Widget with Stylish Cool Effects







  1.  Sign In to Blogger Dashboard
  2. Go to Template -> Edit HTML
  3. Find ]]></b:skin> and copy the code of label style you like above ]]></b:skin>
  4. Save Template
 1.Black Forest Theme Labels With Animated Scaling

.Label li {        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;        border: 1px solid;        border-radius: 6px 6px 6px 6px;        float: left;        font-size: 116%;        list-style: none outside none;        margin: 2px;        padding: 4px;        transition: all 0.3s ease 0s;    }.Label li:hover {    transform: rotate(351deg) scale(1.7);}.Label a {
    color: #fff;    text-decoration: none;}

2. Blue Customized Labels Widget



 .Label li:before {
        background-image: -moz-linear-gradient(center top , #1E5799 0%, #207CCA 100%);
        border-bottom: 1px solid #145091;
        border-left: 1px solid #145091;
        content: "";
        height: 1.39em;
        left: -0.69em;
        position: absolute;
        top: 0.2em;
        transform: rotate(45deg);
        width: 1.3em;
        z-index: 1;
    }
    .Label li:after {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #3F6893;
        border-radius: 4.167em 4.167em 4.167em 4.167em;
        box-shadow: 0 1px 0 #B5D8FF;
        content: "";
        height: 0.5em;
        left: -0.083em;
        position: absolute;
        top: 0.667em;
        width: 0.5em;
        z-index: 9999;
    }
    .Label li {
        background-image: -moz-linear-gradient(center top , #1E5799, #207CCA);
        border-bottom: 1px solid #145091;
        border-radius: 0 0.25em 0.25em 0;
        border-right: 1px solid #145091;
        border-top: 1px solid #145091;
        box-shadow: 0 1px 0 #CCE4FF inset, 0 1px 1px rgba(0, 0, 0, 0.1);
        color: #996633;
        float: left;
        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
        font-size: 0.75em;
        font-weight: bold;
        list-style: none outside none;
        margin: 0 0 7px 20px;
        padding: 0.417em 0.417em 0.417em 0.917em;
        position: relative;
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
        z-index: 1;
    }

3.Colorful Flat UI Labels Cloud


.sidebar .label-size {  position:relative;  text-transform: uppercase;  text-decoration:none;  font-size:13px;  font-family:Open Sans;  color:#fff!important;  }
.sidebar .label-size a {  color:#fff!important;  font-weight:bold;  padding:8px 10px;  margin:0 6px 6px 0;  float:left;  display:block;  -moz-transition: all 0.4s ;  -o-transition: all 0.4s;  -webkit-transition: all 0.4s ;  -ms-transition: all 0.4s ;  transition: all 0.4s ;}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}.sidebar .label-size-1 a:hover {background:#16a085;}.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}.sidebar .label-size-2 a:hover {background:#2980b9;}.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}.sidebar .label-size-3 a:hover {background:#27ae60}.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}.sidebar .label-size-4 a:hover {background:#8e44ad}.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}.sidebar .label-size-5 a:hover {background:#c0392b}

 4. Leaf Theme For Labels Widget


.Label a {     -moz-border-bottom-colors: none;     -moz-border-left-colors: none;     -moz-border-right-colors: none;     -moz-border-top-colors: none;     background-color: #7FBF4D;     background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);     border-bottom-right-radius: 30px;     border-color: #63A62F #63A62F #5B992B;     border-image: none;     border-style: solid;     border-top-left-radius: 30px;     border-width: 1px;     box-shadow: 0px 1px 0px 0px #96CA6D inset;     color: #FFFFFF;     float: left;     font: 14px verdana;     height: 18px;     margin-bottom: 9px;     margin-left: 10px;     padding: 10px;     position: relative;     text-decoration: none;     transition: all 0.5s ease-in-out 0s;}
.Label a:hover {     background: none repeat scroll 0% 0% orange;     border-radius: 0px 30px 0px 30px;     border: 1px solid orange;     text-shadow: 5px 5px 5px #DCDCDC;}
.Label {     margin: 0px;     padding: 0px;     position: relative;}.Label li:hover {
    transform: rotate(5deg);}
.Label li {
    float: left;    font-size: 116%;    list-style: none outside none;    transition: all 0.3s ease 0s;}

5. Skeleton Theme With Painting Hover Effect


.Label a:hover{text-shadow:5px 5px 5px #dcdcdc;background:orange;border:1px solid orange;border-bottom-right-radius: 0px;border-top-left-radius: 0px;border-bottom-left-radius: 30px;border-top-right-radius: 30px;}.Label li {
    border: 1px solid;    border-radius: 6px 6px 6px 6px;    color: #000000 !important;    float: left;    font-size: 116%;    list-style: none outside none;    margin: 2px;    padding: 4px;    transition: all 0.3s ease 0s;}
.Label a {
    color: #000;    text-decoration: none;}
.Label li:hover {
    transform: rotate(5deg);}

6. Yellow Customized Labels Widget


  .Label li:before {
        background-image: -moz-linear-gradient(left top , #FEDA71, #FEBA47);
        border-bottom: 1px solid #D99D38;
        border-left: 1px solid #D99D38;
        content: "";
        height: 1.39em;
        left: -0.69em;
        position: absolute;
        top: 0.2em;
        transform: rotate(45deg);
        width: 1.3em;
        z-index: 1;
    }
    .Label li:after {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #D99D38;
        border-radius: 4.167em 4.167em 4.167em 4.167em;
        box-shadow: 0 1px 0 #FAEABA;
        content: "";
        height: 0.5em;
        left: -0.083em;
        position: absolute;
        top: 0.667em;
        width: 0.5em;
        z-index: 9999;
    }
    .Label li {
        background-image: -moz-linear-gradient(center top , #FEDA71, #FEBA47);
        border-bottom: 1px solid #D99D38;
        border-radius: 0 0.25em 0.25em 0;
        border-right: 1px solid #D99D38;
        border-top: 1px solid #D99D38;
        box-shadow: 0 1px 0 #FAEABA inset, 0 1px 1px rgba(0, 0, 0, 0.1);
        color: #996633;
        float: left;
        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
        font-size: 0.75em;
        font-weight: bold;
        list-style: none outside none;
        margin: 0 0 7px 20px;
        padding: 0.417em 0.417em 0.417em 0.917em;
        position: relative;
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
        z-index: 1;
    } 

 7. Black Forest Theme Label Like NetOops Blog Labels
.Label li {
        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
        border: 1px solid;
        border-radius: 6px 6px 6px 6px;
        float: left;
        font-size: 116%;
        list-style: none outside none;
        margin: 2px;
        padding: 4px;
        transition: all 0.3s ease 0s;
    }
    .Label li:hover {
        transform: rotate(5deg); 
    }.Label a {
    color: #fff;    text-decoration: none;}

 8. Skeleton Theme For Labels Widget
.Label a {    color: #000000;    text-decoration: none;}.Label li {    border: 1px solid #000;    border-radius: 6px 6px 6px 6px;    color: #000000 !important;    float: left;    font-size: 116%;    list-style: none outside none;    margin: 2px;    padding: 4px;    transition: all 0.3s ease 0s;}.Label li:hover {
    transform: rotate(5deg);}
5.set you widget with following setting

Enjoy it and post your reviews

Next
« Prev Post
Previous
Next Post »

About

Hello Guys! My name is Muhammad Talha Zaroon.I am a Student Of Computer System Engineering.I made this blog to share with the others.If you have any demand than tell me.I will try to do my best.

Subscribe to: Post Comments (Atom)