Add Simple Custom Labels in Blogger Blog

Hey People

Today I'm gonna give you a method to add Simple but Highly Customizable labels in Blogger Blog. These Labels will have higher customizability than original Blogger Labels widget & you'll have more control in them.

Note: This article has been updated & the way, mentioned, has been tested... it still works.

Photo By smarnad, freedigitalphotos.net

We'll make use of un-ordered list in html codes, to add them. Also in these labels, you can easily limit the number of Blog posts displayed in Labels page. It'll make your blog faster & you would not require any template customizations to limit number of posts displayed per Label page, or even even adding them.



THE PROS & CONS OF THIS

1. Well Original Blogger labels widget supports only 2 kinds of ordering in labels, Alphabetically & by Frequency.
Whereas in this widget, you can specify Labels according to your own order.

2. You cannot limit the number of posts displayed per page (in Labels Pages), using the original Blogger Labels, without template customizations.

But with the widget/gadget, I'm gonna show you now, you can easily edit/limit the number of posts displayed per page in Labels pages, without template customization.

3. These Labels have also been optimized to support numbered page navigation, if you've added it to Blogger.
Generally many Labels err in supporting numbered page navigation, that is added to Blogger Blog.

4. Another very good advantage of using these, is that you can add simple Text too in between these labels.

The only major con, that I found in this method is that without Manual Work, one is unable to add post-count after these labels.

The above picture, shows some labels example, that I'm currently (4/7/2015) using on my site.

THE METHOD

1. We'll make use of Html/JavaScript widget of Blogger to add our Highly Customizable and simple Labels. So start by adding a Html/JavaScript widget.

If you wanna know how to add an Html/JavaScript in Blogger Blog, see the following post of mine:

View Now

Don't worry about the content, I'll let you know it, in the upcoming points. Use Title like, "Categories."

2. Now, here are the basic codes that we're gonna use:

<ul>

<li><a href="[Label url]?&max-results=7">[Label Text]</a>  </li>
<li><a href="[Label url]?&max-results=7">[Label Text]</a>  </li>

<br />
<b><font color=#444444 size="6">[Heading Text]</font></b>
<br />

<li><a href="[Label url]?&max-results=7">[Label Text]</a>  </li>
<li><a href="[Label url]?&max-results=7">[Label Text]</a>  </li>

</ul>

EXPLANATION

Now, to explain a bit:

1. [Label url] is the link, of the label, you've made in your Blogger Blog.

To get it, what I do is, create labels in Blogger "Posts" Section & then publish the original Labels Gadget of Blogger.
This can be done, by adding "Labels" Gadget, using "Add a gadget" option, given in Blogger Dashboard's "Layout" Section.

Now copy the links of Labels, by going to your Blog & & Right Clicking the Labels of Original Blogger Labels Gadget.

Then paste those links, in place of [Label url].

Note: It is recommended, not to use any special characters like, "/" while creating Labels in Blogger interface. It may lead to them working with errors.

2. The "&" sign that has been added, in the above codes, makes Numbered Page Navigation (which you would have added in your blog), optimized for Labels.

It's small but very useful

3. Replace 7 with the number of posts you want to display per page, when someone clicks the Label. (Making it equal to the number of posts, you currently show in your Homepage, would be good).

4. Replace [Label Text] with  the text you want to display for that particular Label, it can different from original Label Name, you've created, in Blogger's interface.

5. Replace [Heading Text] with Non Link heading you would want to display, in your Labels. This Heading would not contain any links. Delete that code snippet, if you don't want Heading.

Note: This is not necessarily a Heading, you can add any text, in place of it.

6. Replace #444444 with the color you want for your Heading/Sub-heading. To get color codes, simply Google for it, like "Red Color Code" or "Color Code Set" & you would be able to find the color code you want.

7. Replace 6 with the size you want for any unlinked text you want to add. It is usually between 1-7.

8. If you Google for Html Language Image Tags or any other customization you want, you can use Html Tags to Personalize this widget, the way you want to.

So After completing the coding part, simply save the Widget, using "Save" option & check-out the results on your Blog, live.

AN EXAMPLE CODE

So here's the example Code Snippet for Labels, that I'm using in my Blog, as on 4-July-2015:

<ul>
<li><a href="http://merryquest.blogspot.com/search/label/Video%20Conversion%2FEncoding?&max-results=7">Video Conversion/Encoding</a>  </li>
<li><a href="http://merryquest.blogspot.com/search/label/Bluestacks Related?&max-results=7">Bluestacks Related</a>  </li>

<br />
<b><font color=#444444 size="6">How To-s</font></b>
<br />

<li><a href="http://merryquest.blogspot.com/search/label/All%20How%20To-s?&max-results=7">All How to-s</a>  </li>
<li><a href="http://merryquest.blogspot.com/search/label/PC%20How%20To-s?&max-results=7">PC How to-s</a>  </li>
</ul>

That's it!
I hope you liked the above Tutorial about Custom Labels.

Photo By Master isolated images / http://freedigitalphotos.net

ENJOY!!!