Apr 18, 2010

How to Make a Scroll Box for Your Blog Button

I was so happy that so many of you were able to use my tutorial on how to make a blog button!  I love when my blogging addiction can benefit someone somehow...

So, now that you have a blog button you are probably wanting one of those handy scroll boxes so that other bloggers can take your button if they would like one.

Here's what you do:

1. Go to your LAYOUT page and add a GADGET.  Use the HTML/JAVA SCRIPT gadget.

2. Copy and Paste the following code:

<form>
<textarea rows="5" cols="20" class="html-test-bx" name="link" onclick="javascript: select undefined);"> <a href="YOUR SITE HERE/" title="TITLE"><img alt="IMAGE TITLE" src="IMAGE URL" /></a>
</textarea></form>

3. Now enter your website address where it says YOUR SITE HERE

4. The name of your website on TITLE (i.e. Jessica Hills Photography)




5. Get the web address of your image and enter it on IMAGE URL

6. Then take the name of your image out of the web address and enter it where it says IMAGE TITLE
          For example, my image's address is the following, and the image's name is highlighted:

 http://jessicahillsphotography.blogspot.com//" title="Jessica Hills Photography"><img alt="JHP+Button+Small.jpg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz4T4LbtKeSB9v827E6hYiBo6um_E_jwXJihO8UPN-0Fb-gzzDOFAiPMEEBIWQRPIpZqQI93AH-1MSaAdMO0fX5IPLwgFZXP0WBdICJgGBE29F49FRofZNWb4PrbrPQQ_rueO9Lvt20wpB/s1600/JHP+Button+Small.jpg

Now that your code is complete, you will want to do one more thing before you save and close it.

As you can see, I have an example down here to show you what it will look like.

7. You now need to take all of the highlighted (pink and purple) part and copy it.

<form>
<textarea rows="5" cols="20" class="html-test-bx" name="link" onclick="javascript: select undefined);"> <a href="jessicahillsphotography.blogspot.com/" title="jessicahillsphotography"><img alt="jhp+button+small.jpg" src="http://jessicahillsphotography.blogspot.com//" title="Jessica Hills Photography"><img alt="JHP+Button+Small.jpg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz4T4LbtKeSB9v827E6hYiBo6um_E_jwXJihO8UPN-0Fb-gzzDOFAiPMEEBIWQRPIpZqQI93AH-1MSaAdMO0fX5IPLwgFZXP0WBdICJgGBE29F49FRofZNWb4PrbrPQQ_rueO9Lvt20wpB/s1600/JHP+Button+Small.jpg" /></a>
</textarea></form>

8. Leave your gadget window open as you go to this website.

On this web page you will see an empty box with a button below it that says "Convert special chars to entities"

9. You will want to paste all of the highlighted area there, click that button, then copy your new code and replace the old code in your gadget window with that new code.

Basically, all you did was replace all of the < with &lt ;
and  all of the > with &gt ;  (but without any space before the semicolons)


You can do this all yourself, but when I did it at first I failed, and using this converter was a lot easier.  These just make it so the gadget doesn't convert the code into a picture (because you need the code to show so it can be copied from your box)

10. Save and Close, You're done!

I hope that wasn't too confusing!


This post was linked to these link parties.
Share this Post Share to Facebook Share to Twitter Email This Pin This

12 comments:

marci said...

YAY!!! Thank you so much!! I wanted to make a button but I am totally clueless when it comes to this blog stuff. I'm still learning. I think I'm going to make a button this week. You are amazing!!! :)

Mary Beth @ Live. Laugh. Make Something said...

big squeal of delight! Thank you sooo much!

Dreamy Whites said...

Thank you for sharing, I need to make a button, and have tried and it didn't work. I am going to give it a try again.
Thank you,
Maria

Elizabeth said...

Thank you for this! I posted on my blog (with appropriate back-links and credit to your blog). Hope this is okay?

Patricia @ 9th and Denver said...

Ouch!
That makes my head hurt!

I'm saving this post for a more 'with-it' moment for me.
Awfully nice of you to post it and give us newbies a hand.

blessings-

Denise Marie said...

Girl, I just need to know why peeps want a blog button. Is it because it is the cutest way to show you love their blog...to have their button on your page?? I have the names on my sidebar of the fav blogspots. Would it take the place of that?

Clueless about the finer details of bloggin'. lol

Fawnda@Fireflies and Jellybeans said...

Great how-to! : )

Susan said...

Hi there. My button location is on flickr but when I click my button or when someones else clicks it from another blog I want it to link back to my blog. Do you know how I can do that? Otherwise I have the scroll box on there fine.

mbb said...

Thank you sooooo much for this post & also for the post on adding a button.

I never dreamed that I could do this myself...I have been paying someone else to do this for me!?!?!?

Ta muchly :o)

Unknown said...

Awesome Pics Thanks For Sharing....
In wedding the dresses design for groom and bride is the one important thing which makes them look as preety and handsome as never ...
Montreal Wedding Entertainment

Anonymous said...

Usually I don’t learn article on blogs, but I would like to say that this write-up very compelled me to try and do it! Your writing style has been surprised me. Thank you, quite nice article.
website design


Wilda Jones said...
This comment has been removed by a blog administrator.