CLOUD WIDGET

 

---------------------------------------------------------------------------------------------------------------------

READ MORE:

http://andi-techno.blogspot.com/2013/03/widget-top-komentator-efek-cloud.html

http://www.blogolect.com/2014/02/customized-flat-ui-labels-cloud-widget.html

---------------------------------------------------------------------------------------------------------------------

How to Customize Labels Cloud widget

Step 1. Add the Default Blogger Label Cloud widget and Configure it like the image below :

Step 2. Hit the Save Button

Step 3. Go to Template and click on Edit HTML Button

Step 4. Search ( Ctrl +F ) for the following tag :

]]></b:skin> 

Step 5. Now copy the below code and paste it just above/before it  ( ]]></b:skin> ).

.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:12px;
  font-family:Open Sans;
  color:#fff!important;
  }

.sidebar .label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}

.sidebar .label-size-1 a {background:#1abc9c;border:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#127F69;border:3px solid #1abc9c;}
.sidebar .label-size-2 a {background:#3498db;border:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#226693;border:3px solid #3498db;}
.sidebar .label-size-3 a {background:#2ecc71;border:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#1F8C4C;border:3px solid #2ecc71;}
.sidebar .label-size-4 a {background:#9b59b6;border:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#74398E;border:3px solid #9b59b6;}
.sidebar .label-size-5 a {background:#e74c3c;border:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#922C20;border:3px solid #e74c3c;}

Step 6. Hit the Save template Button
Congratulations : You've successfully customized your Labels Cloud widget.

---------------------------------------------------------------------------------------------------------------------