Attractive Cloud Label Widget for Blogger

We can change our blog performances as we want like changing blogger template, customizing label widget, modifying blog content width etc.  Although some bloggers do not care about blog design & its user friendliness. We all like to maintain our blog beautifully, also readers would like to visit an attractive site, if they didn't meet such sites, and they will definitely close the window directly. After few weeks ago I rendered you attractive CSS cloud label style for your blog. This time after learning new things, I coded new cloud label style and added it to my blog.It looked like good. So i thought to present  this cloud label style to my readers.

What are new features on this Cloud label style?

You might meet some new items on this cloud label style, if you used it. Some of them are listed in below.

I. Define different colors for label name and label post counter( see image )
II. When mouse over on label name, it changes its preferences and on mouse out, it revert itself. But post counter does not render any hovering effect, because it is not a hyperlink.
III. Next and my best feature is, it does not change its background color and approach to an ugly design. When any person find posts under a special label, lets tell it is ‘Widgets’, he/she will see the visited link (Widget label link) in another design.

Demo: - Look below stylish cloud label style. You can see how it will appear with post counter and without.

How is works?

Each label link is nested in a class name called “label-size”. If font-size, link color, hovering effects are not specified, they will change to default post styles. So defining each class name in label gadget, we can make a beautiful cloud label style.

Install cloud Label Widget on Blogger

First of all you have to install cloud label style on your blogger blog, if you have done, make sure you convert block labels into cloud label style.

Step 1: Sign in to your Blogger account.
Step 2: Go to Dashboard >> Layout >> Add a Gadget.

Step 3: Now click on “Labels” page element from pop up window.

Step 4: Then turn display style to “Cloud” as shown below. Please select as most 25-30 labels(Selected Labels). If blogger let you to add 2000 labels to a blog, you can’t display such amount of label links on your blog. Too many labels on your blog will look awkward.

Step 5: Save your “Labels” page element.

Integrate new cloud Label style to Blogger

Now you just need to do is pasting some piece of CSS code to your template. Let’s see how to do it.

Step 1: Go to ‘Template’ and backup your template.
Step 2: Now click on ‘Edit HTML’ button and find below code in your template.

]]></b:skin>

Step 3: Just above of ]]></b:skin> code, paste below piece of code directly.

.label-size {
margin:2px 6px 2px 3px;
padding:7px 8px;
text-decoration:none;
text-transform:uppercase;
float:left;
border:1px solid #AEBABA;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
font-weight:bold;
font-style:normal;
color:#B7831B;
background:rgba(180,215,214,0.80);
font-size:13px;
}
.label-size:hover {
border:1px dotted #AEBABA;
-moz-box-shadow:inset 0 0 2px 2px rgba(189,225,224,0.35);
-webkit-box-shadow:inset 0 0 2px 2px rgba(189,225,224,0.35);
box-shadow:inset 0 0 2px 2px rgba(189,225,224,0.35);
text-decoration:underline;
-moz-transition:all 1000ms linear 150ms;
-webkit-transition:all 1000ms linear 150ms;
-ms-transition:all 1000ms linear 150ms;
-o-transition:all 1000ms linear 150ms;
transition:all 1000ms linear 150ms;
}
.label-size a {
text-decoration:none;
float:left;
text-transform:uppercase;
-moz-transition:all 1750ms ease-out 15ms;
-webkit-transition:all 1750ms ease-out 15ms;
-o-transition:all 1750ms ease-out 15ms;
-ms-transition:all 1750ms ease-out 15ms;
transition:all 1750ms ease-out 15ms;
}
.label-size a:hover {
color:#FCC442;
text-decoration:underline;
-moz-transition:color 1s ease,text-decoration 1.5s cubic-beizer;
-webkit-transition:color 1s ease,text-decoration 1.5s cubic-beizer;
-o-transition:color 1s ease,text-decoration 1.5s cubic-beizer;
-ms-transition:color 1s ease,text-decoration 1.5s cubic-beizer;
transition:color 1s ease,text-decoration 1.5s cubic-beizer;
}

• Change 13px with font size that suit for your template.
• Replace 7px 8px with your lengths which specify the height and width of label link box.

Step 4:  Last Save your Template.

You’re done. Now view your template and see how label widget is hanging in your blog beautifully.


Need help…?

Friends, I present this tutorial as simple as you can understand. If you meet any error or can’t understand how to implement this cloud label style, just leave a comment in below.

How to Display Post counter in Label as Title

We use Labels or tags to categorize posts.Adding labels to posts is quite simple in blogger.When time is going,your blog might have many posts under each labels.You can show how many posts are including in each label by using Label post counter.But if you see it looks like label counter making your site ugly,then you have to remove the label post counter from your labels.This is mostly happening in templates that has cloud label style label gadget.In a past post i explained you how you can display label names as the title of label links.So in this tutorial, I use that method for showing the number of posts under each label on label gadget.

1: Sign in to your Blogger account.
2: Go to Dashboard >> Template and back up your current template.
3: Then Click on "Edit HTML" button and find below code on Template editor.

 <b:loop values='data:labels' var='label'>

You will see piece of code appearing followed by above code slightly similar to one below..

<b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection'  expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>

4: Remove above code from your template and paste with below code.

<b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:title="data:label.count" expr:href='data:label.url' ><data:label.name/></a>
          </b:if>
        </li>
      </b:loop>

5: Now Save your Template.

That's alright.View your blog and hover on a label link of Label gadget.You will see the number of posts appearing nearby the label link.

How to Style Label links and Counter Using CSS

We can use CSS(Cascading-Style-Sheet) styling language to change the appearances of label links.Blogger accommodates us to edit the template and customize it as we want.So i thought to use CSS for changing the font styles and colors of label links in label widget.You can make this activity very easily if you're a coding dude.Look at the image in left side.I changed the font family style,color and font-size of label name.Also i modified the color of label post counter.If you need to change them as your desire you can do it very easily.So lets start our journey to Blogger for styling label links and counter.




1: Sign in to your Blogger account.
2: Now go to Dashboard >> Template and backup your template first.In case you got any thing wrong,downloaded template is the only one assistance to reinstall your current template.
3: Click on "Edit HTML" button and find below piece of code in your template.

<b:loop values='data:labels' var='label'>

After you found above code,you will see a portion of code appearing followed by above code slightly similar to one below.

<b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:title="data:label.name" expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>

 4: Now Replace above code with below chunk of code.

<b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' style="font-size:20px;font-weight:bold;color:green;font-family: 'Brush Script MT', cursive;" expr:title="data:label.name" expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span style="color:red;" dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>

As i mentioned in above,i just changed some performances of label links.You can add borders,text shadows and further effects using CSS. Add your CSS code in the green color codes.

5: After you made changes,Save your Template.

If you didn't add any own CSS code, Links of label widget will look like above image.

Check : Hide Author Name in Blogger Posts

Need Help ?

Want any help to make your own label gadget ? So leave a comment below.I will help you as time allows me :-o

Display Label Name as Title of Label Link in Label Gadget

Displaying the Label name as label title is sometimes useful for readers.If the label name is too long and it is showing as Cloud label display style,showing label name as the title is important.It will make your blog user friendly blog.Here in this tutorial i will help you to display Label name as the title of each label link. You can find more posts under Labels from this link.Now follow below instructions to show the Label name as the title when anyone hover on.




Step 1: Sign in to your blogger account.
Step 2: Now go to Dashboard >>Template and download your current template first.In case you got anything wrong in template,this downloaded template will help you to recover bugs what you made.
Step 3: Then click on "Edit HTML" button and find below code in your template.

<b:loop values='data:labels' var='label'>

After you found above code,you will see a block of code followed by above code slightly similar to one below.

<b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>

 Step 4: Now replace above code with below code.

<b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:title="data:label.name" expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>

Step 5: Save your Template.

You're done.View your blog and hover on a label link in Label gadget.You can see the name of label is appearing as the title of link like above image.

Check: How to Display Post counter in Label as Title

If you have any question,let me to know by commenting below.Happy blogging buddies :)

How to Add Feed link button Before Labels in Label Gadget

We use Labels in blogspot blogs to classify posts for our and user convenience.In my last post i explained you how to add feeds for labels.If you missed that tutorial,i suggest you to read it.Because this tutorial is the second part of that tutorial.In this tutorial i add a Feed link button before all labels in Label gadget.Look at image.The process of this task is quite easy.I just added a feed icon that linked to feeds of your site's tags or labels.By clicking on feed link button,user will be concentrated to feeds of label. I'm trying to present this tutorial as easy as i can.If you get any question,let me know below from commenting.Now follow below instructions consecutively for adding feed link in to Label widget on your blog.

Adding Feed Link Button

Note:- Before adding Feed link button,your blog must be added Label widget.Else you can't follow below steps correctly.So make sure you have added Label widget on your blog.

Step 1: Sign in to your Blogger account.
Step 2: Now go to Dashboard >>  Template and download your template first.This will help you to re-install your current template,if you get anything wrong.
Step 3: Click on "Edit HTML" button and find below code on your template.

<b:loop values='data:labels' var='label'>

You will see a block of code followed by above code often similar to below.

<b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>

Step 4: Now replace above code with below code.

<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

Step 5: Now Save your Template.

 You're done.Refresh your blog and see the feed link button appearing before of label links.Happy blogging pals :)

How to add Feeds for Labels in Blogger

This tutorial is another valuable one for bloggers who use Feedburner for integrating the feeds.In my last post i explained with you 'How to Add Links of Labels to web page easily'. I think that you got a basic knowledge how to add label links on blogger and customize them from that tutorial.Today i'm going to show you how you can add Feeds for Labels in blogspot blogs.The process of adding feeds for tags is quite simple and can be done with using couple of clicks.

Normally your site's feed address is looking like this:

http://MyBlogName.blogspot.com/feeds/posts/default

Example :-  http://bestlodge.blogspot.com/feeds/posts/default

So lets separate posts under Labels and their feeds.Then the structure will like below,

http://MyBlogName.blogspot.com/feeds/posts/default/-/labelname

Example :-  http://bestlodge.blogspot.com/feeds/posts/default/-/widget

Show Latest Post feeds under Label in blogger

If you want to add latest feeds of posts under any label on your blog,follow below steps.

1: Sign in to your blogger account.
2: Now go to Dashboard >>Layout and click on "Add a Gadget" link.
3: Search "Feed" page element and click on it.

4: Now type your Feed address of label in the space give and click on "Continue" button like below.

5: Then customize your feed settings and click on Save button.


You're done.View your blog and see the Feed widget appearing on the sidebar.

How to Add Links of Labels to web page easily

Here in this short tutorial,you will learn how to add links of Labels in your blog on any page. Anchor texts or Hypertext are frequently used in every site. As you're a blogger you can add attractive images,different types of subscription links,Social sharing links,Videos and more features in your blog.Including more relevant  links in your blog within blog posts and static pages,link juice will be high without you know.It is very important, If you think to rank higher in SERP. I'm not going to say more stuff. Lets do our work.

Your blogspot blog address will look like this.

http://MyBlogName.blogspot.com/

example:- http://bestlodge.blogspot.com/

If you use a custom domain name it should like this,

http://www.MyBlogName.com/

If you have set the Label option on your blog,Links of each label are similar to the one below.

http://MyBlogName.blogspot.com/search/label/Label-Name

Example:- http://bestlodge.blogspot.com/search/label/Widget

If any label name include space,you must use %20 instead of adding spaces.

http://MyBlogName.blogspot.com/search/label/Label%20Name%20Of%You

Example:- http://bestlodge.blogspot.com/search/label/Widget%20For%20Blogger

How to set maximum Posts that appear when clicking on Label link

This trick is useful information for you.You know that sometimes we have to limit the number of posts that is appeared when anyone click on Label links.We can do this matter easily.Easy work but good results :p

http://MyBlogName.blogspot.com/search/label/Label-Name?max-results=10

Example:- http://bestlodge.blogspot.com/search/label/Widget?max-results=10

Click below link and in new window you will see only one post appears under Widget label.

                                                           Widgets For Blog

That's all.If you know more information about linking Labels in web pages,share your valuable knowledge with us.We will include them on this tutorial as soon as we got comments from you.

I have covered some topics on Label widget in my past posts.Some of them are below.

• How to add Labels on your Blog posts
• How to add New Label for set of Posts
• Activate the cloud label display style in your blog
• How to display Labels without counter in blogger ?

Happy blogging buddies :)

Change Number of Posts appearing when clicking on Label

Labels are such an important item using in every blog.Some blogs have large number of posts under several categories.These labels are displaying in the blog post by default.You can hide label tag on your blog posts.But you will not hide them from your blog post or hide label widget on your blog.Label tag is one of linking methods.You can increase your blog's page views by adding label tag in appropriate positions.You might read "How to set number of posts in FEED easily" post in this blog.You'll find out how you can change the number of posts appearing in feed content.I used that trick on blogger label widget and got amazing result.If one label of your blog include large number of posts,you can set the maximum number posts to be displayed  when clicking on the label link.It is very helpful for many readers in the globe.They can view posts under labels without spending more time.When you minimize the number of posts,the time to spend for loading the label result page will be minimum.For example click on below link which is linked to Posts under "Widgets" label.It will open in a new tab and show only 8 posts.

Posts under Widgets

Here in this tutorial you will learn how to set the amount of posts must be appeared when clicking on label tab link( In blog posts,mostly below of post ) or label link of Label gadget.

How to set the number of Posts which appear when clicking on Label links

Step 1: Sign in to your Blogger account.

Step 2: Now go to Blogger Dashboard >> Template and download your template first.It is important to re-install your current template,if you got anything wrong.

Step 3: Click on 'Edit HTML' button and  find below code on your template.

<b:loop values='data:post.labels' var='label'>

You will find piece of code slightly similar to the one below.

<b:loop values='data:post.labels' var='label'>
                                            <a expr:href='data:label.url' rel='tag'>
                                              <data:label.name/>
                                            </a>
                                            <b:if cond='data:label.isLast != &quot;true&quot;'>
                                              ,
                                            </b:if>
                                          </b:loop>

Step 4: Now replace above code with below code.

<b:loop values='data:post.labels' var='label'>
                                            <a expr:href='data:label.url + "?max-results=8"' rel='tag'>
                                              <data:label.name/>
                                            </a>
                                            <b:if cond='data:label.isLast != &quot;true&quot;'>
                                              ,
                                            </b:if>
                                          </b:loop>

Change 8 with your desired number of posts which you want to open when anyone click on label links.

Note:- If you don't use Label widget on your blog, you're all done.But if you use label widget on your blog,you have to set its settings too.So then continue next steps,if you have added Label widget on your blog.

Step 5: Search below code on your template in order to find code of label widget.

type='Label'

Also you can find your blog's Label widget code by clicking on "Jump to Widget" drop down button and select on your blog's Label widget id.
After finding above code using any method,click on sideway arrow to expand the widget code.You'll see chunk of code slightly similar to one give below.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>            <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
          </b:widget>

Step 6: Replace above code with below code.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
            <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url+ "?max-results=8"'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
          </b:widget> 

In my case the ID of Label widget is the Label1. So you have to replace your label widget id with blue color text.In most of times these Ids are equal to each templates.

Step 7: Now Save your Template.

You're done.
Have any question? So don't hesitate,ask your questions below commenting.
Do you like this tutorial?Want to get more tutorial in to your mailbox?Subscribe now to get FREE updates..Happy blogging pals :)