How To Make a Blog Button

This blog post was originally published on my old blog on 4/3/14.

Why Make a Blog Button?

  • The process of designing a blog button is fun.
  • A blog button gives your blog a unique mark.
  • A blog button can attract more followers to your blog, if that’s what you’re looking for.  For example, if someone discovers your blog – either through a search engine or a link that you posted in the comments of a popular blog such as Go Teen Writers – they might grab your button and put it on their blog.  Then, followers of their blog would be able to discover your blog.

I’m Convinced.  Let’s Actually Make a Blog Button Now.

Step 1: Find Your Photos

Find an image(s) that you would like to include in your blog button.  I would use your own original image, clip art or a picture under public domain, such as those in the Wikimedia Commons, to avoid copyright infringement. You can also manipulate your photos in Photoshop before saving them to your hard drive.

Step 2: Resize

Open PicMonkey or download it from the Chrome Web Store. Choose edit at the top and then upload your background photo. Select the resize button under the cropping symbol menu. This should come up.
Deselect the “Keep Proportions” box. Then change the size to 125 x 125 pixels.

Step 3: Personalize

Now comes the fun part. It’s time to personalize your button!  If you have any other pictures that you want to add, you can add them by clicking the butterfly icon and then selecting the “Your Own” button.  You can also add pictures and effects that are built into PicMonkey. When you are done personalizing, make sure that you type the name of your blog on the button by selecting the “Tt” icon on the side.  Then, save your image.
Even thought the file size is big, I would select the highest quality, Sean, because you want your best work to be on your blog.

Step 4: Generate Your Code

Open a new post and upload your picture.  Don’t worry!  You can delete this blog post draft later.  Then, right click on the photo and select “Copy URL”.  Next, go to “Grab My Button” Code Generator.
Start with filling in the “Your Image URL” by pasting the url of your image.  Then fill out the rest of the top section.  The section under “Choose Your Colors and Code Box Options” does not need to be filled out.  Just leave that part as is. When you have finished filling out the form, click the “Preview” button to make sure the image looks okay.
When you are satisfied with your image, click “Get Code”.

Step 5: Upload Your Blog Button

Copy the code in the box. Now go back to your Weebly site. Make sure you are in the “Build” tab and click the icon with the three dots at the top left. Choose the “Embed Code” button and drag the widget over to the sidebar of your blog.  Then, paste your HTML code into the box and hit enter.  That’s all there is to it.

If you want to upload a button from another blog onto your site, all you have to do is copy the code beneath the button and use the “Embed Code” feature to insert it onto a page.

Is there anything that I can clear up for you in this tutorial? Have you made a blog button yet?  And please grab my blog button and post it on your blog! I’d be willing to post your button on my blog as well.
No Comments

I'd love to hear what you have to say about this post, but please keep all comments G-rated. I reply back to all comments, and if you have a blog, I might even check it out!

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s