1058 followers
Follow us on Twitter!
260 followers
Join us on Facebook!
Customize Labels Cloud in BloggerA CSS3 Tag Widget for Blogger Blog for free with Tutorial how to install it on your blog easyliy and this widget will make your blogger blog totally fancy and stylish get the source file here you will never see these before today on any other website so what are you waiting for lets go the mess with it.
Tested in Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8 (and newer)
CSS3 Fancy and Stylish Tags Widget For Blogger:
Here How to Install CSS3 Tag Widget for your Blogger Blog and Make your blog very stylish:
Step:1
Got to Blog Dashboard > Layout > Add HTML/JavaScript - Where you Want to Place on your Blog
Step: 2
Past the Following Code in it!
<style>
.tags {
zoom: 1;
}
.tags:before, .tags:after {
content: '';
display: table;
}
.tags:after {
clear: both;
}
.tags li {
position: relative;
float: left;
margin: 0 0 8px 12px;
}
.tags li:active {
margin-top: 1px;
margin-bottom: 7px;
}
.tags li:after {
content: '';
z-index: 2;
position: absolute;
top: 10px;
right: -2px;
width: 5px;
height: 6px;
opacity: .95;
background: #eb6b22;
border-radius: 3px 0 0 3px;
-webkit-box-shadow: inset 1px 0 #99400e;
box-shadow: inset 1px 0 #99400e;
}
.tags a, .tags span {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tags a {
height: 26px;
line-height: 23px;
padding: 0 9px 0 8px;
font-size: 12px;
color: #555;
text-decoration: none;
text-shadow: 0 1px white;
background: #fafafa;
border-width: 1px 0 1px 1px;
border-style: solid;
border-color: #dadada #d2d2d2 #c5c5c5;
border-radius: 3px 0 0 3px;
background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0);
background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0);
background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0);
background-image: linear-gradient(to bottom, #fcfcfc, #f0f0f0);
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tags a:hover span {
padding: 0 7px 0 6px;
max-width: 40px;
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.tags span {
position: absolute;
top: 1px;
left: 100%;
z-index: 2;
overflow: hidden;
max-width: 0;
height: 24px;
line-height: 21px;
padding: 0 0 0 2px;
color: white;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
background: #eb6b22;
border: 1px solid;
border-color: #d15813 #c85412 #bf5011;
border-radius: 0 2px 2px 0;
opacity: .95;
background-image: -webkit-linear-gradient(top, #ed7b39, #df5e14);
background-image: -moz-linear-gradient(top, #ed7b39, #df5e14);
background-image: -o-linear-gradient(top, #ed7b39, #df5e14);
background-image: linear-gradient(to bottom, #ed7b39, #df5e14);
-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
-webkit-transition-property: padding, max-width;
-moz-transition-property: padding, max-width;
-o-transition-property: padding, max-width;
transition-property: padding, max-width;
}
.green li:after {
background: #65bb34;
-webkit-box-shadow: inset 1px 0 #3a6b1e;
box-shadow: inset 1px 0 #3a6b1e;
}
.green span {
background: #65bb34;
border-color: #549b2b #4f9329 #4b8b27;
background-image: -webkit-linear-gradient(top, #71ca3f, #5aa72e);
background-image: -moz-linear-gradient(top, #71ca3f, #5aa72e);
background-image: -o-linear-gradient(top, #71ca3f, #5aa72e);
background-image: linear-gradient(to bottom, #71ca3f, #5aa72e);
}
.blue li:after {
background: #56a3d5;
-webkit-box-shadow: inset 1px 0 #276f9e;
box-shadow: inset 1px 0 #276f9e;
}
.blue span {
background: #56a3d5;
border-color: #3591cd #318cc7 #2f86be;
background-image: -webkit-linear-gradient(top, #6aaeda, #4298d0);
background-image: -moz-linear-gradient(top, #6aaeda, #4298d0);
background-image: -o-linear-gradient(top, #6aaeda, #4298d0);
background-image: linear-gradient(to bottom, #6aaeda, #4298d0);
}
</style>
<ul class="tags">
<li><a href="http://www.windowsroded.blogspot.com/search/label/Android%20Apps">Android Apps <span>4</span></a></li>
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Antivirus">Antiviruses<span>8</span></a></li>
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Blogger%20Templates">Blogger Templates<span>15</span></a></li>
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Blogging">Blogging<span>16</span></a></li>
</ul>
<ul class="tags green">
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Books">Books<span>23</span></a></li>
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Cracks">Cracks <span>42</span></a></li>
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Drivers">Drivers <span>108</span></a></li>
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Games">Games <span>12</span></a></li>
</ul>
<ul class="tags blue">
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Hacking">Hacking <span>31</span></a></li>
<li><a href="http://www.windowsreloded.blogspot.com/search/label/How%20To%20Do%20That">How to do that <span>33</span></a></li>
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Movies">Movies <span>65</span></a></li>
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Personalization">Personalization <span>160</span></a></li>
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Players">Players <span>160</span></a></li>
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Serials">Serials <span>160</span></a></li>
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Softwares">Softwares <span>160</span></a></li>
<li><a href="http://www.infotechblogging.info/search/label/Tools">Widget Generators <span>160</span></a></li>
<li><a href="http://www.windowsreloded.blogspot.com/search/label/Windows">Microsoft Windows <span>160</span></a></li>
</ul>
Step:3
Congratulations you are done!
0 comments: