Labels below post title above post content: Test

Got a funny request from a blogger who is using an old classic Blogger template to move the labels to above the post content just below the post title. Although since I migrated practically all my blogs over to the New Blogger templates, I have hardly looked at an old classic Blogger template and not exactly what may have changed since Blogger forced all bloggers to migrate over to New Blogger (formerly Blogger Beta) though one still have the choice of keeping or using the old classic Blogger template.

However, after the change, there are some features added to blogs using old classic templates including the ability to add Labels (more commonly known as categories). The difference is that you will not have the New Blogger easy drag and drop LAYOUT and you will not be able to add a Link List in the sidebar. There is a work around at Label List for old classic Blogger templates. However, I would not know if I will be able to find the code to display the labels at the bottom of blogs using old classic Blogger templates or not. I tried looking in Furniture Center which uses Final Sense old classic Blogger template they called "109 business blog 1". I tried looking but failed. Maybe when I have time, I will try a standard old classic Blogger template and see if I can edit the template to put the labels below the post Header.

I tried that with a blog Blogger Help Pages which uses Hackoshere 3 column New Blogger Minima template and found that I could do it. You can get instruction on how to do it at Labels below post title.

Labels Drop-down Menu for New Blogger

I am testing Hackosphere hack for Drop-down labels - First blogger beta template hack! with Best Gardening Articles. It works. You can see the drop-down menu for the labels in the right sidebar.

Some tips for using this hack. First, backup your current template. See Backing and changing New Blogger template. Remember also to edit the Page Elements one-by-one, copy them into Notepad files, give them a suitable name like "blog name hit counter footer no 1" and save them in the same folder where you save the backup template.

Now it is best that you are using a browser like FireFox with tabbed browsing so you can be in Hackosphere page in one tab and in the Blogger page in another tab, all in the same window. Sign into Blogger, and in the Dashboard, click LAYOUT, then click the TEMPLATE tab followed by the EDIT HTML sub-tab. This will open your template editor window. Tick "Expand widgets template" and wait for the template to fully expand. You will then have to look for the block of codes as explained in Hackosphere page. To make your life simpler, press ctrl+F and you will see a "Find" search box at the bottom of the page. I would suggest you type or copy-paste all or part of

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

into the search box and click "Find Next". This will automatically locate your search term and highligh it. Then somewhere below, you will see <ul>. Highlight all the codes between this tag and </ul> and delete it. Then paste what Hackosphere instruct you to replace all the highlighted (and deleted) codes with their replacement. Preview, and if satisfied, click "Save template".

phydeaux3 Label Cloud Hack

phydeaux3 has described a hack for converting the New Blogger standard Label List to a label cloud at Code for New Blogger Tag Cloud/Label Cloud. I have decided to test it and see if it works. I tried the hack for this blog Gizmos and Gadgets, and the test was successful. The only problem was that blog used Ramani's of Hackosphere New Blogger fixed width Neo template, and the color for the minimum number of labels was black, and it was hardly visible. I had to experiment with changing the colors until the label colors was nice and visible. I had to change what phydeaux3 set for the colors to

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [255,255,255];
var minFontSize = 10;
var minColor = [191,240,255];
var lcShowCount = false;
</script>

to make the labels easily visible. You can see the Label Cloud at the bottom of the left sidebar of the blog Gizmos and Gadgets.

For the alteration, I used ColorPic to help me determine the RGB values to input into the maxColor and minColor.

Label cloud for Blogger Beta

phydeaux3 has done a hack for label clouds for Blogger Beta. If you want to do it for your Beta blog, surf over to Code for Beta Blogger Label Cloud (close new window to get back to this page).

Update 28 February 2008: A reader commented that the link to phydeaux3 wasn't working. I tested that and it was OK. I also tested phydeaux3 hack for the label cloud and you can see the lable cloud in the right sidebar of this blog Computer and Internet Articles. If you have any further problems, leave a comment.

Also, Phydeaux3 has an update to fix the maximum of entries. If you are interested, have a look a Blogger Beta Label Cloud Update

Drop down menu for labels (categories)

Thanks to Ramani of Hackosphere, I now have a drop-down menu for the labels or categories. Check further down the sidebar to see the drop-down menu. To see all the labels.

If you want to have a drop-down menu of your own, surf over to Drop-down labels - First Blogger beta hack

Update: Drop-down menu hack was done successful, as seen on the web, but in the Template layout, when I tried to move the label element, got this error message: "An error occured. Please try again. This mean you will not be able to change the position of the drop-down menu using the template layout, but will have to use EDIT HTML to move it. In fact, with the hack, trying to move any other page element will result in the same error message.

Update: Changed over to Ramani's 3 column template. See 3-column Template for Blogger Beta. With that change of template, the drop-down menu for the labels is now no longer in this blog. Since it was just for testing purposes, I have decided not to replace it. BTW, it seems with the drop-down menu for label hack, dragging and dropping page element is no problem at all. See Chuck's comment in this post.