How To Make A Grab Box For Your Button - Advanced
This tutorial will show you how to put your button on your blog as well as create and install an HTML scrollbox so that others can put it on their blogs. These instructions assume that you already know how to create button-sized images. There are no risks to your template, but it is a tricky tutorial. It was not written for the beginning blogger, but for those who feel comfortable working with html gadgets.
Follow these directions exactly. The first time I did this it took me well over a frustration-filled hour and I had to take several sanity breaks. Be patient and persistent. You will get this!
I am sure there is an easier way to do this. This is what works for me:
- Making your image link back to you
- Create your button as a small square image.
- Upload it to Photobucket or another photo storage site.
- Copy its html code.
- Alter your code by looking at my new code below and replacing the colored portions with your own information:
<center><a href="http://sneakymommablogdesign.blogspot.com" target="_blank"><img src="http://i409.photobucket.com/albums/pp178/sneakymommablogdesign/smbuttonblk.jpg" border="0" alt="Sneaky Momma Blog Design"></a></center>
Red: where you want your button to link back to
Green: what you want the text to say when someone hovers over your button
Blue: add this to automatically center your button in the sidebar (optional)
Purple: your photo bucket URL- you won't change this in this step
Test your finished code by adding it as an HTML gadget in your practice blog's sidebar.
If all looks well, proceed to making the HTML box. If not, go back and follow the above instructions exactly the way they are written. It will probably take you a few tries before you get it right. It took me several tries the first time I did it. DO NOT PROCEED UNTIL YOU GET YOUR BUTTON LOOKING EXACTLY AS YOU WANT IT.
- Making the nifty HTML scroll box to put on your blog
- Copy the following code and paste it into Word or Notepad so you can alter it to include your own information, just like in step 4 above:
<center><textarea rows="4" cols="13" name="Sneaky Momma Blog Design" readonly="readonly"><center><a href="http://sneakymommablogdesign.blogspot.com" target="_blank"><img border="0" alt="Sneaky Momma Blog Design" src="http://i409.photobucket.com/albums/pp178/sneakymommablogdesign/smbuttonblk.jpg"/></a></center></textarea></center>
- Go to your practice blog’s layout page.
- Copy and paste your new code into the box. Hit save. Preview.
- If the HTML scrollbox shows up and looks good, woooo hoooo. If not, go back and try again. This may take you several tries and several minutes, if not days. DO NOT PROCEED UNTIL YOUR HTML SCROLLBOX SHOWS UP IN YOUR PRACTICE BLOG’S SIDEBAR AND LOOKS GOOD.
- Putting your button on your blog
- Copy the code from the HTML scroll box that you created. Add another HTML gadget to your sidebar and paste this code in it. Save. Preview. It should appear all nice and centered above your HTML scroll box.
- Go back and check your work. Make sure that when you hover over your image that the right words appear. Check that when you click on your image that it takes you to your ‘real blog’. If all things are good, proceed. If not, go back and do it again.
- Enjoy your new button! If you’re like me, it took you forever.
I’ve found that for some reason, I can’t always understand one set of instructions, but that two sets tend to fill in the blanks. If you have trouble, take a good long break and come back to it.