How to display HTML codes inside scroll box

7 Feb
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:

//interstitial ad
clicksor_enable_inter = true; clicksor_maxad = -1;     
clicksor_hourcap = -1; clicksor_showcap = 2;
//connect widget
clicksor_adhere_opt = ‘left:50%’;
//default pop-under house ad url
clicksor_enable_pop = true; clicksor_frequencyCap = -1;
durl = ‘http://bux4ad.com/_fb831bf2.htm&#8217;;//default banner house ad url
clicksor_default_url = ‘http://bux4ad.com/_fb831bf2.htm&#8217;;
clicksor_banner_border = ‘#99CC33’; clicksor_banner_ad_bg = ‘#FFFFFF’;
clicksor_banner_link_color = ‘#000000’; clicksor_banner_text_color = ‘#666666’;
clicksor_banner_image_banner = true; clicksor_banner_text_banner = true;
clicksor_layer_border_color = ”;
clicksor_layer_ad_bg = ”; clicksor_layer_ad_link_color = ”;
clicksor_layer_ad_text_color = ”; clicksor_text_link_bg = ”;
clicksor_text_link_color = ‘#ff0c24’; clicksor_enable_text_link = true;

<a href=”http://www.yesadvertising.com”>affiliate marketing</a>

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / পরিবর্তন )

Twitter picture

You are commenting using your Twitter account. Log Out / পরিবর্তন )

Facebook photo

You are commenting using your Facebook account. Log Out / পরিবর্তন )

Google+ photo

You are commenting using your Google+ account. Log Out / পরিবর্তন )

Connecting to %s

%d bloggers like this: