This is a quick and simple tutorial on how to make a blog button and “grab my button” section on your blog. If you don’t have a button, this is a great way to make one to share on blog hops and on button swaps. If you make one, feel free to send it to me and we can swap!
First, you need to give some thought to what you want your button to be. You can use a picture as the background, a solid color, just text, or whatever you want. You can also search online for free blog button blanks as starting points– or even check out websites like Vector Stock for graphics you can use. As you can see on my side bar, currently I am using my picture with my blog name. For my tutorial, I am going to use text and some colors.
Second, if you have some sort of photo editor, you can use that. However, even though I have Elements, I use Pixlr Online a lot of the times. The premise will be basically the same, just different based on the program you use.
Here are the steps:
1. Determine what you want your blog button to look like. Look at your blog and determine the “feel” you want.
2. Open up your photo editor. If you are using Pixlr, you will choose Pixlr Editor (Advanced).
3. Choose create new image from the options screen.
4. Set your canvas to 125 x 125 pixels and title your button. As you can see on the below screen, Pixlr also has presets for their canvases… by changing the dimensions you are overriding the preset.
5. Now comes the fun part— get creative and make your blog button on the canvas.
6. Save your blog button as a .jpg file.
7. Upload your button to a photo host– if you are on self-hosted WordPress, just upload it to your media library. If you are on Blogger or WordPress.com, you can upload it to Flickr or Photobucket. Make sure you take note of the html link for your button after uploading it.
8. Now, here is the somewhat tricky part. Copy the html code below into the notepad on your computer.
-start copying-
<div align=”center”><a href=”YOUR BLOG LINK” target=”_blank”><img border=”0″ src=”YOUR IMAGE LINK” alt=”NAME OF YOUR BLOG“/></a></div> <div align=”center”><form><textarea rows=”6″ cols=”20″><center><a href=”YOUR BLOG LINK” target=”_blank”><img border=”0″ src=”YOUR IMAGE LINK” alt=”NAME OF YOUR BLOG“/></a></textarea></form></div>
-stop copying-
Your blog link = the URL for your blog
Your image link = the link you took note of above when uploading your button to the photo host
Name of your blog = the name of your blog (ex. Mom on the Run x2)
Note: Sometimes, quotes do not copy and paste correctly – you might have to retype these once you copy and paste.
9a. Wordpress users:
Open your Dashboard and go to the Widgets section. Drag over a “text” widget. Copy and paste the above code (after updating with your information) into the widget box. Save and close. Note: To get the “Grab My Button” sidebar title, put your text in the title field.
9b. Blogger users:
Open your Blogger dash page and click on the Layout button. Click “Add a Gadget” where you would like the grab button to be located. Choose to add an html/java script gadget. Copy and paste the above code (after updating with your information) into the text box. Click save. Note: To get the “Grab My Button” sidebar title, put your text in the title field.
10. Sit back, pat yourself on the back and tell yourself how cool you are for making your own grab-button.
On your blog, the grab button section should look similar below:
Easy? Hard? Let me know! Is there something else blog-related you’d like to see?
If you want, leave me a comment and I will go check out your button! And, if you want to swap… let me know!
[php snippet=6]
[php snippet=8]
Julia is the divorced mom of twins, a blogger, a sometimes crafter, crazy snailmailer, and a corporate bean counter. In her "spare" time, she scrapbooks, travels, makes cards, blogs, designs jewelry, searches for missing cleats and pom poms, enjoys good dark chocolate, and sneaks naps.