Pages

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!!!


16 comments:

  1. Dear, thanks a lot to you.It's the only tutorial which shows about adding customised menu using labels without any confusions. Actually Blogger.com missed out this option. Keep posting new posts :)

    ReplyDelete
    Replies
    1. I'm happy that you liked the post & You're welcomed. Best of luck with your site.

      Delete
  2. Hii
    Greating of the day, and now i done my site setting from this step thank for sharing.

    ReplyDelete
  3. I always spent my half an hour to read this web
    site's articles or reviews everyday along with a mug of coffee.


    Review my web site Bankruptcy Lawyer

    ReplyDelete
  4. I enjoy reading through an article that can make men and women think.
    Also, thanks for permitting me to comment!

    My blog post: teeth whitening

    ReplyDelete
  5. this din't work in my blog the following error come up
    Error parsing XML, line 1424, column 79: The reference to entity "max-results" must end with the ';' delimiter.
    plz help

    ReplyDelete
    Replies
    1. Hi Muhammad

      I think that you are adding codes to your template, but they have to be added to the widget, as an HTML/JavaScript. You see they are working, as I still use them on my Blog. Check out the following post, to see how to add this code:

      http://merryquest.blogspot.com/2013/07/new-interface-add-any-widgetgadget-to.html

      Delete
  6. Thanks, When I tried this it, was saying error, then I added amp; before the '&' and it worked. Check out my blog ==> www.jointgeeks.com

    ReplyDelete
  7. Thanks for sharing this info. I can get it to work for the label pages, but not for the "search" results pages. Do you know how to fix it for the search results page?

    ReplyDelete
  8. This for this amazing post on Custom Label can to tell us. How we can use this Custom label on bottled water for our business promotion.

    ReplyDelete

Please Ask your question/Give your opinion, here, I love to read User Comments.

TO GET FUTURE COMMENTS USING EMAIL, LOGIN WITH YOUR GOOGLE ACCOUNT (on a Website like google.com) & while signed in, CLICK "Notify me" checkbox, that appears now, below the commenting box.