How To Add Cloud Label Widget In Blog

By -

Hey Guys, Welcome Back To Computerlearningz Tutorials, Today We Will Add Label Cloud Widget To Blogger Blog, This Is Only CSS Code Which You Have To add In Blogger template Section And Threw This You Can Customize Your Label Design As You Like, Sometime It’s Necessary To Change Some Widget CSS Code For Add Suitable Widget To Your Template So This Is One Part Of That Widgets Because You Can Fully Customize This Widget As You Like In Blogger Blog, You Can Change Any Widget Code As You Like In CSS Part Of Blogger For Better Look Because When You Are Doing Blogging As A Profession Stage You Must Have To Change Design Of Your Custom Blog Design To Attract Peoples To Your Blog.

So Let’s Begin, Before Adding This Widget In Blogger You Must Have To Do Some Changes In Your Blog And They Are Below,


You Must Have To Select Cloud Widget In Blogger Blog Widgets And How To Add This So See, If you Have Already Added Any Type Of Label Widget in Blogger Then Open It And Save Settings 

DEMO
After That See Below Steps To Add This CSS Code To Customise Cloud Widget Of Your Blog,

Step 1 :- Go To “Blogger” Dashboard And Open “Template” Section.

Step 2 :- In Template Section Click On “Edit HTML“.


Step 3 :- Now, Check On “Expand Widget Templates” And Press Ctrl + F And Find “]]></b:skin>“, Just Before It Paste Following Code,

/*—-Cloud Labels Widget by www.computerlearningz.net—-*/
#Label1 a{float: left;
    font-size: 12px!important;
    line-height: 1.0em!important;
    display: block;
    margin-right: 6.9px;
    margin-bottom: 6.9px;
    padding: 6.9px;
    background: #7848e0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHX6TQkoFpvrhPxzaU2-f1RHN3Yr6YU8rqHc0LSGEzAOIvBrHMliMnM2itLM00Gp3l97hyphenhyphenM3sMUk7UznAZmUEbPW9UifcJoCuhZ3Cv4fMV6s9f2NzMZiAhyOgq7G-RtGiXdmCoEeL9AB4g/s30/cbtcloudw.png);
    border: 1px solid #e35016;
    color: #7848e0!important;
    text-shadow: 1.0px 1.0px 0.0px rgba(254,254,254,0.4);
    box-shadow: 1.0px 1.0px 1.0px 0px rgba(0,0,0,0.1);
    webkit-border-radius: 3.0px;
    -moz-border-radius: 3.0px;
    border-radius: 3.0px;
}
#Label1 a:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGxXQDeEhMbyodsc-TU4DalHxmxXr82WFIbePyT4jbrM7-txgIGX-JWjM43p4sAWu0HywSxoGJKZ4uTjYn0ImlSIbrXHJqhNLs7ylrwLHgTgkf8tYYhUw6tvdGw_tw3pt-cn2KyijgBBQA/h120/cbtcloudw1.png);}
#Label1 a:active { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhshwSaby1frpTvpIV2JNIYAvft73ni0OYg7rBx3q19K07HxxyA-Y7AayVEa3dhoiBjUvx-YmNvr-OxO6xYo3s3AYEvJ_-KZFTL8IOUbv2a5a268_-6la4epBRasbk01tmdRVmAA210ymk7/h120/Chtika.png;) }

After Insert This Code You Can See Like This,


Note :-

  • Here You Can Customize All Things Like Color Of This Widget And Height, Width, Hover Color And Many Things With Simple HTML.

Step 4 :- Now Just Click On “Preview” All Is Right Then Click On “Save Template“.

That’s All Now See Your Blog, If You Didn’t Add Label Widget In Blog Then You Can’t See This Widget So First you Have To Add Your Default Cloud Widget in Blogger Blog Threw “Layout” Section And “Add A Gadget” Now You Can See Your Widget In Your Blog.

Comments

Post a Comment

Popular posts from this blog