How to Customize Label in to Cloud Label in Blogger

How to Customize  Label in to Cloud Label in Blogger

We are starting back our journey with Latest and Spicy Cloud Label Widget tips and tricks. Today we are showing how to Customize Our Web Blog Label In Cloud Format with Beautiful Color. We are also giving to you a Video Tutorial for Learning Purpose that related to how to customize Cloud Label and Font Size Setting in Blogger Template with  beautiful color. After Understanding Our Video Tutorial You will be a genius in the Customize of Cloud Label Setting .

See Our:   Tutorial Video

Now Learn How to Custom Cloud Label Setting In Blogger Template

In every Blogger have categorized posts that are Good for blog health. If you do not think about then you will lose traffic. There is a huge traffic in every Clean and beautiful Blog. So You Must Try Custom Cloud Label Setting in Blogger Template.

Learn How to Customize Cloud Label:

Just Follow Step to Setting

1. Go to your Blogger Account and Sign IN

2. Now go to Blog Dashboard> Layout

3. And then Select and add a gadget then

4. Choose Label and Open Label Window then Select Display as Cloud and Save It

Now Original tips and tricks, Again Follow Steps Carefully.

• A.   First Go to Your “Blogger Template”
• B.   Then Click on “Edit HTML Button” and then
• C.   Find this Key  by (Ctrl+ F Button ) ]] ></b:skin> code on your htmlTemplate
• D.   And Paste below code  before ]]></b:skin>

/*--------Cloud Label from www.dynamotricks.blogspot.com ------------*/

.label-size {

    margin:2px 6px 2px 3px;

    padding:5px 6px;

    text-decoration:none;

    text-transform:uppercase;

    float:left;

    border:1px solid #AEBABA;

    -moz-border-radius:2px;

    -webkit-border-radius:2px;

    border-radius:2px;

    font-weight:bold;

    font-style:normal;

    color:#B7831B;

    background:rgba(180,215,214,0.80);

    font-size:8px;

    }

    .label-size:hover {

    border:1px dotted #AEBABA;

    -moz-box-shadow:inset 0 0 2px 2px rgba(189,225,224,0.35);

    -webkit-box-shadow:inset 0 0 2px 2px rgba(189,225,224,0.35);

    box-shadow:inset 0 0 2px 2px rgba(189,225,224,0.35);

    text-decoration:underline;

    -moz-transition:all 1000ms linear 150ms;

    -webkit-transition:all 1000ms linear 150ms;

    -ms-transition:all 1000ms linear 150ms;

    -o-transition:all 1000ms linear 150ms;

    transition:all 1000ms linear 150ms;

    }

    .label-size a {

    text-decoration:none;

    float:left;

    text-transform:uppercase;

    -moz-transition:all 1750ms ease-out 15ms;

    -webkit-transition:all 1750ms ease-out 15ms;

    -o-transition:all 1750ms ease-out 15ms;

    -ms-transition:all 1750ms ease-out 15ms;

    transition:all 1750ms ease-out 15ms;

    }

    .label-size a:hover {

    color:#FCC442;

    text-decoration:underline;

    -moz-transition:color 1s ease,text-decoration 1.5s cubic-beizer;

    -webkit-transition:color 1s ease,text-decoration 1.5s cubic-beizer;

    -o-transition:color 1s ease,text-decoration 1.5s cubic-beizer;

    -ms-transition:color 1s ease,text-decoration 1.5s cubic-beizer;

    transition:color 1s ease,text-decoration 1.5s cubic-beizer;

    }

You Can Customize Font and Color according your Choice. We mentioned in above code with RED Color Highlight,

You can Change Font Size 8px to 10 or less or more

You can Change Color by Photoshop Color Code See Picture Below.

You can Change According Your Choice that which color do you want. This is also Working in Adsense Color Code. you can choose your favorite Code in Google AdSense Code.

Read: How to Hyperlink Comment in Blogger/WordPress