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.