Saturday, September 27, 2008

HTML code displayed in a scroll box

A few readers have asked how to put HTML codes inside a scroll box so that readers can copy the codes to paste it into their own blogs (example see 4 column Minima template. First thing you have to know is that if you try to type the HTML as it is (example <br />), the web browser will interpret that as an instruction to display what follows in a new line (line break) but not display the HTML. What I did to display the above was to type special character < > to display HTML. In other words, replace < with and replace > with

How to display HTML codes inside scroll box

Now on how to display HTML codes inside a scroll box. First, the script for a 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;"></div>

I have the script for the scroll box save in a notepad file to be retrieved whenever I need to use it. Now, to explain how I displayed the HTML codes for the scroll box. I paste whatever HTML codes I want to display into a notepad file. Then I click EDIT in the menu bar and select "Replace..." and then type > into the "Find what:" box followed by < into the "Replace with:" box (see screen shot below:
replace function in Notepad

and then click "Replace all". Notepad will find all the < characters in the file and replace it with automatically. I repeat with >, that is, type > into the "Find what:" box and into the "Replace with:" box and click "Replace all".

Thanks to DarkUFO, found a slightly easier way of encoding the HTML codes for display at encode HTML entities. What you have to do is to paste the HTML codes in between <em></em> and click "encode", then proceed as usual.

Once all the < and > had been replaced, I copy the edited file in Notepad and paste the edited HTML codes into the scroll box by pasting it in between >< in the script for the scroll box. I will then edit the width and height (in red) to suit the width of my main column and a suitable height to accommodate the length of the HTML codes I want to display. For example, the width (in red) is already set to 395 which is what I want, so I leave it alone. I edited height="400" to height="39", publish, done.

Peter Chen's nice graphic signature


  1. Peter,

    There is a slightly easier way.

    Use this tool ->

    Paste in your code and hit encode.

    Voila :)

  2. Hi DarkUFO,

    Thanks for the tip. I am going to add your tip to the post together with a link to your blog as acknowledgement.

  3. Thanks Peter :)

    I found it a while ago It's so useful lol

  4. Two questions, Peter: How does one change the "older posts" at the bottom to "previous."

    And how does one control the size of uploaded videos? Mine take up too much real estate on

    TV news analyst, media, political

  5. Hi Peter,

    This has nothing to do with your posting, but i wasn't sure if this blog was still active or not so I wanted to post on the most recent entry.

    I have 2 questions: 1)Do you know how to make the sidebar/columns wider? (I have 2 column Dots Dark Template) & 2)Do you know of anyone who will convert a wordpress template to blogger beta?

    Sorry one more question...I saw a post regarding a Dots Dark Template with a header, but the link says error 404 not found. Does this template still exist? Having no header is one of the things I most dislike about my current template. Any help you could give would be greatly appreciated. (Please visit my blog as well)

  6. Hi,

    Good Morning!

    I want to buy 1 way paid text link from your site home page on monthly basis.

    We are not interested in yearly deal.
    Our site is

    Our budget is within $15/month.

    If you are interested, please send me your rate per month and paypal information.
    Thanks for your time..



  7. I have found lots of useful tips on your blog- thanks!

    I have modified my code to do a 3 column Ms. Moto template. But now I am having issues with my header and am unable to get it centered. Do you have any suggestions for me, or can you point me to a post that might help? Thanks.

  8. Try surrounding what you want centered with <div style="text-align:center;">

  9. Darn, typo. Here it is again:

    Try surrounding what you want centered with <div> and <div style="text-align:center;">

  10. Well, I have a picture uploaded as my header, and I can't find the code in the html for the picture. I do find some header code, but nothing I do to that seems to affect the placement of the picture.

    Thanks for your suggestion, though.

  11. If you upload photo to Header via "Add a Gadget" > Picture, you will not be able to do anything via the gadget other than resize to fit. You may be able to control something by editing the template after uploading but I have never tried.

    If I want control over the photo, I will use Add a Gadget > HTML/Javascript and then use the HTML tag <img src="URL of photo" /"> etc and then you can add attribute like width="some number" etc.

    The folloing are posts related to blog Header but I cannot remember exactly what is in the content, you will have to check yourself:

    add graphic to blog Header

    all about graphic in Header

    How to change blog Header....

    or try to find someone who have uploaded graphic to blog Header and have controlled its properties via template.

  12. Thank you so much Peter- that makes sense. I have already added the ability to add more gadgets to the top after reading another one of your posts, so I think I can follow these instructions with no problem.

    I REALLY appreciate your help and expertise!

  13. hello sir i have a problem to post adsense in my blog just like you place but face a problem plz guide me i really need your help my plz check my source code my blog address is

    i m waiting for your reply

  14. a bundle of thanx sir i have posted adsense successfully.

  15. That really worked for me ..

  16. Thanks for your help! This was exactly what I was looking for!

  17. There is a new editor in Blogger which allows you to show your code literally. Go to the link on how to use it.

  18. Hi Peter, I am a new blogger. I found out a lot of useful tips from your blog. Thanks a lot.

  19. Thanks for the tip mate. For myself, it addresses the problem of a lengthening article list. Now I can keep my earlier links and add on new ones without lengthening the entire page.


  20. I've ever read in other, that we can show html code with a tag < pre>< /pre>,
    Can that tag can be use?

    tyang @

  21. tyang, have a look at Testing HTML <pre> tag and let me know if you are happy with that?

  22. This post realllly helped me. Thanks so much.

  23. Nice working man you really done great job thanks for it to help me for my blog setting


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