Saturday, July 28, 2007

Displaying HTML tags

A blog reader has asked for instruction on displaying HTML tags/codes, especially how to put them in a scroll box. If you try to display
<a href=URL">Description</a>
and you type it exactly as you see it above, what will be displayed is

You will have to refer to How to post special characters. To make it clearer, I used
special code to display HTML tags
to display
<a href=URL">Description</a>

If you have longer blocks to display in a scroll box, you may do what I do. I save the code for the scroll box in a Notepad file and saved it in a folder where I can easily find it when I want. The code for the scroll box I have saved is given in the scroll box 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>

I have width: 395px; because the width of the main column of the main column (posts) of this blog is 400. height: 100px; I can change to suit what I put inside the scroll box. For example, I edited height: 100px; to height: 40px; for the scroll box above. If you want to find the width of your blog Header, main column, sidebar, refer to How to find the width of your blog Header, main column, sidebar (click BACK button to get back to this page).

Regarding making a scroll box, you should refer to Make a scroll box (click BACK button to get back to this page).

If I type it as you see it above inside the scroll box, you will not see the code for the scroll box as seen above. What I had to do is to change < to code for less than and > to code for greater than

You can do it manually one by one but a smarter way is to put the HTML code you want to display into a Notepad file and use Edit > Replace from the menu bar and let Notepad find and replace all the < and > automatically for you. See screenshot below:

Using Notepad replace function to change special HTML character to code to display on the web

Once you have entered what you want, just press "Replace all" and it will all be done automatically for you. You can then highlight all the edited code and paste it into the scroll box.

To further illustrate, nisha has asked for the HTML for a clickable link to be displayed inside a scroll box. I will first type the HTML code for the hyperlink in Notepad:

original HTML for hyperlink

and then used the method described above to change it to

HTML for hyperlink edited to display on the web

I will then copy-paste the code for a scroll box, and place it inside the scrollbox as explained in the post Make a scroll box (click BACK button to get back to this page). I will then copy all the edited HTML for the hyperlink as shown in the second screenshot for the Notepad and paste it inside the scroll box and I will end up with this:

<a href="">her experiences,interests,dreams,family and baby alisha...</a>

I hope this is clear. If you have further question, leave a comment.


Scroll box FAQ


  1. dat scrollbar idea was gr8....dats like d most comfortable way f wrappin up words....thanx a ton :)

  2. do u know any ways so that the blogger labels aren't displayed...

    i mean i want to mark my posts with labels but i dont want them to get displayed after my articles...

    just like in

  3. Hi Salman,

    Labels (categories or tags) had long been requested from Blogger and now finally they introduced it. It is to me a VERY USEFUL feature and I just don't understand why anyone wants to hide it. If you don't want labels under your posts (which I don't), then just don't add labels. I don't even want to try to see how I can hide labels after I have added them to my posts.

    Peter (Blog*Star 2006 and 2007)
    Earning Online

  4. I'm with salman. I need to use labels (my blog just won't operate without them) but I don't want them displayed at the foot of every post.
    If you do know how this might be done, Peter, we'd really appreciate it.

  5. Hi Salman and Billy,

    They say one's man meat is another man's poison and I cannot argue with that. But to me, having labels at the bottom of the post is an extremely useful feature as it is like what some bloggers used to do manually, add "Related posts" links at the bottom of the posts. That used to have to be done manually, taking time and effort, but here is a feature which does it automatically for you and you guys want it removed. I am a curious guy and I would like to know why. If you can convince me that there are good reasons for removing it, perhaps I will take time off from my busy schedule and see if and how it may be done.

    Peter Blog*Star
    Testing Blogger Beta (now New Blogger)

  6. I was wondering how you can make it so that the html does appear so that people can copy and paste the html neccesary to make your button onto their own page?

  7. I am also wondering about the same question as "The Crawford Family". How DO you put the HTML code in the scrollbox so that people can easily copy and paste it easily in their blogs? It's very convenient.. but I would love to know how! If you don't know what I mean, here is an example (screenshot):

  8. Carmen & Crawford Family,

    Refer to display HTML codes inside scroll box. And Carmen, regarding the link you gave, it should be made active. See how to make active link in post and comment


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