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:
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.
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:
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.
No comments:
Post a Comment
www.lochan.in