Turn Random Cloud Display into Blocks | Stylish Cloud Label

How it works?

Each label link is nested inside a span tag followed by a class named label-size. If the font-size is not specified the widget changes font-size of each label according to its post-count. Therefore showing big and small clouds. Introducing custom styles would over-ride the existing styles thus changing the entire look. 

Steps to Implement

The code below can be customized in several ways to create exciting label designs.

 Step 1:  Go to Blogger>Settings>Layout

 Step 2:  

Click add a gadget and choose Labels

 Step 3:  Now inside the settings make sure you choose Cloud Display option

See the screenshot below as an example

 Step 4:  Now save the template and back it up somewhere

 Step 5:  Now go to Blogger>Settings>Template
 Step 6:  Now click on Edit HTML

See the screenshot below as an example

 Step 7:  Now Search for ]]></b:skin>

 Step 8:  Now paste the following code just above it

/*-----Custom Labels Cloud widget by Techetarian----*/ .label-size{ margin:0 2px 6px 0; padding: 2px; text-transform: uppercase; border: solid 1px #0101DF; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #FF0000; text-decoration: underline; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out;   -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: underline; }

 Step 9:  Now save your template
 Step 10:  All done, Enjoy!