Styling Label Cloud Bloggger

Label is one of the navigation part on your blog. When you have a lot of the content post on each categories of your blog, label as categories of the post content will look so crowded. Blogger have provided an options to label on the basic widget. In the label configuration, there are two types of the style label that was provided, such as list display and cloud display. The display of the labels cloud arranged according to the width of sidebar on your template that you use.

By default Label cloud of your blog is very unsightly, i think we need to make the ​​style as the label display. The Picture above is an example of the style of the label that was created. If you in expert with css certainly you can make the label cloud look more interesting. For now here I will explain how to set up the Label cloud on your blog, then add the style to so that the label cloud of content category that you have look more impressive.

Go to your blog dashboard, then click the layout and add a gadget in the position to be placed. I guess you have already familiar with it. Then go to the picture below, find the Labels as a Basic Gadget of blogger. Then on the Configure Labels, Content Title filled by Category, Show: All labels, Sorting: is up to you to set the order, Display : Cloud, if it is finished and then press save button.

 

After this process, you do not immediately get a display of the label like above, but it will show a label with text links arranged according to the width of gadget on your blog template, from the left to the right and down depending on your format template, as shown as the picture below.

Well this is where the necessary of the understanding and expertise in using css script to create a style that looks more attractive and harmony with your template. Here I will give you the script of CSS style of the label cloud like the picture at the top as an example for you.

/*--- agratitudesign.blogspot.com Custom Label Cloud --- */
.label-size{
 margin:0;
 padding:0;
 position:relative;
 }
.label-size a{
 float:left;
 height:24px;
 line-height:24px;
 position:relative;
 font-size:12px;
 margin-bottom: 9px;
 margin-left:20px;
 padding:0 10px 0 12px;
 background:#d2ac67;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px;
 border-bottom-right-radius:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-right-radius:4px;
 border-top-right-radius:4px;
 }
.label-size a:before{
 content:"";
 float:left;
 position:absolute;
 top:0;
 left:-12px;
 width:0;
 height:0;
 border-color:transparent #d2ac67 transparent transparent;
 border-style:solid;
 border-width:12px 12px 12px 0;
 }
.label-size a:after{
 content:"";
 position:absolute;
 top:10px;
 left:0;
 float:left;
 width:4px;
 height:4px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 background:#fff;
 -moz-box-shadow:-1px -1px 2px #000000;
 -webkit-box-shadow:-1px -1px 2px #000000;
 box-shadow:-1px -1px 2px #000000;
 }
.label-size a:hover{
 background:#642A29;font-family: Tahoma, Arial, Helvetica, Sans-Serif;
 text-decoration: none;
 color: #FFFFFF;
 }
.label-size a:hover:before{
 border-color:transparent #642A29 transparent transparent;font-family: Tahoma, Arial, Helvetica, Sans-Serif;
 text-decoration: none;
 color: #FFFFFF;}