Saturday, January 21, 2012

My New Button!

Wow! I’m so excited this morning because I finally got around to making my very own blog button! It’s very simple but I’m extra proud of it because I made it myself AND I made it with a picture from my wedding. This flower was in my bouquet :o)







I had no idea how to get started on this thing but figured it out by finding a few tutorials online. Here is how I did it:
1) Basically, I took a picture from my wedding album and re-sized it to 150x150 by using my simple photo editor. (If you have Microsoft Office, Picture Manager works great!)
2) I then put the picture in Microsoft Word and added text on top of it by using a text box. You can also do this in Power Point.
3) I copied the entire thing in ‘Paint’ (I think everyone with a PC, that is not a Mac, has this!) and saved it as a jpeg. I’m sure it would have been fun to use Photoshop or some other *fancy-schmancy* program but I am not equipped with any of that yet.
4) The last step was to upload my picture into Photobucket.com. This allowed me to get an HTML code for my button. This website is super easy to use and, most importantly, it’s FREE!!!

If you are interested in creating your own little bloggy button, here is the HTML code that you need to make your new button come to life on your blog (just fill in the missing pieces):


<center><a border="0" href="http://YOUR BLOG.blogspot.com" target="_blank"><img src="YOUR ‘DIRECT LINK’ IN PHOTOBUCKET"/></a></center>

And here is the HTML code that you need to make the scroll box under your button (if you want people to add your button on their blog, they will need this):



<center>
<form>
<textarea cols=”15″ rows=”6″>
<a border="0" href="http://YOUR BLOG.blogspot.com" target="_blank"><img src=" YOUR ‘DIRECT LINK’ IN PHOTOBUCKET "/></a>
</textarea>
</form>
</div>
</center>



So all you have to do is add a gadget in your blog layout (choose the gadget for HTML code) and copy both codes from above. Don't forget to replace the bold words by your own info!

I also found a website where you can test your HTML code. This was very useful because I had no idea if my code would work or not. Go HERE to test your HTML code.

An hour later (don’t laugh at me you experienced bloggers! Hehe!), I had a beautiful blog button that I am very proud of! YIPEE!!!

 Well, I’m off to make more coffee... Have a good one!

9 comments:

Heather said...

I finally made a button for my blog, too! Your directions are MUCH MORE simple than the ones I googled. HAHA! I wish I had seen this before I attempted mine. Great job on it, it's lovely!

Stacy said...

Hey Valerie! I am following you back! ...looking at your blog made me remember to add Kevin and Amanda to my inspiration buttons!...now I am off to check out your blog!
Stacy
2nd Grade Paradise

Ms. Rachel said...

Im adding your button! Way to Go, Im super impressed that you made it yourself!

kjohnson4 said...

I just wanted to thank you for sharing with everyone on your blog! All your ideas are so cute:) And your button tutorial is awesome! If you get a chance, stop by my blog, I nominated you for the Liebster Award! Thank you again for sharing! http://karlie-johnson.blogspot.com/2012/01/liebster-award-and-freebie.html

Tammy said...

I love your daisy! When I get married some day, I'm seriously considering daisies as my flowers. They're quickly becoming my favorite. Oh, and thanks for the button tutorial. I'll be hoping to give that a go soon. (I'm following!)

Tammy
Forever in First

Tammy said...

I've created a button, but I'm having trouble with the scroll box. When I copy and past the code above, it just adds another button - no scroll box. Any ideas where I'm going wrong?

Tammy
www.foreverin1st.blogspot.com

Valerie said...

Tammy, have you copied BOTH codes above? If you email me your HTML codes, I'll try to help you out ;)
Valerie

Tammy said...

Yep, I did copy both. Am I suppose to copy both of them in the same gadget or different gadgets? I'll email. Thanks. :)

Tammy said...

You're the best! Thanks.

Post a Comment