This Page

has been moved to new address

Blog Tip -- Making a Button!

Sorry for inconvenience...

Redirection provided by Blogger to WordPress Migration Service
randomosity: Blog Tip -- Making a Button!

Tuesday, June 14, 2011

Blog Tip -- Making a Button!

 I'm no expert, but I love helping other people out! So if you want to start a blog but just aren't sure how, or if you have a blog but want to take it up a notch, I will help you through it. Email questions to randomosityblog AT gmail DOT com and I will answer them in a future post. If you want to make your blog better, this series will definitely help!

Today I'm going to walk you through making a button for your blog. There may be an easier way, but this is the way I do it. This is assuming you have a layout that you love (like I do).

First, take a screen shot of your layout. To take a screen shot, hold down the PRTSC button on your computer. With my laptop, I have to hold down "FN" and "PRTSC" at the same time. Then open up Paint (Start, Programs, Accessories, Paint). Right click, PASTE. Save the image in JPG format.


Go to www.picnik.com and register (it's free). Upload your photo from above, and then crop it. To crop, just go to EDIT, and then click CROP. Highlight the area you want to keep.


This is what it will look like after it's cropped.



Now, click on CREATE. You can do whatever you want at this point, but I always put a frame on my buttons. Click FRAMES. Then on the left, you will see BORDER. Change the thickness, colors, etc.



You can make your button any size, but I think most pages use 150x150. At this point, you want to go back and click EDIT then RESIZE. Resize to 150x150 (or whatever size you prefer). I chose 150 in the fist box, and checked "keep dimensions" so the other number ended up being 138.


Go back to the CREATE tab. Your dashboard will have less options because I have the premium version, but there are still tons of options when using the free version. Now is when you want to add text.


Top left hand corner: Type your text here.
Left hand column: Font choices.
Box on the right side: Colors, size, fade. If you click the area where the arrow is, the cursor will turn into a "dropper". Click the dropper on the button you have created, to match the color perfectly. I used the dropper on the lips section, so the text matches. You can click "fade" if you are using a bold color and want it to fade a bit. I do that on lots of my pictures.

Now, it's time to save. Just choose "SAVE PHOTO" and there you have it! You have created your own button! Picnik.com is great and a fun free way to edit photos and make buttons. Play around with the different effects and you will be surprised at what you can create!


To get the button to your blog, upload it on Photo Bucket and copy the HTML code into the template of your blog. 

Edit: The HTML code will have a link towards the beginning of the code. It will be something like "http:// target=_blank". Take the address out (http://blahblahblah) and replace it with your blog address (http://yourblog.com). Hope that makes sense!

I hope this was easy to understand... I didn't think it was going to be this drawn out. :) If you have any questions, just ask. I'd love it if you would leave a comment so I can see the buttons you have created!!

Labels: ,

16 Comments:

At June 14, 2011 at 1:40 PM , Blogger Phil and Darby Hawley said...

This is a great tutorial. Thank you for posting on this!

 
At June 14, 2011 at 2:00 PM , Blogger adventuresindinner said...

I think I did it. I think.

 
At June 14, 2011 at 3:27 PM , Blogger Sadie said...

Adventuresindinner do you have a link? I can't see your profile or blog. :(

 
At June 21, 2011 at 1:20 PM , Anonymous Angela said...

I was able to do everything you said until the very last step. I don't know how to copy the HTML code into the template of my blog. I have created it and it is in photobucket, but I tried listing it in a widget but it just goes back to photobucket. How do I get it to be a button that works for my blog? thanks, Angela

 
At June 21, 2011 at 6:32 PM , Blogger Sadie said...

Angela, the first link in the HTML code needs to be erased. So take everything from "http://blahblahblah" out and replace it with your blog address "http://www.yourblog.com".

Does that make sense? I will add that to the instructions too. :)

 
At June 21, 2011 at 8:45 PM , Anonymous Angela said...

Yes, that is very helpful. I still needed some help adding the text box for people to copy, like the one at the bottom of your 3 buttons, but my boyfriend figured that out and now I have a 'Grab my button" on my blog, thanks so much! I wouldn't have even attempted to do this without your help. You can have a look at the button on the bottom of my sidebar. :) Thanks Again!

 
At June 21, 2011 at 8:54 PM , Anonymous Angela said...

And also I just wanted to say that of all the new blogs I've been checking out, I just love all the things you are sharing! I am really happy I am a part of this Blog Bash, if for no other reason I found you and your blog! Thanks for your help today, it really made my evening! :)

 
At July 12, 2011 at 3:02 PM , Blogger Ashley Rae said...

Thanks for doing my suggestions Sadie! You're the Greatest!

 
At July 19, 2011 at 12:49 PM , Blogger Regina Malloy said...

Hello i wanted to say thank you on your tutural on how to get a image header on a blog! i have been so frustrated with it .i almost gave up!! thank you for the help.. (ezeebuxs)

 
At July 19, 2011 at 12:52 PM , Blogger Jenn said...

Great instructions! I am excited to give it a try!!

 
At July 19, 2011 at 6:39 PM , Anonymous Passion Parties by Robyn said...

thank you for this wonderful blog. It is easy to follow and fun!

 
At July 19, 2011 at 7:55 PM , Blogger tonyknuckles said...

Great tutorial. Easy to follow along step by step.

 
At July 19, 2011 at 8:49 PM , Blogger Sarah Nolan said...

I'm still learning this thing.....I have the button made..how do I add it to the side?

 
At July 19, 2011 at 8:57 PM , Blogger Sarah Nolan said...

Okay, I figure out how to get it on my page..how do I get the text to show up so others can get it?

 
At July 19, 2011 at 10:07 PM , Blogger Heather said...

I love your posts because they are so helpful! I like my picture on my blog but I like the button you made me as well!

 
At July 19, 2011 at 10:50 PM , Blogger Wendi B. - Wendi's Book Corner ~ Rainy Day Reads in Seattle said...

I love your tutorial! I've done all of my own graphics in Excel. Now I'm doing a few for other bloggers in the Creative Memories Scrapbook program LOL - I think your way might be a LOT easier :)

Thanks for sharing... I'll have to check out your other blogging tips.

Wendi

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home