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
1. Create your button as a small square image.
2. Upload it to Photobucket or another photo storage site.
3. Copy its html code. Click here for help getting an html code for your button.
4. 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
5. Test your finished code by adding it as an HTML gadget in your practice blog's sidebar.
6. 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
1. 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>
2. Go to your practice blog’s layout page.
3. Select add a gadget (HTML/JavaScript) in your sidebar.
4. Copy and paste your new code into the box. Hit save. Preview.
5. 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
1. 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.
2. 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.
When everything is exactly as you want it, open your real blog in a new window. Create new HTML/JavaScript gadgets and copy and paste your newly created codes in. Hold your breath and preview your blog. You should see your new beautifully created button atop a perfect little scroll box.
Enjoy your new button! If you’re like me, it took you forever.
For more help, visit Tips For New Bloggers. 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.
Related Posts:
Get An HTML Code For Your Button
How To Add A Button To Your Sidebar
How To Center A Button
Align The Buttons In Your Sidebar
46 comments:
Nice job! You are very kind to share that tip!
I had something similar to this a few weeks ago. It's always great to have someone like you share their expertise on something others can use!!! Great job.
Thanks for such a wonderful comment you left me today! Always love having you visit with me! Happy Tuesday.
I always wanted to know this. Thanks so much!
Wow, you are awesome! Thanks for sharing this!
Beth
this frustrated me too until i figured it out. you did a nice job of explaining it to everyone! :0)
OHHHHHhhhhhh! I can't wait to try this later. I sooooooooooooo appreciate you posting this Fab Tip....I will be sending people your way today (I don't have as many readers as you)...you will probably see 1 more person =) . Thanks Again!
Great information!
Happy Tuesday!
:)
Becki@BlogMommas
You, my friend, are the absolute best. I was just thinking yesterday that I should call our web designer back to make a button for us. Your timing is amazing!
Question: What are you using to create a small square image (in step 1)? I am not sure where to start.
Thank you, again!
-Francesca
Can't wait to get to get my 'Sneaky Daddy' button going!!!
Thanks for taking the time to put this up.
It totally worked! Thanks so much for the Tip! It did take a few (thousand) tries...actually 3 tries as you were so great with your explanation....which by the way makes you a great consultant! I am so indebted to you! Thanks a million times over!
You are so wonderful to take the time to share these tips, my friend! :)
Courtney
I have been thinking about doing this but didn't even know how to get started. Thanks so much for sharing.
You explained it wonderfully! i just finished (on my new practice blog). Thank you so much!!!
Thank you so much!! I've been looking all over the place to find out how to do this!
Thank you! I made my first button...a "happy one month blogaversary to me" gift. I also used your tip to make my twitter button! You Rock!!! I was done with both in 20 minutes (not counting the photoshop work).
It took FOREVER but I got it! THANK YOU!
Thank you, thank you, thank you! You are the best! IT WORKED LIKE A CHARM!
I got it on the first try, but I'm familiar with HTML. Thanks for this great tip!
Thank you so much for the tutorial!! I've done this myself but never knew the technical aspects of it.
Oh my goodness!! Thank you so much for this tutorial!! I made my button a few days ago, but wasn't sure about how to make the html box!! You are great at step by step instructions! I think I got the box right on the first step...which makes up for the fact that I had to load my button onto photobucket a million times to get it the right size!! Thanks again!!
OH you so rock!!!
Thank you - if only I can figure out how to create a button in scrapblog and make it look clear through photobucket. Urg.
My left hand for my mac and Photoshop of olden days!!
Thanks - Em
Thanks to you I just made a button with the code box in under half an hour! Thanks so much for this fabulous tutorial! Wanna see? www.thepittsburghhites.blogspot.com
I made the button at the top right for my Photography wesbite. The button down below I had made for a friend a few weeks ago and had NO clue how to post the code for others. If they wanted it they took the initiative to get it though!!
So thank you, i'm now a faithful follower!!
-Ginger
WOOHOO! Thank you so much! I was successful making my own button but not the area below it to share the code... I WORSHIP THE GROUND YOU WALK ON for this tutorial! :)
bless your patient, kind, sweet, soul!
I was successful, check it out at http://ladygaladrielkj.blogspot.com/
Thanksssssss very Muchhhhh!! I have added you to my blog , You are awesome!! thanks for ur post.
Help a lot .
RB
Again, you have reached Rock Star Status for me. Thank you for our time in posting this.
I have tried this in a few different tutorials -- but haven't been able to figure it out. Guess what -- with this one, it worked my first try! Thanks SO much!
THANK YOU!!!! I have been trying to figure this out for a while. A great tutorial.
Tierra
pebblesandpoppys.blogspot.com
THANK YOU! I only had to do it twice and did get irritated but you are so sweet to do this. :)Lisa
Thanks so much you are amazing!!!!
It took me two tries!
You are the BEST!! I found your link from another lady and FINALLY made a scroll bar... THANK YOU! I have saved you as a favorite and will pass on your amazing help to others... thanks again!
~Whitney
Thanks so much for this. I have been all over the web trying to figure out how to make a Grab Button. It kept coming with extra characters and boxes with red "x's." Thanks to you it looks perfect now. I was so pleased with this and your other tips, I wrote a short post about how great your blog is. I will grab your button too, of course.
Thanks again!
You have put together a great and helpful site. I will be putting your button on my blog: Always Undecided Designs
OK - I'm back (and thanks for leaving a sweet comment on my blog!) I was following your instructions for putting a button on and I wanted to draw your attention to something:
"alt=" is the description used if the image is not working
"title=" is for the hover text
Check out more here.
Hope that helps!!
Jill, Is there a correct size I should make this image for a button?
Becca frontdoorjunkin@q.com
THANKYOUTHANKYOUTHANKYOU for taking the time to post this...and all your other helpful posts. My entire blog "look" is thanks to you! Your button is in my sidebar (though I only have one reader currently...I'm just a baby blogger) and will stay there!!
I think its time to try and create my own button and html box....everyone brace yourselves...I'm going in.
http://randakaye.blogspot.com/
I am so HAPPY I could cry and pee my pants at the same time!! I have searched and attempted to add a box to share my button code MANY times. I spent hours reading people's instructions and NEVER got it...and I find myself to be pretty computer/blog savy! Your instructions are perfect...got it on the 1st try!!!! THANK YOU!!!!!
Borrowed this again. THANK YOU!!!!!!
I've used this again, your tutorial is so simple I didn't curse or pull my hair out. I made two buttons in less than a half hour :)
awesome THANKS!!!
Thanks for sharing. You are so generous. I did it but I didn't want it centralized. I did a button for my pet, Santa's blog. Once again, thank you.
Thank you so much for this information. I am still working on it but I feel confident that I will finally get my button working great. I added your button to my site and started following you too! Thanks!!!
http://livingthediylifestyle.blogspot.com/
I too am in awe! Great blog, great tips and instructions! I added your button to my blog to help pass on the goodness! Thanks bunches!
2thelessons.blogspot.com
I did everything as you said and it went great. But when i copied the scroll box html and pasted it in my test blog post, a slim rectangular box shows up with a question mark but no button. Is this normal?
Thanks, Kim
BTW, This worked like a charm
Post a Comment