Sweet looking tags, eh? lets get down to the code. Click the image for a live demo.
1st Step - The PHP:
PHP:
<ul id="sliding-tags">
<?php
$tags = get_tags();
foreach ( (array) $tags as $tag ) {
?>
<li><?php echo '<a href="' . get_tag_link ($tag->term_id) . '" rel="tag">' . $tag->name . ' </a><span>' . $tag->count . '</span></li>'; ?>
<?php }
?>
</ul>Add this where you want the tag cloud to show, sidebar maybe?
2nd Step - the CSS:
PHP:
#sliding-tags li {
float: left;
margin: 0 5px 5px 0; //** Change this to increase/decrease the spacing between tags. **//
}
#sliding-tags li a {
background: url("http://www.wjunction.com/images/tagbg.png") repeat-x scroll 0 0 transparent;
border-left: 1px solid #CAC7C7;
border-radius: 3px 0 0 5px;
color: #3F3F3F;
float: left;
font-family: Open Sans,Helvetica,Arial,sans-serif;
font-size: 10px;
font-weight: 700;
height: 22px;
padding: 3px 7px 0;
position: relative;
}
#sliding-tags li span {
background: url("http://www.wjunction.com/images/tagslide.png") repeat scroll 0 0 transparent;
color: #FFFFFF;
float: left;
font-weight: 700;
height: 20px;
margin-top: 1px;
padding: 1px 0;
text-align: center;
width: 33px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; //** Change these values to change the speed of the animation. **//
}
#sliding-tags li:hover > span {
margin-left: -6px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; //** Change these values to change the speed of the animation. **//
}The code is pretty simple, you can play with it as you see fit. If you want this tagcloud as a plugin, head over to WpFreebies and download it.
Last edited:
