Monday, June 4, 2012

How to Make a Blog Button Using Picmonkey {Beautify Your Blog Series}


How to Make a Blog Button

It took me a long time to make my own blog button. I wasn’t sure how to make one and I didn’t know what I wanted it to look like. After I made my new header I wanted to make a matching blog button to go with it. I got help from this tutorial. It’s surprisingly easy!

I use Blogger so if you use Wordpress or Typepad you can still use the same steps until I add the button to my blog.

Start out by going to Picmonkey and select Edit Photo. Grab a picture your have saved.

making a blog button

There are two ways you can make the button picture. I’ll show you the way I made mine and then an alternate way.

Click on the first button on the left that looks like a molecule and then on crop. Put in a size of 125 by 125 and hit Apply. This is going to give you a nice square.

making a blog button 2

I want the square to be the same color as my blog header. I know what color it is because I kept track of the number for the colors I used with my header by saving the number in the Overlay box.

#1- Click the button that looks like a heart, star and bubble. #2-Click on Geometric and pick the square. Stretch the square over your entire picture. #3- Pick your color. If you have a color saved you can type in the number of the color in the Overlay box. #4- Click the Combine button that is under the red arrow. This will make your colored background one piece so it doesn’t move.

making a blog button 3

Next, add text to your button. Click on the P on the left hand side. Then type your text into the Text box and click Add. After you add your text you can play around with the different fonts until you find one you like. You can pick a different color if you want in the Overlay Box. You can also center the text there too.

making a blog button 4

I have polka dots in my header so I wanted to mimic that with my button. Click on the heart, star bubble button. Click on Geometric and choose the circle. I added one circle and resized it until I liked the size. Then I right clicked on the the circle and clicked Duplicate Overlay from the pick list. I made four copies.

You don’t have to use circles. There are tons of shapes to choose from. Click around until you find a shape you want to use or one that matches your header.

making a blog button 5

Next I changed the colors of the circles to match my header. I clicked on the circle and entered the color in the overlay box. If you don’t have any colors in mind you can just click around in the colors until you find ones you like. Once you have the button the way you like it click Save.

making a blog button 6

Here is an alternate way for when you have a picture you want to use as the background for your button. Find a picture you like and click Edit Photo from the main PicMonkey page. Click on the molecules on the left hand side and then click resize. Enter one of the numbers as 125 and let Pickmonkey choose the other number. Make sure the other number is greater than 125 or you may have to switch the left and right numbers depending on how your picture is oriented. Then hit apply.

making a blog button 7

Next click on Crop and enter 125 x 125 in the Actual Size box. Now you can add text to your photo like I did in the previous steps.

making a blog button 8

Now that you have your button picture done you need to upload it to a photo sharing site like Photobucket. This is what I used so if you use a different site you will have to take slightly different steps.

Here is the code you will need to create your button on your blog. I copied this into a word doc so I could add in my blog address and image address.

<div align="”center”">
<a href="YOURBLOGADDRESS" target="”_blank”"><img src="YOURIMAGEADDRESS"/></a>
</div>
<div align="”center”">
<form><textarea rows="”6″" cols="”19″" readonly="”readonly”"><a href="YOURBLOGADDRESS" target="”_blank”"><img src="YOURIMAGEADDRESS"/></a></textarea></form>
</div>
 
Your blog address is the url of your blog. To find your image address go to your photobucket and hover over your blog button pic. Click on the box next to direct link and it will automatically copy the code you need to paste into the image address.
 
making a blog button 9

This is what my blog button code looks like if that helps.

<div align="”center”">
<a href="http://projectsaroundthehouse.blogspot.com" target="”_blank”"><img src="http://i1259.photobucket.com/albums/ii558/cwilliams130/BlogButton.jpg"/></a>
</div>
<div align="”center”">
<form><textarea rows="”6″" cols="”19″" readonly="”readonly”"><a href="http://projectsaroundthehouse.blogspot.com" target="”_blank”"><img src="http://i1259.photobucket.com/albums/ii558/cwilliams130/BlogButton.jpg"/></a></textarea></form>
</div>

Now that your have the code it’s time to put it on your blog. Go to Layout and click on Add Gadget.

making a blog button 10

Select HTML/Javascript from the list.

making a blog button 13

Put in “Grab My Button” or something more original in the title. Paste your code into the Content box and click Save.

making a blog button 11

Check your blog and admire your pretty button!

making a blog button 12


Check out my previous posts in the series:

How to Make a Blog Header in Picmonkey
How to Customize Your Blogger Background

Upcoming posts in the series:
How to make social media icons in Picmonkey
How to use Windows Livewriter
How to make a Facebook cover photo
How to make a blog header part II

I may be linking up to one of these fabulous parties.

LinkWithin