This post may contain affiliate links. We may earn money or products from the companies mentioned in this post at no cost to you. Thanks for helping to support our blog.
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.
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.
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.
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.
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.
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.
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.
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.
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.
<a href=”YOURBLOGADDRESS” target=””_blank””><img src=”YOURIMAGEADDRESS“/></a>
<form><textarea rows=””6″” cols=””19″” readonly=””readonly””><a href=”YOURBLOGADDRESS” target=””_blank””><img src=”YOURIMAGEADDRESS“/></a></textarea></form>
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.
This is what my blog button code looks like if that helps.
<a href=”http://projectsaroundthehouse.blogspot.com” target=””_blank””><img src=”http://i1259.photobucket.com/albums/ii558/cwilliams130/BlogButton.jpg”/></a>
<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>
Now that your have the code it’s time to put it on your blog. Go to Layout and click on Add Gadget.
Put in “Grab My Button” or something more original in the title. Paste your code into the Content box and click Save.
Check your blog and admire your pretty button!
Check out my previous posts in the series: