How To Create Labels Widgets For Blogger Blog

HEELO FRIENDS,
Today My Topic is................
HOW TO CREATE LABELS WIDGETS FOR BLOGGER BLOG


                          FOLLOW SOME STEPS
1.) Open Blogger DASBOARD or Select LAYOUT or NEXT ADD GADGET ..



2.) Now Find LABELS WIDGETS or CLICK on LABELS and NEXT Click on CLOUD HIGHLIGHT and last CLICK or SAVE Button.




3.) Go To Blogger DASBOARD OR Select THEME BUTTON or Next EDIT or Press The CTRL+F Buttons or Type This Code ]]></b:skin And press the ENTER 
4.) When You Find This Code Than You Copy All Labels Degines of HTML CODE ONE BY ONE or PASTE into ABOVE This CODE ]]></b:skin



1.)
HTML CODE HERE


.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;
 }

2.)



HTML CODE HERE
.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;
}
3.)




HTML CODE HERE
   .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;


    }


ENJOY FRIENDS















Share this

Related Posts

Previous
Next Post »