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>
<br/>

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.

RELATED POST:

Scroll box FAQ