• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer

Midwestern Moms

Life Captured

  • Home
  • Crafts
  • Crochet
    • Crochet Dishcloth Patterns
    • Crochet Headband Patterns
    • Crochet Baby Hat Patterns
    • Crochet Dish Towel Patterns
  • Recipes
    • Best Rice Krispie Treats
  • Lifestyle
    • Travel
    • Blogging Tips
  • Nav Social Menu

    • facebook
    • twitter
    • instagram
    • pinterest
    • google
    • youtube
This post may contain affiliate links. If you make a purchase through one of these links, I do receive commission. For information, read my full privacy policy. Before reading our posts, please review our disclaimer.

You are here: Home / Blog / Easy Way To Create Blog Button Code

Easy Way To Create Blog Button Code

Apr 25, 2011 · 11 Comments

Share
Tweet
Pin

Are you familiar with blogs that encourage you to “grab their button” and place it on your blog? This is often used in blog hops, link parties, or for advertising purposes during a giveaway for additional promotion. This tutorial will show you how you can create html button code for your blog.

Grab My Button Code Generator

As always, I searched for an easy way to do this for my own button, and stumbled upon the Grab My Button Code Generator. This process is so easy, that I wanted to share it with you!

Step 1:  Create an image that you would like to use as a button. Most buttons are made as a square and are 125 x 125 pixels. I used Adobe Photoshop to create my button, however free softwares, such as Gimp or Picasa, also work great for this task. When you save your button, make sure to use your “save for web” option to compress the image down to the smallest size so that it will load faster when viewed over the Internet. This is important to do on blogs and when sharing images because all of our readers don’t have the same speed of Internet connection and we don’t want people to leave the blog because they have to sit and wait for images to load.

Midwestern MomsMY LATEST VIDEOS

Here is a picture of my button and the finished product:

 

Midwestern Moms

Step 2:  Upload the image to your blog’s media library. After you are complete with uploading your image, you will be given the image URL. This is where the image is stored on your site. You will want to copy this URL by using “Control C” on your keyboard or your copy/paste functionality from your mouse. I use WordPress, so this is an example of what I see after I upload my image to my media library.

Media LibraryStep 3:  Visit the Grab My Button Code Generator link. Here you will input all of your information. For “Container Type” I chose “Text Area” and I left the default colors. I also always choose to open links in a new window from my blog. This is simply a personal preference. When you click the “preview” button you will see your code has been generated. Choose “Get Code” to then display the code to copy and paste over onto your site.

Generator

Step 4:  If you wish to add the button and code to your sidebar, add a new “text” widget. You will then paste the html that you just generated from the website into the widget and save.

Text WidgetIf you notice in my code, I have updated the original height and width to be 125px. This is so that it will fit in nicely on my sidebar. You are welcome to adjust the code as you like so that it fits where you want it to in your site.

Did you find this tutorial helpful? Be sure to let me know if there are any blog tips and tricks out there that you would be interested in seeing a tutorial for, please contact me and let me know.

Share
Tweet
Pin

Blog

About amanda

Amanda is a work at home mom and owner/editor of Midwestern Moms. She enjoys reading, crafting and finding great new projects on Pinterest!

Reader Interactions

Comments

  1. Jen says

    April 25, 2011 at 8:15 pm

    Great tutorial. I just recently found that website too and it’s a great tool! Thanks for sharing! 🙂

    Reply
  2. Leslie Nicole says

    June 21, 2011 at 6:49 am

    Thank you! Can’t believe how long I’ve been trying to find something on this! xx

    Reply
  3. Sarah says

    August 5, 2011 at 11:24 pm

    Thank you so much for this! It helped me finally get a button code on my blog!

    Reply
  4. Sona says

    October 2, 2011 at 2:55 pm

    Thanks for your great tutorial. I was stuck up with code generating process, but this tool becomes handy.

    Reply
  5. Rachel says

    October 26, 2011 at 5:00 pm

    Thank you! This was very helpful, I was finally able to make a blog button…yay!

    Reply
  6. Nicole Radtke says

    May 24, 2012 at 9:24 am

    Hi Amanda,

    I just have to say a big THANK YOU for your help here on the button badge. I swear I have been trying to figure out this darn thing forever! I finally figured out what I was doing wrong, until you showed that you have to upload the image to your wordpress media library. That was the missing step that you totally helped me with! I AM SOOOOO THANKFUL to you!
    ~ Nikki

    Reply
    • amanda says

      May 24, 2012 at 10:02 am

      You are welcome! Glad you got it to work!

      Reply
  7. Kim, KC Bakes says

    February 4, 2013 at 2:36 pm

    Thankkkk youuuuuuuuuuuuu. This was by far THE most helpful information I found specifically for WordPress users!

    Reply
    • amanda says

      February 4, 2013 at 6:46 pm

      You are welcome!

      Reply
  8. Jennifer says

    July 16, 2013 at 11:50 am

    Thank you for the great tip! It worked perfectly.

    Reply
  9. Natalie says

    November 17, 2013 at 4:57 pm

    Thank you so much! This helped a lot!!

    Reply

Leave a Reply Cancel reply

Your email address will not be published.

Primary Sidebar

Devon
Hi, I'm Devon. Midwestern mom of two boys. I love recipes, DIYs, crochet, essential oils, and coffee! Read More...

Popular Posts

Best Rice Krispie Treats Recipe

Half Double Crochet Dishcloth Pattern

Slow Cooker Cajun Chicken Alfredo Recipe

How To Crochet A Heart

Pizza Casserole Recipe

Crochet Heart Headband Pattern

Footer

As an Amazon Associate, I earn from qualifying purchases.

  • Home
  • About
  • Media
  • Contact Midwestern Moms
  • Privacy Policy
  • Disclaimer
  • Midwestern Moms Archives
  • Terms Of Use

Copyright © 2019 · Cravings Pro

Copyright © · Midwestern Moms | Missouri | All Rights Reserved


Midwestern Moms is owned by Copsey Media, LLC
Midwestern Moms uses cookies to ensure you get the best experience on our website.OkRead more