I've been trying for a few days to get one of those little scroll boxes with the HTML code for my button up on the site. I know that I am not the first one to have a hard time figuring this out because I found a lot of different sites that claimed to explain it. I've been trying for three days to do this so obviously all of these sites do not make it clear. I decided that I would do a quick write up of exactly what I did to get the little scrollable box to finally appear on my site. First of all you need to copy the script for the scrollable box and place it into a HTML widget box. (I'm using blogger) Here is the script that you need for the box:
<div style="width:200px;height:100px;overflow:auto;
border-width:2px;border-color:000000;border-style:solid;">
Your content goes right here.</div>
The above code will display like this:
Your content goes right here.
Now, see where is says:
="width:200px;height:100px;
You can change these numbers to whatever size you need to fit in your side bar or content area.
200px by 100px is a normal single side bar size
125px by 100px is the size of a normal button
426px by 100px is the normal size of the main content area of a blog
Once you have determined the size of your box it is time to insert the HTML code that you want to display. See where it says, "Your content goes right here." You guessed it, that is where you will put the code that you want to display.
Delete "Your content goes here", and put a couple of spaces between the last > on the left and the first < on the right. I find it easier if you put the extra spaces so that you don't change the wrong part of the code. Now, paste your HTML code with the spaces seperating it from the code for the scroll box. In order for your HTML code to be displayed properly you will have to change each of the < and >. You are only going to change the < and > that are part of the HTML code that you want to display inside the box. The < and > that are in the code for the actual scroll box will need to stay as they are.
Okay, so all the < in the code you want to display need to be changed to & l t ; (do not include the spaces) and then change all the >'s to & g t ;(do not include the spaces). This way the code will be displayed the proper way without being changed to what the code instructs the computer to do. So, what that means is:
change < to & l t ; (do not include the spaces) change > to & g t ; (do not include the spaces)
You are only going to change the < and > in the code that you are trying to display inside the box, NOT THE < AND > IN THE CODE FOR THE ACTUAL SCROLLABLE BOX.
You should now see the scrollable box on your site with the HTML code that you inserted inside of it.
I hope that this makes things easier for some of you because I had such a hard time figuring out how to do this. Hopefully I explained it for you guys.
