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

How to put a wide image in the blog without causing the sidebar to slide to the bottom of the page

I am going to test to see if putting an image wider than the main column into a post will cause the sidebar to slide down to the bottom of the page by putting it into a scroll box. The photo I am going to put in the scrollbox below is 800x600 pixels whereas the main column width is only 410 pixels. Here goes:

Well, I published it, and checked in Internet Explorer, FireFox and Opera, and in all 3 cases, the sidebar stayed where it is supposed to be - at the top of the page. So, if you ever want to put a large image in your blog without the problem of sidebar sliding to the bottom of the page, put it in a scroll box. To get HTML for the scroll box, go to How to make a scrollable box.

If you don't like this because your visitors have to scroll to see the rest of the photo, another way is to choose a template with the sidebar on the left and the main column at the right like Sand Dollar. Look at these 2 blogs which uses the Sand Dollar template. Notice how large the photos are, and they don't cause any problem with the sidebar:
Plus Toll Plaza (close the window to get back to this page)
After 1994 (close the new window to get back to this page)

Update: Rose commented that a better idea is to post a thumbnail so that visitors can click on the thumnail and go to another page to view the photo (see comments section). There are normally more than one way to solve a problem, and mine is one and Rose is another. But I think a better idea than posting a thumbnail is uploading the large photo via the normal Blogger way which will place something bigger than a thumbnail but which will be reduced in size by Blogger to fit the column, and visitors still have the option to click on the image to view the larger image. I normally include a message to click on screenshot (most images I post are screenshots) to enlarge.

NEWER POST

OLDER POST

Testing if scroll box works for images

Putting images in a scroll box

This post is in response to a reader who asked if the instruction for a scroll box in HTML for a scroll box works for images. I am also interested to find out, I am going to test it out now:

Well, as you can see, the test is successful, the images put into a scroll box is scrollable. There are 3 photos in the scroll box. You can scroll down to see them.

If you want to know how to do a scroll box, refer to this post: How to make a scrollable box. (Use the "back" button to get back to this page)

BTW, the images you see in the scroll box are photos of dancers in a very colorful event called Citrawarna (The Colors of Malaysia)held in Kuala Lumpur, Malaysia every year. It will showcase a kaleidoscope of arts, culture and tradition of the multi-racial nation. It will be a grand parade with thousands of dancers from all over Malaysia performing. Since 2007 will be Visit Malaysia Year, I would expect next year's Citrawarna will be held in a very big way. Citrawarna Malaysia is expected to be held in July 7, 2007. Many events will be organised for the tourist and 2007 will be a good year to plan for a visit to Malaysia.

Related post:
Scroll box FAQ

NEWER POST

OLDER POST

How to make a scrollable box

A reader of my blog Testing Blogger Beta asked how to make scrollable box or scroll down box (or scroll box, I don't know what exactly to call it). To see what I mean by scrollable box, surf over to this post: Testing adding of Google AdSense search box in Blogger Beta. There are some scroll boxes there in which I had to put some HTML codes, which if done any other way, will cause the sidebar to slide the bottom of the page because it is too wide for the main column width.

One of the way do this is to paste this code in your post editor (there is another way further down the post):

<div style="overflow:auto; height:300px; width:400px">
<table cellpadding="0" cellspacing="0" style="width:250px;">
<tr>
<td>Put your stuff here</td>
</tr>
</table>
</div>

Type or paste whatever text or HTML you want in the place where you see "Put your stuff here" (and of course then delete "Put your stuff here" and publish your post).

Note: The width and the height of the box can be changed by changing the numbers in height:300px; width:400px". Note also that there is a large space above the first line of the text. I don't know what is causing this, and am trying to find a solution to it. When I do, I will put an update or redo the post. The trouble is, I am trying to do so many things at the same time. If this is troubling you, do remind me.

UPDATE: 21 November 2007: A blogger provide the solution by putting all the codes in a single line. Read the comments. There is also a second solution. Read another update lower down the post

The reader also ask if that will work for pictures. That is an interesting question. I will have to test it. (This has been done. See post Testing if scroll box works for images. (Click the "back" button to get back to this page).

UPDATE: A reader of this post has commented and given a link to a scroll box generator. For that generator, you will have to enter variables like width of box (important), height, font size, color, etc. I have tried it and it works. But haven't had the time to test it more thoroughly. The generator is at this site: Scrollbox Generator. (Close the new window to get back to this page). The tip is given by Luigi who have made a scroll box here: Trovamiunnome (close new window to get back to this page).

If you surf to that scroll box generator, you will see the variables you will have to select in the screenshot below:

<div style="width: 395px; height: 400px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"></div>

copy from the file, paste it into the post editor, adjust the width: 395px; height: 100px; to suit the occasion and paste the codes I want to display just before the last </div> tag.

To make it clearer, I will put in some text in red where you are supposed to type or paste what you want to appear in the scroll box:

<div style="width: 395px; height: 400px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;">Paste what you want to appear in the scroll box here</div>

UPDATE: 21 November 2007: What I have been doing for a long time is to generate the script once, save it into a Notepad file. Now whenever I need a scroll box, I just open the Notepad file, copy-paste the script into the post editor window, edit the width and height according to what I want (the width will normally depend on the width of the main column, ie., posts while the height will depend on the length of the stuff I put inside the scroll box and/or how high I want the scroll box to be. If you don't know the width of the template you use for your blog, refer to How to find the widths of the blog Header, main column (posts), sidebar of your blog (click BACK button to get back to this page)

Update 27 July 2007: A reader has asked if the scroll box border color can be changed. That is very easily done if you use the scroll box generator mentioned above. If you look at the screenshot, at the last line, you have the choice to chose the border color. You can either "select from chart" or enter a hexadecimal color code for a greater variety of colors. If you chose the last option, the free ColorPic tool will be very handy. Type or copy-paste "colorpic" into the search box above, tick "Web" and search. I believe the site from where you can download the tool will be the first result of the SERP (search engine result page)

RELATED POST:

Scroll box FAQ

NEWER POST

OLDER POST