A Simple Blogger Tag Cloud Widget

Introduction

If you are like me who wants to keep his blog simple yet elegant then this widget is right for you! Just follow these simple steps and you're good to go!

Features

Lightweight CSS
SEO friendly
Fully Customizable
Flat Design
Responsive

External Scripts
No EScripts needed.

HTML
No HTML needed.

Adding the widget
Go to Blogger » Layout » Add a Gadget » and Choose Labels
*make sure you selected Cloud and unchecked show number of posts..
Click Save, then Save Arrangement

CSS

Go to Blogger » Template » Backup your Template » and Edit HTML
 Search for ]]></b:skin> then copy the following code above it

.widget-content.list-label-widget-content ul li a{float:left;background-color:#00aa9f;padding:6px 10px;margin:1px;color:#fff!important;font-size:82%;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.widget-content.list-label-widget-content span{display:none!important}.widget-content.list-label-widget-content ul li a:hover{text-decoration:none;background-color:#008d84;color:transparent!important;text-shadow:0 0 3px #fff!important}.widget-content.list-label-widget-content ul:hover{color:transparent!important}.widget-content.list-label-widget-content ul li span{float:right;overflow:hidden;margin:7px 0 0;display:inline;color:#6f7584}.widget-content.list-label-widget-content ul li a:before{font-family:'FontAwesome';font-weight:400;font-style:normal;text-decoration:none;content:"\f02b";float:left;margin:0 6px 0 0;display:block!important;opacity:.5}.widget-content.list-label-widget-content{padding:10px 20px}

Save your Template

JScript
No script needed.

Final Words

 Edit #00aa9f to change the background color; and
 Edit #008d84 to change the background color when hovered.

That's it! Enjoy an elegant cloud label. Let me know if you're facing any problems installing this widget. Enjoy blogging!

Thanks to @mybloggeraide

Share this post