Basic Html Code
Let me start by saying I used part of the extensive post at Beta Blogger for Dummies which covers all things ‘label’. The article is informative, but be warned it takes a long time to load — like all of Vin’s pages but the content is worth the wait. What you see here is a practical application of that code, continuing our series on tweaks around labels (removing counts, putting in a scroll bar, etc.). I outline my strategy below for approaching what looks like pretty complicated code.
This is a quote of the generic code found at Vin’s site:
Work it out on paper
For these instructions you need to define your own title (“Labels”), three Categories (A-C) and use nine of your blog labels (Label1 thru Label9). The nine are listed 3 under each of the 3 categories. Of course you should first map out how many categories you want and vary the number of links under each! So use this as a starting point and work it out on paper first.
Instead of “Labels” as the title I decided to use “More on how to:”
Category A = “Create your blog”
with links to “Blog Design” and “Blogging Tips” — notice I gave a more descriptive name to the raw labels used on the posts. For ‘blog design’ label I used ‘find the right look.’ Be creative.
Category B = “Grow your blog” with “BlogCatalog”, “mybloglog”, “Statistics” *** label names are case sensitive!
Category C= “Customize your blog” with “Widgets”, “Template Tips”, “CSS”, and “Quick Tips”
Finding your label url
First find all of your label links so you can create the ‘href’ link addresses. An easy way is to open a new browser window and click on the first label you intend to put in category A, save the url address and at the same time verify the listed posts are really what you want to show. Remember when you click a label, Blogger does a search for posts tagged with that label!
Here’s the first href:
http://bpwebnews.com/search/label/Blog%20Design. You can avoid the browser step above by putting your blog url, followed by ‘search/label/ and then the actual label name! Just one caution – a space must be represented by ‘%2o’. It’s that simple.
Getting it done
I prefer to use a test blog to work out any misspelling or misjudgments before you copy to your real blog. Any gadget you add takes effect immediately and anyone visiting at that time could receive a jolt. In the test blog (using url addresses for the real labels), I found the use of h2 with a class of ‘sidebar-title’ worked for me — it puts the title in the font and color style defined in your template. However the h3 style was a disaster, yielding larger type than the h2 and in a bold black font. So I adjusted this by replacing h3 with h2 throughout the code. If your template has h3 then it might look fine!
- Go to the Layout section and add an Html/Java gadget in the sidebar section.
- Paste the code from the scroll box or your modified version from a notepad document.
- Replace title, categories and label url/names with the ones you decided are relevant.
- Save Page Element, View and make adjustments until you’re satisfied
- Copy the html into a new element on your real blog, if you used a test first.
- Drag and drop the new gadget into the position you want along the sidebar.
Marketing your blog’s content is a key factor in gaining readers. With a little planning you can add a super categories section to help point out more posts your visitors can explore. Let us know if you give this a try.