How do you make a scroll box for HTML code? *Updated*

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:

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

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=”http://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=”http://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; HTML Code Here &gt; . The code for your button HTML will look like this:

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

(Note: The bold isn’t necessary, it’s just my way of showing you where I’ve inserted the &lt; and &gt;)

This works because &lt; is the HTML code for the < sign and &gt; is the HTML for the > sign. Placing &lt; in place of all < and &gt; in place of all > will allow your raw HTML to show up because it replaces the < and >. You’ll need to put &lt; and &gt; where ever there is an < or > in your code.

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.

35 Responses

  1. Christy April 15, 2008 / 11:15 am

    I’ve been wondering how to do this! Thanks for the great start. I’m using WordPress, so I have to try it now to see if it works.

  2. Diane April 24, 2008 / 8:51 am

    Thank you, thank you! This is just what I needed, and I didn’t even know what to call it for Googling for directions.

  3. Megan@SortaCrunchy April 24, 2008 / 4:09 pm

    I must be missing something. I keep trying to install this code on my Typepad sidebar and it keeps showing up as a scrolling box with my button in the scroll box, not the CODE for my button. I’ve copied and pasted as well as typed in manually the code that you give us, but ACK! What am I missing?! Help! ๐Ÿ™‚

  4. oh amanda September 3, 2008 / 8:43 pm

    I’m the same as Megan. My button keeps showing up in the box! Not the code. Grrr….

  5. heather October 2, 2008 / 5:50 pm

    i can’t get this to work in wordpress. It just shows up as two images rather than the image and the code box. Help!

  6. Ane Fallarme December 4, 2008 / 12:33 pm

    i have the same problem as megan@sorta crunchy and oh amanda… my button shows up in the scroll box instead of just the html code… i use blogger… please help!

  7. Sharla January 12, 2009 / 1:54 am

    Thank you so much!! You made it soo easy!

  8. Blue Castle January 19, 2009 / 8:45 pm

    Ack! I’m having the same issues as the other bloggers who commented. My button shows up in a scroll box, with no text. What am I doing wrong? Thank you. ๐Ÿ™‚

  9. Pattie Cordova January 26, 2009 / 11:27 am

    I’m having the same problem with the badge showing up on the scroll box – it’s because Blogger reads the html code that is supposed to go in the box as “html” – meaning that it doesn’t just take it as text. I don’t know what the extra codes are to make it read as text – anyone?

  10. Jane Blogs February 27, 2009 / 4:23 am

    I’m having the same problem as Heather with my wp blog, and a second image shows instead of the scroll box.

    Do you have a work-around for that?

    Thanks, Jane ๐Ÿ™‚

  11. Jane Blogs February 27, 2009 / 4:41 am

    No problem, I’ve figured it out myself.
    Aren’t I a bright girl? ๐Ÿ˜‰

  12. Tiffany April 5, 2009 / 9:38 pm

    I am trying to add my button and html to my home blog to advertise for my business blog (www.chic-cheeks.blogspot.com) and I’m having a little trouble. The HTML is there, but I can’t get it in a box. I have messed with the px sizes and it doesn’t seem to do anything. If you could go to my home blog and see if you can tell what I have done wrong..that would be great. Thanks so much,
    Tiffany

  13. Shinta May 25, 2009 / 7:27 am

    Jane, If you’ve figured it out, do you mind sharing how you did it please? I’m having the same problem as the other bloggers. Thanks.

    • admin May 25, 2009 / 1:25 pm

      Shinta,

      I’m re-writing this post and it will be live on Thursday, May 28. I’m hoping the new edits will help you and others with how to make the HTML code show up in the scroll box.

  14. Shelley June 5, 2009 / 12:59 pm

    Mad love for helping me out. I got it working and it looks fantastic! Thank you times a million!

  15. Lin July 13, 2009 / 12:06 pm

    I’m trying my darndest to get the codes to show up correctly on my sidebar but I can’t figure out what I’m doing wrong! The button I have shows up fine but the scroll box doesn’t show any text or code inside. What am I doing wrong? Help please!

  16. Lia August 4, 2009 / 11:16 am

    I’m trying to put my link (from photobucket),but it’s not working!!!
    I copy paste your code,then i change your bloggingbasics101.com into my site. and then the text code isn’t appear. only image button, not text. and the worst thing,,,no scroll!! could you help me..?? please..please..

  17. Christin August 13, 2009 / 8:07 am

    I cannot get this to work on WordPress. Any suggestions? It seems I can’t get any code to display a button code! Help!

  18. Katie November 21, 2009 / 1:42 pm

    Perfection. Your directions are great! I’ve been putting off learning how to do this for a while. Thank you so much for including the workaround for CMS editors and code views.

  19. Kay January 3, 2010 / 11:50 am

    Ok, I’ve tried repeatedly, and I just can’t get it to work. All that shows up is the button with a red x in a box above it. My button picture seems to have too much html or something. When I paste that into “Your Text Here” that’s all I get. Oh well.

    • Melanie Nelson January 19, 2010 / 5:36 pm

      Kay, without seeing your code, I’m betting that the issue is the smart quotes (curly quotes). My advice is to copy your code, paste it into TextEdit (Mac) or Notepad (PC). Delete the quotes and then re-type them. Save your code. Copy it back into your HTML editor and save. I hope that works for you! Nine times out of ten it’s the curly quotes that mess this up. I’ve several people swear they have the quotes fixed, but when I see it, the curly quotes are the problem! ๐Ÿ™‚ Good luck!

    • Heidi October 8, 2012 / 1:12 pm

      Hi, Melanie. Thanks for this great tutorial. It works great for me, but I have a problem when my followers grab my button. My site automatically changes quotes to smart quotes. I have written instructions to my readers to switch the smart quotes when they grab my button, but many people don’t read the instructions. I am trying to find a way to imbed a font in the button code, but that doesn’t seem to be working. Any ideas?

      Thanks!

  20. Cheryl January 24, 2010 / 8:37 pm

    I”ve tried putting my code in – even put into Notepad first- and all i get is red “x” on the blog view page… i do get the box- but no image and no html code to show up…
    here is my code…can you help me?
    THANKS

  21. Melanie Nelson January 24, 2010 / 8:42 pm

    Cheryl,

    Your code has a bunch of extra spaces before the slashes so it won’t work. You need to get rid of those spaces before the code will work.
    Melanie

  22. Jennifer March 21, 2010 / 8:26 pm

    I have followed your instructions but still cannot make it work for me. Instead of a box showing up, some of the coding shows up then the image does. Please help! ๐Ÿ™

    (Site linked)

  23. Melanie Nelson March 21, 2010 / 9:03 pm

    Jennifer, I looked at your code and it’s not the same as what I’ve instructed above. You have ” before the word border instead of an opening straight quote. You also have &#8221 after the word white instead of closing straight quotes. Then you have actual brackets (< and >) instead of the HTML for brackets. That won’t work–the browser will try to read it and insert the picture instead of the code. You *must* have your code look like this:

    <“a href=”http://www.itsbeenstitched.blogspot.com”><img src=”http://i1046.photobucket.com/albums/b469/Jen2000/Its%20Been%20Stitched/Linkbackpicture.jpg”>

  24. amanda March 15, 2011 / 11:41 am

    i’m trying to do a post and use some code, it’s a tutorial. but i can’t get the code to just show up without trying to become what the code is for, if that makes sense. how do i get the code to just show up as code like you have above?

    thanks!!

  25. J.LiLy April 22, 2011 / 2:13 pm

    I’ve mostly got this working, but I cannot seem to get the scroll box to show up for whatever reason. The code itself shows up just fine, it’s simply not in a scrolling box.
    Any suggestions?

  26. Lenn May 13, 2011 / 4:40 am

    What do you do if you want the border a different color?

  27. Laum July 27, 2011 / 6:36 am

    I tried it, but the scroll box kep displaying an image not the code, please help!

  28. Katie Jones September 25, 2011 / 12:14 am

    Thank you so much! I’ve been trying to do this for a while now and I’m so happy to have come across your page. It’s full of really useful information!

  29. Megan October 29, 2011 / 2:52 am

    I’m having a bit of trouble. I just want the scroll box, and I read the entire thing and copied the code. The text shows up, but it isn’t in a box at all. It’s just normal text. Why???

  30. Chandi February 20, 2012 / 11:40 pm

    Thank you for this! It’s perfect. I’ve been wondering how to do this for ages now. I’m off to try it!

  31. Mia-Bohรจme June 12, 2012 / 3:38 pm

    hello. i am trying to put just a scrollbox in my xanga. i want like 3 of them. i want nothing in them, as i will put my own lists in them after. i lost my old xanga which had scroll boxes and i was able to figure out how to copy one and make 2 or 3 more, it looked amazing. i also copies the codes to a document, which is now gone ๐Ÿ™ i feel sooo stupid, this is like the 4th layout i’ve tried on xanga, all from “Create Blog”, as xangas offerings are not my style at ALL. plz helpl i BEG YOU! thank you,

    <3 Mia-Bohรจme

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.