ADVERTISEMENT

How-To Display HTML Code in a Scrollable Box on Your Blog

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:

Your content goes right here.

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.

Views: 18

Comment

You need to be a member of Mom Bloggers Club to add comments!

Join Mom Bloggers Club

Comment by ThePranaMama on October 4, 2009 at 3:22pm
Hi Manda - I So appreciate this post, as I would really like to do this to keep my blog affiliate links from taking up too much room - but is this only applicable to blogger users? Thanks...(I use wordpress, and everything is to be pasted into a widget)...I'll give it a try anyway.

FOLLOW US

OUR BLOG

Cultural cities in the US to visit with kids

Family breaks are a great way to have fun together and make some memories that will last a lifetime, but choosing a city break in the US can also help your family to learn and grow together. With a large selection of cultural destinations on offer across the country, parents are spoiled for choice when it…

OUR DAILY PINS

Latest Activity

Jude-Anne Phillip posted a blog post
1 hour ago
Jessica Reid posted a blog post
1 hour ago
Viergelyn posted a status
"writing the lastest blog post of top 11 prodcust to own as a new parent and sunday mantra is tomorrow!"
2 hours ago
Viergelyn posted a blog post
2 hours ago
Wanda Jefferson posted a photo
5 hours ago
Profile IconEva Swain and Helen Zhang joined Mom Bloggers Club
5 hours ago
Wanda Jefferson posted a video

Endless Reader (Level 1) - Educational Reading Learning App for Kids

Apps4Kids presents Endless Reader by Originator. ➔ App Download (Apple App Store): https://goo.gl/lSlJ9M ➔ App Download (Google Play App Store): https://goo....
10 hours ago
Wanda Jefferson posted a blog post
10 hours ago

Advertisement

© 2017   Created by Mom Bloggers Club.   Powered by

Badges  |  Report an Issue  |  Terms of Service