Tuesday, August 9, 2011

TUTORIAL: How to make a button for your blog

Hey guys! I heard that a few of you wanted a tutorial on how to make your own button for your blog with a drop box... so HERE YA GO! :{ oh, and it's beyond easy!


All you need is:
A Picnik account
A Photobucket account
{optional} background image

Step 1: upload and crop your image. Normal size buttons are 125x125+ {now that I think about it there really are no 'normal' sized buttons...} I made mine a square 150x150. {If you want a plain background just pull up a square sticker and make it desired color.}
 Step 2: Add all of the text and decorations you want:
 Step 3: upload your image to Photobucket and copy the direct link:
 Step 4: OK... here comes the hardest part... but it's still really easy... no worries :) HTML.
 
Alright... this first code is just the button. so if you don't want a drop box with the code, just use this.





<center><a href="THIS IS WHERE THE CODE FOR YOU WEBSITE GOES" target="_blank" title="Button"><img alt="Button" src="THIS IS WHERE YOU PUT YOUR PHOTO LINK" /></a><center>


This code is for the drop box.




</center>
<center><textarea id="code-source" rows="3" name="code-source"><center><a href="THIS IS WHERE THE CODE FOR YOUR WEBSITE GOES"><img border="0" src="THIS IS WHERE YOU PUT YOUR PHOTO LINK" /></a></center></textarea></center></center>







so if you want the button with the drop box just combine the two. it should look like this:  




<center><a href="THIS IS WHERE THE CODE FOR YOU WEBSITE GOES" target="_blank" title="Button"><img alt="Button" src="THIS IS WHERE YOU PUT YOUR PHOTO LINK" /></a><center>

</center>
<center><textarea id="code-source" rows="3" name="code-source"><center><a href="THIS IS WHERE THE CODE FOR YOUR WEBSITE GOES"><img border="0" src="THIS IS WHERE YOU PUT YOUR PHOTO LINK" /></a></center></textarea></center></center>


{if these are all weird becuase they are HTML just go HERE and use these codes.}

Now all you need to do is this:
Go to design
go to Add a Gadget
Add an HTML/ Javascript
Paste the code 

............................

EASY PEASY! 
It should {something} look like this:
Hey... I was wondering, do all of you have big computers or small computers? So when my header is fitting my screen does it fit yours? I have a really long computer... this is what I see.

Thanks for reading this tutorial! Let me know if you liked it! If you have any Q's just leave a comment or email me {teardrop@kc.rr.com}

9 comments:

Andrea @ Love is... said...

This is great, I was wondering how to do that! As far as the header it fills my whole screen, which is a 17 inch. I took a screen shot, but can't post it here!

Andee Flynn said...

Awesome! Thanks for sharing.
Andee

Rosy (of Raindrops on Rosy) said...

hahaha seems complicated...I'm not that smart:/

Rachel said...

Nice tip, thanks for sharing:) Glad to have you visit my blog and leave a comment on my DIY wall decor. I'm your newest follower. absolutelylovingmylife.blogspot.com

Margaret@MissAdventures of Susie Homemaker said...

Thank you for the tutorial! I have "make blog button" on my weekend to-do list!

I'm a new follower! theadventuresofSusieHomemaker.blogspot.com

Kristy N said...

Thanks for this! I was trying to follow instructions from another site but they weren't working properly... this worked PERFECT.
Cheers :)

Nicole@Thrifty Decorating said...

great tutorial!! I'm going to go try it right now! :) THanks for linking to Thrifty Thursday!

Anonymous said...

Fabulous tutorial, but....I'm doing something wrong! I followed your directions exactly (or so I thought), and I have no dropdown box, but another button! The link on the button works, but no one can grab it! What did I do wrong?
Help! -Shara

Joanna said...

Just used this to help create a button for my page! You are awesome :)

Found this via the "Becoming What I Always Was" link-up for blogging tips!