Saturday

display HTML code in a scrollable box

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.

12 comments:

Xenia said...

You're tech-savvy!

I managed to win a blog makeover in a giveaway recently, so I'm having them put a button on for me but if I didn't, I would definitely use your info. Just through trial and error I managed to figure out how to do some html things and how to make a button myself, but not how to add the code box like you have shown.

It's really frustrating reading so many tips on various sites and then trying them out and having them not work. I had better keep an eye on your site for more stuff that I can use in the future!

alyssa said...

great tip, thanks!

Justine said...

Great info! Sometimes there are too many ways to do the same thing! :)

BALLET NEWS said...

Oh WOW, this is so clever - you have the most gorgeous site here and I had to stop by to leave this comment for you – and to say hello of course ! Your posts are creative and original and you have interesting pictures. It's all perfect ! Thank you for sharing your site and best wishes....

Liz Mays said...

I remember trying to do this myself the first time and it took me forever to figure it out. I never had to do it for my own blog but I did it for somebody else and it was such a hassle!

How nice of you to share!

Chris Mollo said...

Great tutorial! I have a question, though. I want to know how you got the little slide show of your "Blog Friends" in your blog. I've wanted one of those scrolling widgets for a while. It would save me a lot of space and it's attractive. You should do a tutorial. A lot of people would appreciate it.

Grizzly Bear said...

My eyes are getting crossed, it is late LOL.. I am going to have to come back tomorrow for this part of the info.

thanks again!

Barbara said...

Wow I actually pulled it off and managed to add a picture too. This might be a good way to put links without them taking up a bunch of space. Well the option of only showing five blogs at a time helps too. Thanks for helping out a technotard that's totally clueless about this sort of thing.

Unknown said...

You're welcome Barbara, I'm so happy that I could help

Amy said...

Thanks so much

Unknown said...

i swear i'm not an idiot, but i cannot make this work. i made this button for my friend's daughter that is going through chemo, and then changed it so anyone who clicks on the button will be taken straight to her blog about the cancer. i've tried putting that as the code, i've gone back to photobucket and gotten the original code... and when i put it in and save, it the lt's and the gt's show up! and the code doesn't make any sort of button on anything. :-P anyway, kinda frustrating, but i'll keep trying. thanks!!! and hey, you have all the old babycenter smilies!!! awww, i've missed them! :*

Unknown said...

THANK YOU SO MUCH!!! I can't believe I was able to finally make a button and scrollable box myself. Great instructions!

Check out the final product at http://babygiveawaysgalore.blogspot.com/

Can't thank you enough! :)

Kontera