Thaheem Software's: Change Blogger Gadget Title Background

Monday, January 13, 2014

How To Add Custom Label Widget With Stylish CSS Effect In Blogger

Add Custom Label With Stylish CSS Effect Blogger

I am write the article about - How to Change Blogger widget title background color - Today i am guide you about that, It is very easy, follow my instruction step by step, you can do this easily.

Lets Start Guys.

Step-1
Log-in To Your Blogger Account,

Step-2
Click on Template,

Step-3
Click on Edit HTML,

Step-4

Now Find The Following Code, ]]></b:skin>
(Hold Ctrl Button, Press F)

Step-5
After Find The Code Past The Below Code in The Box, Before, ]]></b:skin>

Here is The HTML Code

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

Metro Style Code

Here is The HTML Code

Step-6
Now Save Your Template,
That's all done, Enjoy Stylish CSS effect Blogger Label Widget.

Please Share This Article To Friends / Others.

Download Free Mobile Software

Download Free PC Software & Games

NOTE

If You See Any Broken Link Tell Me On Comments.

If You Like This Post Please Share It With Your Friends.

Download Free Antivirus Software for PC

Click To See More Blogger Tips & Tricks

Please Tick in Reactions in The End of Post.

How To Change Gadget Title Background In Blogger Freeware

Change Widget Title Background in Blogger

I am write the article about - How to Change Blogger widget title background color - Today i am guide you about that, It is very easy, follow my instruction step by step, you can do this easily.

Lets Start Guys.

Step-1
Log-in To Your Blogger Account,

Step-2
Click on Template,

Step-3
Click on Customize,

Step-4
Now Click on Advance and Scroll Down, Click on Add CSS,

Step-5
Copy This Code in The Box Below, And Past in CSS Text Box,

Here Is The CSS Code

.sidebar .widget {margin-bottom: 20px;}
.sidebar h2 {
    color: rgb(221, 221, 221);
    font-family: arial;
    font-size: 14px;
    height: 28px;
    line-height: 33px;
    margin-bottom: 10px;
    text-shadow: 1px 1px 1px rgb(0, 0, 0);
    font-weight: bold;
    border-bottom: 4px solid rgb(0, 0, 0);
    border-left: 4px solid #262626;
    padding-left: 5px;
    background:#3A3938;
    border-radius: 3px 3px 3px 3px;

}

.sidebar h2:hover{
    background:#666;
    -webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

.sidebar li {border-bottom: 1px dashed #CCCCCC;margin-bottom:18px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivwOLN2N4dCTJBc6rXCz8j8tO6pm52JxjfUxni9ql-GM3rTAw2UBkvuGCOX9H3K3uUR5iIMAWHrDJ-aCQFLlGd2M_votw-rTQ8sgP-Aoc9y2lnkGI9qyvmwZ0GsUAdGszaZFI0pE9AQ7QU/s400/sidebar-bullet.png) no-repeat left; padding-left:16px;}

Step-6

Now Click on Apply To Blog Button To Save.