Level: Medium
{I leveled this "medium" because a) you have to get that creativity out of yourself to design the button, and b) we are using HTML code. Fun, right?!}
Ok. ready to get started?
I am going to be using pse 8 for this. But really you can use any photo editing software you feel like. There's Pixlr, Picknik, whatevs. moving on, children, moving on... Now you have to make a new document (control + n on photoshop elements) and make it 125 pixels x 125 pixels. Now you design your little heart out.
*hint: don't make it say that.
Did you have fun designing your little button? I'm glad. Save it as a jpeg on your desktop, or somewhere it is easily accesible. now you have to sign up for photobucket. Sign in, and upload your button.
you can simply click on the direct link to copy it. now, you need to open up a place where you can type: microsoft word, note pad, a draft in your email, whatevs. Now, you need to copy/paste this code there:
<div align="center"> <a href="http://blogaddresshere.blogspot.com" target="_blank"><img alt="blog name here" src="photobucket adress here" /></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><center><a href="http://blogaddresshere.blogspot.com" target="_blank"><img alt="blog name here" src="photobucket address here" /></a></center></textarea></form> </div>
you have to replace all in red with your information... your blog adress, your blog name, and the photobucket address (direct link) you just copied. Now, you need to copy this code and go to your blogger dashboard.
Go to your "design" and click "add a gadget."
Scroll down until where it says "Html/javascript". Click add, and title it whatever you want. "button" will do just dandy. In the text box, paste the HTML code that you copied. Click "save" and you should be done!
Enjoy your beautiful new blog button!!
Seriously.
*also, please don't copy and paste, k? i just spent a good 45 minutes on this tutorial, just for you guys. :)
♥
did this tutorial not work for you? do you have additional questions/comments? just want to say how much you looove gracely designs? email me, at gracie (dot) drechsel (at) gmail (dot) com or just click that pretty little comment button down there.
hey, thanks for this tutorial! I made my first blog button! however, when I copy paste the text code into a new blog entry it puts the html text under the image instead of just the image. I like the text under the picture in the column of my blog so other people can grab my button if they like, but if they use my button it should just show the picture and not the text right? Any ideas how to fix this?
ReplyDeletehttp://jaymiblog.blogspot.com
thanks, I tried it again and now it works!
ReplyDeleteI saw you had commented on my blog, so I clicked on yours. It just so happens that I was about to go look for a tutorial on making a blog button. This was really helpful, thanks!
ReplyDelete@Stacey, your welcome! :)
ReplyDelete