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
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
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:
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 and > to
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:
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:
and then used the method described above to change it to
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:
I hope this is clear. If you have further question, leave a comment.
Scroll box FAQ