Saturday, November 22, 2008

How to make a scroll box?

This is how to make a scroll box similar to the one on my sidebar called Grab the Button.


<center><a href="http://jenieshell.blogspot.com/"><img src="http://bp3.blogger.com/_TkBMigkv8rw/SCkGAOmkkFI/AAAAAAAAAEY/xqQf5YXgyRU/S170/Blog+Design+Button+copy.gif"/></a></center>



Here's the code you will need for the scroll box.

<div style="border: 3px solid black; overflow: auto; height:
125px; width: 125px; color: black; background-color: white;">YOUR
TEXT HERE
</div>


You can change the color of your border by changing the color from pink to another color, or the size of your box by changing the number of the height and width. (example: 200px)

You will need to copy this code into your side bar or post where you are needing the scroll box. You will also need to add text that fits your needs where it says YOUR TEXT HERE! If you are wanting to make a scroll box for a "grab the button code" you will then add the code for your button here also. If you want to know how to make a blog button click here!

Once you've added "Your Text" you are now ready to copy and paste the entire code into your blog post or sidebar.

If you are installing it to your Blogger sidebar you will select Add a New Gadget in your layout page. Next you will select HTML/Javascript and paste your code. Click save and enjoy!

FYI: If you are wanting to display HTML code inside your box, such as code for a blog button, you will need to alter the code so your computer won't read the html code. To learn how to alter your HTML code GO HERE!!


52 comments:

Nichole said...

I have to say thank you yet again. A while back I thanked you for showing me how to make a button and now I'm thanking you for showing me how to make a scroll box. You're blog has been so much help to me.

redpolkadot said...

Ok so I am totally dumb I decided to explore your blog a little and found this. Let me just tell you are amazing once again. I haven't created this yet but I am about to. Thanks for making everything so easy.

My First Kitchen said...

This is such a helpful tutorial! And your a SITS girl! What fun. :) Thanks so much for the help!

Kelly said...

I struggled a little with this. My button was great link and all, but the scroll box did not go well. If I pasted my text where you indicate, I ended up with an image in my scroll box rather than html code for grabbing. I ended up pulling up your page source code, copying the scroll box portion code from there, then putting my information in place of yours - and, this worked. Thank you for the adventure. Come by and see my new button for Blue Plate Mondays and my new scroll box! ~Kelly

unDeniably Domestic

Tia said...

I love your tips and I am so thankful for your blog knowledge.

But I can't, for the life of me, figure out how to make a scroll box with the code inside for people to get a button. I've tried multiple times and have given up in frustration.

Do you think you could give me a little bit further assistance??

Dorci said...

Okie doke, I have my blog button made, now I'm working on the code for the scroll box.

So when I replace the "your text here" in the code, is that where I put the entire code that I used to format the button?

Then which parts of it do I change to alter the html code? If you want to email me, you can reach me at jranddorci@qwest.net.
Thank you!
Dorci

Allred's said...

YEAH, I love you, love you, love you. I am learning a little bit everyday and your tutorials are a key ingrediant in my blogging education. Thanks again for your fantastic wisdom!!--Amy Allred www.imthemoneymaker.com

Staci said...

OK I have been at this for about an hour now. Can you post the html code you have on your side bar for your grab the button so I can just copy it but fill in my own image and blog address?

Staci said...

Whew still at it. I ahve been wanting to make one of these for a while. I got it all done but I tried to add it to another blog I have and the button doesn't link back.
Help.
Thank you so much for your work on all these codes.
Staci
stactheacetx@yahoo.com

Rana said...

I got the button figured out, but I'm still having trouble with scroll box. Could you give me a hand?

Thanks,
Rana
ranidai@hotmail.com

Kenziepoo said...

I got the button working, but I am having issues with the scroll box. Could you help me? My image keeps showing up in the scroll box and i thought I followed the instructions on how to change that from happening but still having issues! Thanks
r.rachelle@gmail.com

Traci~ Ordinary Inspirations for the everyday wife, mommy, and homemaker said...

PS: I figured it out.. thanks for all your help!

I LOVE your blog!

Traci

Lady Baillio said...

Where do I add the text? It doesn't work for me. Please help!

Courtney said...

Thank you so much! So helpful!

Katy said...

Thank you! This has been very helpful! :)

tiffany and darren said...

the button and scroll box are not working on my blog. i am doing exactly what your directions say

Terrie said...

Thank you so much, I just created a button and a scroll box for my new blog, they look awesome and they work...thanks for the great tutorial!!

John and Tina said...

I am really struggling with the scroll box. I'm confused what you mean with "Your Text". Can you post all of your code and I can change it to my information?

oliviasmama2001@yahoo.com

Thanks for the information!

Friend 4ever said...

Hey thanks a lot I going to try this on my site www.pcfrnd.co.cc
It is very useful for me..
Again thanks a lot.....

Cheryl said...

You are wonderful!

Followed directions and made my button then the scroll box!

Thanks!!!!

pymette said...

oh my word, thanks so much for all of the helpful links! I used your tutorials for the scroll box, as well as the link to automatically alter my HTML to go inside the box.

For some reason, I couldn't get the button image itself to display unless I directly copied someone's code and changed it to my own site/image source.

But I did eventually get a button & scroll bar! Thank goodness my google search led me to your helpful instructions!

leanna x

Lookie Lou TPPC.tv said...

Bless you! I have been going crazy trying to figure this out! I will give it a go! And you are a SITS girl too! Cool! Thanks again and Woofy Woo!

Genevieve said...

i just used your post to make my own button/link for others to grab my button! thanks so much!! i posted about it and shared a link back to this post here-

vievesscrapbooking.blogspot.com

thanks!!

a little bit of everything said...

Well, I believe I have successfully posted a button and scroll box on my blog after Craftaholics Anonymous referred me to your blog. I spent hours one night trying to do this and could only come up with the photo but finally succeeded with the scroll box. Thanks for all the explicit directions!

Alma Marie said...

Thanks for the blog design tips, Jenieshell! Your tips really work! I just made my own blog button and scroll box! Now, hopefully others can find my blog! :-)

Alma-Marie
www.twilightfamily.net

TOTEally Posh! said...

I just came across your blog today! I am so excited! I figured out how to make the button, but can't seem to figure out the scroll box. When it says "your text here", what am I supposed to put in there? I just keep coming up with an empty box or one with my button picture in it. Any suggestions?

Kerri said...

I'm so confused, I'm like several of your other fans, I can't figure it out. when I add my own texts it just shows a picture of my button, not the code for someone to add it to their blog. Please help!! Thanks!

Hoot said...

Thanks for the information but I seem to be so slow at all the tech stuff! I'm pulling my hair out. I can get the image and scroll to show up on my blog and it looks right but when someone copies my code to post on their blog it comes up and you can see the button but when they click on it it doesn't bring them to my site it shows up as page not available. I know I'm missing something but not sure what I'm doing wrong. Any advice? Thanks

Hoot said...

Ok I figured it out! I forgot to add http:// when I was typing in my blog address. Told ya I was a lil slow lol. Thanks for the tips they are great!

mayorsky said...

Thanks so much for the tutorial.it's very easy to follow.. :D

Bellabug said...

Thanks for the helpful information!!

kewkew said...

I wanted to thank you for your advice on making a scroll box. I was confused what was meant by "Your Text Here" but I played around with it a bit and got it to work. Thank you for the link for your info on how to alter the html code. I linked to your blog in my post on my blog button:
http://totsandme.blogspot.com/2010/07/success-i-have-button-and-scroll-box.html

Guatemalan Genes said...

I have a button, thanks to you!

Amy said...

Jenieshell -

Thanks so much for the helpful info!! Got buttons and codes on both of my blogs... many :) sent your way!

Amy
http://worshipwhileiwait.blogspot.com
http://gracefull-living.blogspot.com

MsNoireBerry said...

Thanks so much for this info!
You are truly a Godsend!

Cristan said...

Thank you so much for this post! It took me awhile to figure out the scroll box, but I finally got it! :D I'm putting your button on my page. Your site is SO helpful! :D

Kimberly said...

What a great post about creating buttons. I was totally successful because of your information. Thank you so much.

blessings,
Kim
www.kimberlysfrenchbeecollection.blogspot.com

clarissa said...

After three other tutorials, I got yours to work AND I understood it! Thank you for the CLEAR instructions!
rissdesigns.blogspot.com

Irina said...

Hello,
Thanks for the tutorial, I was able to make my button, but I seem to have the same problem as many others regarding the scroll box... the image of my button appears in it. How can I do it?

Clare D. said...

Thanks for your tutorials on adding a blog button and the script to let others add your button to their blogs! Now, I just need a guinee pig!

Jennifer said...

Thanks so much for the great tutorial & links! I now have a blog button & the box so other people can grab my button! Great instructions!

Asha said...

Thanks for your blog post. Since my blog just turned 1 yesterday I wants to make a button for my blog and another blog refered me to you but how do i make the scroll go up and down instead of left to right?

Thanks

Mary said...

Thank you so much for this post! I have spent most of the morning researching how to make a button for my blog and came across your post. I haven't attempted this yet as I think I need to take a break before taking on this challenge. I will let you know how it turns out:)

Jessica said...

THANK YOU!! I have been sitting here for hours reading over blogs, copying, pasting, changing, blablabla... and haven't got anywhere... UNTIL... dumdumdeedeedummmmm....I found your blog, which I will now follow :) So easy.. and you walked me through every step where I was tripping up! You're awesome.

ReadyOrNot said...

OMG, That was so hard, but I did it! Thanks!

GraceandMe said...

Thank you!!! From the bottom of this novice bloggers heart. I had attempted the button and scroll box using a different tutorial and thank God I had backed up my blog first *epic fail*. This one worked for me first try, so I immediately made a second before the brain cells lost all knowledge retention :)To share the love I mentioned you in my post...

http://www.graceandme.com/2011/05/creating-blog-button-x2.html

andie jaye said...

amazing. amazing. amazing. thank you so much for making this blog. it was sooo much help after i crashed and burned on 2 other tutorials. i wrote a little review of this at the bottom of my button page refering my fellow bloggie-boos to your button and scroll pages for help. i have a link for each of those, plus one for you homepage. i hope that this is okay. just wanted to make sure i gave you credit for helping. here's the link if you want to check it out... oh! and i'll be a new follower when blogger has that back up and running :) http://crayonfreckles.blogspot.com/p/buttons.html

have a blessed day! andiejaye@crayonfreckles

Devon Ashley said...

You are a godsend! That link worked perfectly. :)

Holly said...

Hi Jen~
It's me...again...I emailed you a few weeks back about making a button and scroll box (since then my daughter got married and I have family in). Anyway, I tried again and have my button up (yea!), and I have a scroll box (again, yea!), but the link in the scroll box doesn't work. Would you mind taking a look at it to see what I need to do?
Thank you so much!!

Donna Hacker said...

What a great blog you have! Thank you for the tips on the button; it worked for me and I'm tickled pink! Now if I could only figure out the scroll part. I've made multiple attempts but am failing. Could you please give me a few more clues? Thank you in advance for any help you can give. Also, what exactly is the "scroll" part for anyway? I'm new to these buttons.
Best Regards,
Donna
http://dhacker.blogspot.com

Foster Mamma said...

Thank you! SO helpful!

Alisa
http://attemptingagape.blogspot.com

mommyworldadventures said...

thanks!