Breaking News
Loading...
Sunday, 23 March 2014

How To Resize Cloud Labels Properly in Blogger?


How To Resize Cloud Labels Properly In blogger
Blogger is none less than wordpress in any way, if you understand the complete working system of Blogger you can easily fix out any simple problem and also you can turn it into robust CMS.

Blogger offers the option of labels and also provides a Labels Widget. In this widget you can opt for either Cloud labels or List style labels. You can also create dropdown labels Widget manually.


Read These Tutorial  :  How To create dropdown labels Widget For Blogger?


Suppose if you have installed Cloud Labels Widget In your Blog then you will see something like this.

cloud labels

Some points are clear from the image above that the labels tagged on more number of posts are big in size.

Label#1   Awesome   (10 posts)


Label#2   General   (6 posts)


Label#3   News   (4 posts)


It looks very odd in blog. And we have explored that all the top blogs prefer to have a perfect sized label widget.
So now Let's see How To resize labels size.

Step#1  :  Using Css property


In this step we will be resizing labels using CSS (Cascading Stylesheets).

We are giving you a piece of code just copy-paste it in your Template → Html editor and you'll see very things works out perfect.

CSS

.label-size {font-size:15px;margin-right:5px}
.label-count{display:none}

# What the codes do speak?


.label-size  defines the property of each and every labels of your blog.

We have defined the labels here with font-size:15px and margin-right:5px

This will resize each and every labels to 15px maximum and minimum.

And margin right defines that there will be space of 5px between two labels so that it would not look up messy.

.label-count  defines the property of labels per post. If you don't want to see the number of posts in you cloud labels then you can insert this css property in your blog's Template→Html editor and it will hide.

If you wish it to be shown then simply erase the piece of code
 .label-size{display:none}

After adding this to Html editor of your blog, hit the save button and then preview your labels widget.


Step#2 Editing widgets code

  • Open Blogger Dashboard→ Template→ Html Editor
  • Open Labels Widget 


cloud labels


  • Now Find the following piece of code



  • Delete the highlighted code and save the template.
Congratulations You have successfully edited resized the Cloud labels.

In a Nutshell

This is not a trick, actually it is learning the parts of blog-designing. With this tutorial we have tried to explain some of the elements which are used by blog-designers. Our emphasis has always been on turning our every single reader/visitor into a designer, because today only a designer blog can fight and upstand the tough competition in blogging.

0 comments:

Post a Comment

 
Toggle Footer