It Professional

<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://www.allblogtools.com/tricks-and-hacks/how-to-customize-labels-cloud-in-blogger/" style="background-color: white; color: #26a5da; font-family: Verdana; font-size: 12px; margin: 0px; outline: none; padding: 0px; text-decoration: none;" title="How to Customize Labels Cloud in Blogger"><img alt="How to Customize Labels Cloud in Blogger" class="postmainimage" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAf33doE82XsFKZ_3uJw9jRUE9Mi9BeEWTc8BLkRfdwXDUfZYzvoObdhyphenhyphenOdu7KxTfcb8fO2qWl31qwlrW-9Wz_9ZjnDHzQNvb_zoi3VH5JzkycjIcLb-YsF0BI6pqPtbHld06iinOH2Nk/?imgmax=800" style="background: rgb(235, 246, 248); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 1px solid rgb(143, 143, 143); margin: 10px 0px 0px 24px; padding: 5px 25px;" width="320" /></a> 
 
<div style="background-color: white; color: #7d7d7d; font-family: Verdana; font-size: 12px; padding: 0px;">
Labels Cloud enables users to use a dynamic menu, and it has become very popular as a website add-on. In this featured trick, <a href="https://plus.google.com/107381172453188253394" style="color: #26a5da; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">Mohammad Mustafa Ahmedza</a><a href="https://plus.google.com/107381172453188253394" style="color: #26a5da; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank"> i</a> shows you how to customize labels cloud in Blogger that will turn the random cloud display into blocks.</div>
<div style="background-color: white; color: #7d7d7d; font-family: Verdana; font-size: 12px; padding: 0px;">
 </div>
<ol style="background-color: white; color: #7d7d7d; font-family: Verdana; font-size: 12px; margin: 0px; padding: 0px;">
<li style="margin: 0px; padding: 0px;">Go to Blogger Dashboard > Settings > Layouts</li>
<li style="margin: 0px; padding: 0px;">Click Add a Gadget > Labels</li>
<li style="margin: 0px; padding: 0px;">Select Cloud Display once you’re inside the settings.</li>
<li style="margin: 0px; padding: 0px;">Choose to display 25 labels at most because too much would look awkward.</li>
<li style="margin: 0px; padding: 0px;">Save widget. Go to Settings > Template</li>
<li style="margin: 0px; padding: 0px;">Backup your template.</li>
<li style="margin: 0px; padding: 0px;">Click Edit HTML > Proceed then look for:</li>
</ol>
<pre style="background: rgb(237, 247, 249); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma, Arial; font-size: 12px; margin-bottom: 15px; margin-top: 15px; max-height: 400px; overflow: auto; padding: 10px; width: 548.4375px;">]]></b:skin>
Paste the code provided below just above the code in no. 6
/*-----Custom Labels Cloud widget by www.MyBloggerTricks.com----*/
.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; 
}</pre>
<div style="background-color: white; color: #7d7d7d; font-family: Verdana; font-size: 12px; padding: 0px;">
8. Save template</div>
<div style="background-color: white; color: #7d7d7d; font-family: Verdana; font-size: 12px; padding: 0px;">
Note: If you want the label boxes to be random sizes, delete font-size:10px; from the code provided above.</div>
</div>

How to Customize Labels Cloud in Blogger

Labels Cloud enables users to use a dynamic menu, and it has become very popular as a website add-on. In this featured trick, Mohammad...

+ Read more »