How can I make a scroll box for HTML code?

This post has been the most popular post at Blogging Basics 101 since I wrote it over a year ago. However, it’s also been the most confusing for my readers because it deals with HTML and how your blogging platform & web browsers read that HTML. So I’m tweaking this post and re-posting in the hopes I can clarify these issues a little more.

Sometimes a blog will have a button on its sidebar with a box of HTML code underneath, similar to this:

You already know how to put the button on your sidebar and how to find and display the HTML. Now let’s put that HTML into a handy scroll box.

Below I will walk you through putting the code in your sidebar. First, though, I want to show you the code we’ll be using and explain how it works.

This is the code you’ll place in your sidebar:

<img src=”https://www.bloggingbasics101.com/images/bb101_125x125.jpg”><br/><div style=”border: 3px solid green; overflow: auto; height: 100px; width: 125px; color: black; background-color: white;”>YOUR TEXT HERE</div>

This will show up as the button and then a box below with the HTML code (as you see above).

The <div style=” “> and </div> are the opening and closing HTML tags you need to make the scroll box. Everything between the quotes in the <div style> tag tells the browser how to make the box appear on the screen. Let’s go through each of these items.

• border:3px solid green — This tells the browser to make the box with a three pixel border in green. You can change the color by typing another color (e.g., red, orange, etc.) or you can change the line type by typing dashed or dotted.
• height:100px — This tells the browser to make the box 100 pixels tall. You can change this variable by typing a different number (e.g., 200). You can play around with this until you like the appearance.
• width:150px — This tells the browser to make the box 150 pixels wide. Again, you can control the width by typing in a different number.
• color:black — This is the color of the text within the box. You can type the name of any color here (e.g., red, orange, green, etc.).
• background-color:white — This is the color of the inside of your box. I encourage you to use black text on a white background as this is the easiest to read. However, you can change this color by simply typing another color name in place of white.

Now that you understand how the tag works, let’s look at what HTML you need to put use to make the box reflect your personalized HTML. Instead of YOUR TEXT HERE you should type your HTML code. For example, if you are going to put the HTML for putting the BB101 button on your site it would look like this:

<img src=”https://www.bloggingbasics101.com/images/bb101_125x125.jpg”><br/><div style=”border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;”>&lt;a href=”https://www.bloggingbasics101.com”&gt;&lt;img src=”https://www.bloggingbasics101.com/images/bb101_125x125.jpg” /&gt;&lt;/a&gt; </div>

(Note that you don’t need the bold, I just added that for ease of seeing where your code goes. If you need more help with what code you’ll need, see this post on HTML code for buttons.)

If you’re at all familiar with HTML, you’ll notice that the code above does not have the regular < and > you usually see when inserting links and images. Your button code would normally look like this if you were typing it in your HTML compose tab:

<a href=”https://www.bloggingbasics101.com”><img src=”https://www.bloggingbasics101.com/images/bb101_125x125.jpg” /></a>

However, if you type the HTML above into the Compose tab or the Edit HTML tab, it is processed as HTML and will not show up properly for your readers (it will just show the button in the box instead of the HTML code). There is a work-around: Type &lt; for every < character and  &gt; for every > character. The code for your button HTML will look like this:

&lt;a href=”https://www.bloggingbasics101.com”&gt;&lt;img src=”https://www.bloggingbasics101.com/images/bb101_125x125.jpg” /&gt;&lt;/a&gt;

This works because &lt; is the HTML code for the < sign and &gt; is the HTML for the > sign. In other words, your editor and your browser will both read &lt; as a < character (and display it as such) and &gt; as a > character (and display it as such). Placing &lt; in place of all < and &gt; in place of all > will allow your raw HTML to show up in the box because it replaces the < and >. You’ll need to put &lt; and &gt; where ever there is an < or > in your code.

NOTE: Do not cut and paste the code from this article. It’s using so-called smart-quotes and those quotes won’t be recognized properly by your blogging platform’s editor or a web browser. You’ll need to either type in the code by hand or, if you choose to cut/paste, replace the quotes manually in your editor.

There are other work arounds as well. You can try wrapping your snippet of code in the following tags:
<pre> and </pre> tags OR
<textarea> and </textarea> OR
<code> and </code>

Now, let’s put that code in your sidebar!

TypePad

In order to add the code to your sidebar, you will need to make a new Notes Typelist.

1. Go to Typelists > Create New Typelist.
2. Choose Notes for the List Type and give it a name.
3. Click Create New List.
4. In the Note field type copy and paste this code:<div style=”border: 3px solid green; overflow: auto; height: 100px;
   width: 150px; color: black; background-color: white;”>YOUR TEXT
   HERE</div>
5. Click Save.
6. Click the Publish tab and choose which pages you want to put the scroll box on.
7. Click Save Changes.
8. To change where the scroll box appears, use the Content Order tool in your Design toolbox.

Blogger

1. Log in to Blogger.
2. Go to Layout > Template > Page Elements > Add a Page Element.
3. Scroll down until you see HTML/Java Script and choose Add to Blog.
4. Cut and paste the following code into the Content field (you can leave the Title field blank):<div style=”border: 3px solid green; overflow: auto; height: 100px;
   width: 150px; color: black; background-color: white;”>YOUR TEXT
   HERE</div>
5. Click Save Changes.
6. Preview your blog to see how it looks. Move the element around as needed (simply drag and drop with your mouse).
7. Click Save.