Customize Cloud Label In Blogger

Blogger Tricks,Blogging Tutorials,How To,

Rate this posting:

{[['']]}

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

Hello friend's, today we are going to customise the label widget in blogger. By default cloud label widget seems to tedious. So to make it clean we are going to add a simple css code. Thus the cloud label widget will look clean and your blog looks professional. Here is the snapshot of customize cloud label widget:



Now we are going to customize this cloud label widget:

Customize Cloud Label Widget For Blogger

Add Css Code

• Go to Blogger Dashboard>>Template>>Edit HTML
• Now press ctrl+f and find ]]></b:skin>
• After ]]></b:skin> paste the given code below:
  .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #6BB5FF; text-decoration: none; -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(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); 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: none; }
  
• Now save your template and you are done.

HAPPY BLOGGING!

Get Free Updates in your Inbox

Follow us on: