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 CSSSEO friendly
Fully Customizable
Flat Design
Responsive
External Scripts
No EScripts needed.Live Demo
Demo not available.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 HTMLSearch 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}JScript
No script needed.Final Words
Edit #00aa9f to change the background color; andEdit #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!
Rate This Article
Thanks for reading: A Simple Blogger Tag Cloud Widget, Stay tune to get latest Blogging Tips.