New Css Tag Cloud For Blogger [iBloggr Master style]

I am Posting after a Long Time because of My Exams. Well today i am going to share with you a very Nice

Css Based tag cloud for Bloggers.You just Have to add a Style Sheet in your Blogger Blog and or in Your Website And you are Done.

This tag cloud Style also seen On Labnol Tech blog So Lets Spice up your Blog.
follow Simple Steps Only.

How to Install Css Tag Cloud For Blogger
   

1- Go To Template - Edit Template and Add this Style sheet in Head Section.

/* Tags */ .tagcloud { line-height:24px; margin:5px 4px 0 0 } .tagcloud a,.almeros_tags a { display:inline-block; float:none; font-family:"Trebuchet MS","Arial","Helvetica",sans-serif; font-style:normal; font-weight:700; text-decoration:none; background-color:#ec745c; color:#fff !important; -webkit-text-shadow:rgba(0,0,0,0.2) 1px 0 0 1px -1px 0 0 -1px 1px 1px -1px -1px; -moz-text-shadow:rgba(0,0,0,0.2) 1px 0 0 1px -1px 0 0 -1px 1px 1px -1px -1px; -o-text-shadow:rgba(0,0,0,0.2) 1px 0 0 1px -1px 0 0 -1px 1px 1px -1px -1px; text-shadow:rgba(0,0,0,0.2) 1px 0 0 1px -1px 0 0 -1px 1px 1px -1px -1px; -webkit-box-shadow:0 0 1px #999; -moz-box-shadow:0 0 1px #999; -o-box-shadow:0 0 1px #999; box-shadow:0 0 1px #999; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:0 0.1s ease-in; -moz-transition:0 0.1s ease-in; -o-transition:0 0.1s ease-in; transition:transform 0.1s ease-in; margin:2px 1px; padding:2px 3px } .tagcloud a:hover,.almeros_tags a:hover { background-color:#0c92da; -webkit-box-shadow:0 0 20px #000032; -moz-box-shadow:0 0 20px #000032; -o-box-shadow:0 0 20px #000032; box-shadow:0 0 10px #000032; -webkit-transform:rotate(3deg) scale(1.2); -moz-transform:rotate(3deg) scale(1.2); -o-transform:rotate(3deg) scale(1.2); transform:rotate(3deg) scale(1.2) } .tagcloud a:nth-child(2n),.almeros_tags a:nth-child(2n) { background-color:#ff9f51; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } .tagcloud a:nth-child(2n):hover,.almeros_tags a:nth-child(2n):hover { -webkit-transform:rotate(-3deg) scale(1.2); -moz-transform:rotate(-3deg) scale(1.2); -o-transform:rotate(-3deg) scale(1.2); background-color:#0c92da; transform:rotate(-3deg) scale(1.2) } .tagcloud a:nth-child(4n),.almeros_tags a:nth-child(4n) { background-color:#9ab9e4; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } .tagcloud a:nth-child(4n):hover,.almeros_tags a:nth-child(4n):hover { -webkit-transform:rotate(3deg) scale(1.2); -moz-transform:rotate(3deg) scale(1.2); transform:rotate(3deg) scale(1.2); background-color:#0c92da } .tagcloud a:nth-child(5n),.almeros_tags a:nth-child(5n) { background-color:#9ab9d4; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } .tagcloud a:nth-child(5n):hover,.almeros_tags a:nth-child(5n):hover { -webkit-transform:rotate(2deg) scale(1.2); -moz-transform:rotate(2deg) scale(1.2); background-color:#0c92da; -o-transform:rotate(2deg) scale(1.2); transform:rotate(2deg) scale(1.2) } a.download{ color:#777; font:11px verdana; text-transform:uppercase; transition:border-color .218s; background:#f4f4f4; background:-webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1)); display:inline-block;text-shadow:0 1px 0 #fff; -webkit-transition:border-color .218s; -moz-transition:border .218s; -o-transition:border-color .218s; transition:border-color .218s; background:#f3f3f3; background:-webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1)); background:-moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1)); border:solid 1px #ccc; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px;margin:0 4px 4px 0;padding:3px 5px;text-decoration:none } a.download:hover{ color:#333; border-color:#999; -moz-box-shadow:0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow:0 1px 2px rgba(0,0,0,0.15) } a.download:active{ color:#000; border-color:#444 }

 2 - Now Save You Template and Go to Layout Section.
 3 - Now Add Widget By clicking Button Below.
 

4 - After Adding Select Area where you want to Show Labels cloud.
5 - Save Your template and Enjoy.!!


I Hope You will Like My Work Share and Comment Below in comment Form .