Tuesday, September 25, 2007

Scroll box for Labels (New Blogger)

A blog reader asked if it is possible to use a scroll box (click BACK button to get back to this page) for New Blogger labels (categories or tags). I did an example at Natural Remedies. It is in the right sidebar, second from the top (position may change as Page Elements are added, deleted or moved around). It is not automatic, but done manually, and each time you add a new label, you will have to add that to the list of links in the scroll box.

Here is how I did it. First, I go to Natural Remedies and scroll down to where I can see the Label List. I then opened a Notepad file, typed in a series of empty HTML hyperlink tags as shown below:

<a href=""></a>
<br />
<a href=""></a>
<br />
<a href=""></a>
<br />
<a href=""></a>
<br />
<a href=""></a>
<br />
<a href=""></a>
<br />
<a href=""></a>

The <br /> tag is to force a line break so that each label will appear on a separate line. The number of these HTML hyperlink tags should preferably be the same as the number of labels you have in the Label List, but it can be more. Excess can be easily deleted later. This task can be made easier by copy-pasting. Now I minimise Natural Remedies and the Notepad file and place them side-by-side so I can see the both the Label List and the HTML tags at the same time. I right-click on the first label and chose "Copy Link Location" (this is for FireFox. Different browser will word it slightly differently) to copy URL of the label page, right-click in between the quotation marks in the first HTML hyperlink tag, select "Paste" and the label page URL will be pasted in between the two quotation marks. I then click in between >< and type the name of the first label, so in the above example, I will end up with the first two lines as

<a href="http://foodasmedicine.blogspot.com/search/label/adsense">AdSense</a>

I then repeated with the second label, then the third and so on until I have come to the last label.

I have saved the HTML for a scroll box in my computer and I just locate it and opened it. The script I usually used is shown in below:

<div style=width: 395px; height: 100px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"></div>
Note the width and height of the scroll box highlighted in red. I used width: 395px; because the width of the main column (post) of my main blogs is 400px. The height can be adjusted to what you want. Now I am not putting the scroll box in a post (main column), but in the sidebar. The width of sidebar in that (and this) blog is 150px, so I will have to edit the width to 150px or less. In your case, if you do not know the width of your sidebar, refer to How to find the widths of the Header, main column and sidebar (click BACK button to get back to this page.

I then copy the list of HTML hyperlink tags from the Notepad and paste it in between ></div> of the scroll box HTML towards the end. To make it clearer I will show more of the scroll box HTML and show in red where I should paste the HTML hyperlinks for the list of labels from Notepad in red:

padding: 4px;">paste here</div>

I then sign into blogger.com (Dashboard) click LAYOUT for the relevant blog and click ADD A PAGE ELEMENT for the right sidebar and chose HTML/Javascript, paste the scroll box HTML (width and the height edited to suit your sidebar and the length of the scroll box you want) with the list of hyperlink HTML tags for the labels (from Notepad) into the HTML/Javascript box. In my case, I chose to type in "Scroll down to see topics" for the title of the Page Element (I am thinking of shortening it to "Scroll down for topics" to save valuable space), then click "Save changes". The new Page Element appeared at the top of the right sidebar in the LAYOUT. I hovered the mouse cursor over the new Page Element and dragged it down to where I wanted it. Having done that, I click "Save" at the top right of the LAYOUT and it is done.

If anything is not clear, point out what is not clear in the comment and I will try to make it clearer.

Note that each time you create a new label, you will have to add it to the list.


Scroll box FAQ


  1. Anonymous9/26/2007

    Thanks for your help.

    I would like to build a RSS feed for labels/tags. Can you give me a hint on that?


  2. As always... ¡Good idea! :D

    (I'm following your posts: but... I often don't write 'cause my english is... ¡hollow!.)

    Cheers, Mr. Chen!!

  3. Hi O Embaixador,

    I am afraid answer to your question will require testing, meaning it will take time. Currently I am overwhelmed with work, including

    Long March for Justice

    Should non-Muslim have a say over Malaysia becoming an Islamic state?

    Yang di-Pertuan Agong: Hope for Malaysia?

    and other things.

    Yours will have to wait I am afraid.

    Peter (Blog*Star)
    Dummies Guide to Google Blogger
    "online book" in progress

  4. Nice tip Peter. I'm looking fordward to using it in my new Wordpress blog.

  5. Hi Andres,

    Thanks for your kind words. Sorry to see you go. However a bit of advice, I hope you don't delete your blogspot URL. If you are transferring content, I suggest you delete or save the posts as draft, or even better, edit the post to "The content of this post have been transferred to "link to your new post in wordpress. In that way, you would get dead links.

    See especially Why you should not delete your blogspot URL and what to do if you change the URL.

    I suggest you keep it and redirect visitors to that new wordpress blog. See Redirect visitors from a New Blogger blog to another site.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

  6. Great post, Peter.

    I want to add a scroll-down category label, without having to migrate to the 'new' template design.

    How would one do this with the 'old' (but still very good) template design?

    And, is there a way to migrate 'widgets' to the old template design, without having to change templates?

    Thanks for your great work!

  7. Hi serr8d,

    Regarding doing this for classic template, it is possible, but it will not be automatic, but involve manual work. I want to answer you properly in a post together with an example, and that means time. I hope you have the patience to wait till I finish my more urgent tasks.

    It looks like there are more than one outstanding questions in this post, but yours will be easier to answer so I expect yours to be answered earlier.

    Peter (Blog*Star)
    The easiest way to earn something for your blogging efforts

  8. thank you so much for the tips !! it work perfectly for both Firefox n IE. i tried a version before that uses the "Object" tag, which only work in Firefox but display an empty box in IE. so glad i found your blog. Thank You !! :)

  9. i hope it is alright for me to link you as one of my "buddies" .. :)

  10. Hi Levine,

    Links and buddies highly welcomed. But when you say buddies, do you mean buddies on Facebook, Friendster, or what? Maybe buddies over a cup of coffee in a kopi tiam?


    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

  11. by "buddies", i meant to link you as one of the "bloggers" that i kept track of. ;)

  12. Hi Levim,

    Ribuan terima kasih for the link offer. Really highly appreciated.

    Peter a.k.a. enviroman
    Enviroman Says
    (floods in England, polar ice and ice caps at moutain peaks melting, I think more severe and frequent hurricanes in US, rain when it is supposed to be a dry season in my country, someone from Queensland recently contacted me if I noticed the weather changing. I replied when I was young I had to sleep under the blanket, but now I sleep topless. If I remembered, he said it is freezing in tropical Queensland and now he has to sleep under a blanket. Please folks, take good care of our one and only Spaceship Earth which have no lifeboat. It may not affect us severely now, but it has every chance of severely affecting our future generations. Then they will have lots to be "thankful to us)

  13. Hi Peter,
    You are an invaluable resource to me!

    I have an unsolved problem, how do I make my category/tag list a group (like your CATEGORIES on natural remedies) rather than a list that is column style?


  14. Hi EatPlayLove,

    Please don't only eat and play cause that is no good for you :-)

    That del.icio.us is what they call a category cloud and you can get the instructions on how to do it at Categories the easy way. However, it is manual work plus some don't like the fact it takes visitors away from their blog. I am not bothered with that as all links on del.icio.us points back to my blog or blogs. What I don't like is the work. That category cloud had not been updated because each time I have a new post, I have work to do. I now have no time for that. I am thinking of moving that further down the sidebar.

    There will be some templates with built-in category cloud so you don't have to do anything (beyond updating it whenever you have a new category I think. I have no time to test it out yet). If you have patience, maybe you can wait for that to be published. If it is, it will probably be published in a new blog I have created for use with New Blogger custom channel. But the category cloud will not be on that blog but on a demonstration blog. The instructions will only be in that blog.

    Peter Blog*Star
    Blogger for Dummies

  15. Anonymous1/27/2008

    Hi, Peter. I'm using old blogger and third party template. I'm also using labels for link purposes, but don't like the 'Links: cats, dogs, etc' that appears at the foot of any post that has labels assigned to it.

    Is there any way I can hide/disable this wording whilst still being able to use the labels feature?

    Thanks in adavance.

  16. Anonymous2/07/2008

    i've been wanting to use scroll box for my labels coz it's adding too much space on my blog. i'm so glad i came across your blog! thanks for the many tips! i will use some on my blog!

  17. For Billy,

    I am afraid at the moment I do not know of any way of not showing the labels after adding them. Question for you is, why would you want to add labels if they are invisible.

    There may be a way by editing the template, but I have no time to try.

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions_
    (Blogger FAQ in progress. More will be added as I have the time)

  18. Anonymous4/16/2008

    For Peter.

    Thanks for replying. In answer to your question, I use lables in my sidebar for link purposes, but don't want that label to show at the foot of the posts. I hope this is clearer. Anyway, I have now found a work-around by using a link list in my sidebar instead of labels. This means I don't need to include labels in my posts. It's a lot more work, having to maually link to every post, but at least it looks the way I want.

  19. I've been trying to make a list in my scrollbox, but it won't let me make a new line in the text (whenever I press "enter" it doesn't work). How can I fix this?

  20. Hi Mrs. Magoo,

    I am not sure, but I am guessing. You need to use <br /> to force a line break.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

  21. I have tried it but it did not wanna work...please help!thanks...

  22. I would like to remove the parenthesis next to each topic in my labels list. Do you have a post on how to do that? Thanks Peter.

  23. Peter I want to thank you for once again giving such clear and useful tips. I just added a scrolled label list to my blog using your directions and it worked beautifully! You came through for me again.

    I'm thinking of using this same technique to place some very long link lists that I now have into scroll boxes. I know it will work (I tried it on my test blog), but do you have any idea if URL links within a scroll box can be read by search engines?

    I'd hate to lose search engine rank just because I used the scroll boxes.

  24. Hi Maria,

    It should work if you follow the instruction correctly as demonstrated by the example. Only thing is, you have to add a new label manually each time you add a new label.

    Just asking for help is not enough as we have no idea why it did not work for you. Perhaps with more detailed info I can try to help.

    Peter Blog*Star
    Dummies Guide to Google Blogger
    "online book" IN PROGRESS. Use the CONTENT at the top of the main column

  25. Hi All Over the Map,

    Remove parenthesis, like in:

    This Label (15)

    where 15 is the number of posts labeled "This post"? That is a useful feature. Why would you want to remove them?

    I am afraid to say I don't have a post for that, but doing them manually like as described in this post would do the trick. Alternatively you can go back to the "hacks" we were forced to use before New Blogger came up with labels (better known as categories):

    Blogger Categories - A simple method

    Blogger Categories: Easy method

    Creating categories step by step
    (summary of the above 2 methods)

    BTW if you find a way to do what you want without resorting to these manual methods, do let us know.

    Peter Chen Blog*Star
    Environmentally friendly presents (gifts)

  26. Hi BEV(QB),

    Refer to Check to see how search engine sees a website.

    Peter Blog*Star
    What a grateful blogger did for me
    (No money involved. No one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

  27. good work friend thanks a lot for ur patience in replying to all the comments,and really your tips and tricks are so usefull to new bloggers keep it up


  28. HAI peter how ru

    really thanks for ur patience to reply to comments,and your tips and tricks are so usefull to new bloggers so nice of u

    thanks a lot

  29. Dear Sir,

    Thanks for your service. I want to have two types of labels in the side bar. If I use category and label, I get two widgets. But, both are displaying the same list of posts. Whereas I want to have one kind of posts to go to label and another kind of posts to under category. Is it possible?


  30. Yes it is possible, but only if at least one of them are manually done like for the categories we did for blogs using Blogger old classic template before labels was introduced like these 2:

    Blogger Categories - simple method

    Blogger categories - easy method

  31. Dear Sir,

    Thank you for your quick feed back.

    I am a novice and I did my best after some struggling. But, the category and the tag is appearing in my blog but the posts are not appearing below the tag name. my blog is http://arinthumariyathathu.blogspot.com/

    Leave the language, for your convenient, I left the category and tag in English. Please, help me in this regard.


  32. uncle peter xie xie ni for your tips&tricks.

    i know how to use the scroll bar. but i'm wondering how can i show the numbers of posts behind the labels.

    Terima Kasih Banyak

  33. If I remember correctly, using delicio.us for categories (labels) cloud will have the number of posts displayed.

  34. You are a great blogger. Instructions are very clear even for a layman.But where is your scroll box? Have you removed it?

  35. Thanks for the compliment.

    ".But where is your scroll box? Have you removed it?"

    No it is still there, somewhere in the middle of the post, preceded by these text: "I have saved the HTML for a scroll box in my computer
    and I just locate it and opened it. The script I usually used is shown in below: .......

  36. hai boss

    tq for the guide. below are some of my problem and hope your guide

    (a) how to change the slider control from vertical to horizontal. you can see here

    i have follow the trick how to customize the labels from from

    but after i have apply it( see here:
    http://ngaje.blogspot.com/ )


    hope i can get the guide here.


    Terima Kasih Dr

  37. hai ..

    sorry if this is the re post...

    tq for your blog for a new blogger like us

    Question 1
    how to change the slider control from vertical(from your site) to horizontal ( this site: http://a2mstats.blogspot.com/2010/04/writing-equation-in-blogger-using-latex.html)

    Question 2
    Label(Number of post)
    - Sub label 1 (Number of post)
    - Sub Label 2 (Number of post)

    i have follow the tutorial how to customize the label from

    and i have apply it here

    i like to SHOW THE NUMBER OF POST for

    terima kasih Dr

  38. I assume you are either a Malaysian or Indonesian. I tested what you want done at testing scroll box with horizontal scroll bar but have not found the method yet. It is possible that may be in their template CSS. Hope to try later. Contact me at my contact form if you want me to email you if I found the solution and especially if you are a Malaysian.

    Sama sama. Terima kasih.

  39. Nice tips friend thanks for share with newbie Add Bricks style Labels


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics