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
), 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:
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 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.