≡ Menu

Tutorial: How to Make a Blog Button

In this blogging tutorial, you will learn how to make a blog button in five easy steps. You’ll get the blog button code and the grab box code. Plus, you will find out how to install the HTML code into your sidebar, and troubleshooting tips. I have included screenshots along the way to help you get a better picture on how to do this. I’ve done my best to make this as easy as possible for newbie bloggers. Let’s get started.

In order to be a successful blogger, you have to brand yourself and your blog. There are a million blogs and websites out there. What makes your blog different? Why should visitors take the time to read yours?

Creating a blog button is the perfect way to brand your blog. It promotes your blog’s name, look and feel, and mission in one simple image. You will use your unique blog button on blog hops, blog directories, Entrecard, on your sidebar, etc. When another blogger grabs your blog button and posts it on their sidebar, it opens you up to new visitors and more followers. In a nutshell, your blog button is your main advertising tool.

(Newbies – a blog button is a hyperlinked image or logo that takes a visitor to your homepage when it’s clicked on.)

When my blog was young and newly “born,” I was actively participating in blog hops where I was sharing my blog button. From personal experience, it definitely helped drive more traffic and get me new followers and readers.

To drive traffic to your blog, you’ll want to design and make a blog button that makes visitors want to click. Mommy bloggers create the most stylish blog buttons. I’ve found that the most successful mom and parenting bloggers have well-designed blog buttons. You can hire a graphic designer to create a blog button for you for a minimal fee, or you can design it yourself.

This tutorial gives you the steps involved in:

  • How to make a blog button.
  • Creating a code box that allows other bloggers to grab your blog button and place it on their blog.
  • How to add and display the code box and make a blog button using WordPress and Blogger platforms.

How to Make a Blog Button – Basics

The standard blog button is 125px by 125px. You can choose a size larger than this, but don’t go larger than 150 pixels wide. Most sidebars are only 200 pixels wide, and if you use a larger blog button, the sides of your button will be cut off. For this tutorial, I am sticking to the standard size: 125 x 125. You can make it larger, but keep it a square – i.e. 150 x 150 or 175 x 175.

Step 1: Design and Create Your Logo

In order to design and make your blog button, you will need access to an image editing software – such as Photoshop. Unfortunately, for many beginning bloggers, Photoshop is too pricey. There are a number of free image editing software programs available.

My favorite used to Picnik – which  was free online photo editing site, owned by Google. It was so easy to use, but unfortunately in April of 2012, Google closed it down. Some alternatives to Picnik that you might want to use include:

  • PicMonkey – A super easy to use photo editing program with a creative web interface. Simple to use, and it’s the brainchild of former Picnik engineers. I love it!
  • BeFunky – This lets you edit photos, add cool filters, add text, and other basic stuff. Easy to use, and there is also a smartphone app for it. It’s an Instagram alternative, but not as cool as Instagram.
  • iPiccy – An online photo editor with simple photo tools – like crop, resizing, rotating/flip, hue and saturation, and other basics.
  • Ribbet – If you loved Picnik, Ribbet is a photo editing platform that looks nearly identical as Picnik. It is simple to use, and you can basically do all the same stuff with it – like adding stickers, text, resizing, cropping, frames. Premium (paid) users can play with the curves and levels.

For more advanced bloggers – if you’re familiar with Photoshop, but you don’t have a copy of Photoshop, consider using Pixlr – another free online photo editor that has many of the functions that Photoshop uses. You can crop pictures, resize them, free transform, add text, add shapes, and more. I absolutely love Pixlr.

For this tutorial on how to make a blog button, I used PicMonkey.

Creating a Blog Logo in PicMonkey – Step by Step with Screenshots

1 – Go to PicMonkey. On the homepage,  click on “Edit a Photo.” You can also “Create a collage” with multiple photos if you want.

2 –  After you’ve uploaded the photo you want to use, you will need to crop your image into the standard size 125 x 125. On the left side of the screen, you will want to click on “Crop.” For this blog button tutorial, I am using one of my headshots.

How to Create a Blog Button - Crop Photo

In the drop down menu on the left side bar, you’ll want to choose “square.” Click on the square to move it where you want. The rest of the image will be grayed out. Click on “Apply” to crop the photo.

Blog Button Tutorial -- Crop Image

3 – Once your image is cropped, play around and embellish your image in any way that you want. All the tools you need will be on the left side bar. Cropping, rotating, exposure, colors, sharpen . . . Plus, there are the smaller icons, which allow you to play with color effects, skin touch ups, adding text, frames, adding text and more.  I highly recommend you play with all the effects to create a super awesome blog button.

I also highly recommend placing your blog’s name somewhere on the image for branding purposes.

Blog Button Tutorial - Playing with Effects

3 – When you have finished editing your photo, you will need to resize your image to 125px by 125px. (This is the standard size for most blog buttons.) You can also use 150 x 150 or any square size. Click on “Resize” the bottom of the left side menu. Hit apply.

How to Create a Blog Button Resize 125x125

4 –  When you’re done, click on “Save” at the very top. Save the photo to your computer.

Step 2: Upload Your Image to Your Server

After you have designed and created your blog button image, you need to upload your image to your image hosting account. If you are using WordPress, you can just upload it to your “Media” folder.

If you have a Photobucket account, upload it there. Since I used Blogger as my original blogging platform, I used Picasa Web Albums.

The following instructions work best in the Picasa web albums, not the Picasa application. 

Once you upload the image, you can easily find the URL code for the image. In Picasa, you simply need to right click and select “Copy Image URL.”

The image URL should look something like this: “http://www.YourDomain.com/ButtonImageName.jpg” – Keep the image URL handy. You are going to need it.

Step 3: Create the Code for Your Blog Button

Pay close attention – this next step is a bit technical. I am going to try to explain it the best that I can. (If you have questions, please leave me comments so that I can tweak and edit this post to help others.)

This is the basic blog button code. (This code does not contain the grab box for the blog button. This code is the HTML code that you will use when you’re writing a blog post and you want your blog button to appear within the post, or when someone else is writing about your blog and they want your blog button to show up. This is the code that shows up inside the “Grab my Button” box. If you want to make a grab box for your blog button, skip this step and go onto the next. For most bloggers, they do NOT need to follow this step.):

<a href= “http://www.YourSiteURL.com”><img src=http://www.YourButtonImageURL.jpg /></a>

You should replace the “YourSiteURL” and “YourButtonImageURL” with your own URLS.

The <a href=“….”> portion of the code is the page that you want visitors to land on when they click the button.

The <“img src=“….”> stands for “image source.” It’s the location of the image that you want to use. This is where you copy and paste your image URL.

*** Important: *** Don’t forget to end the code with </a>. That’s how you close the code.

In my own blog, this is what my blog button code looks like.

<a href=”http://www.mypregnancybaby.com“><img src=” http://www.mypregnancybaby.com/wp-content/uploads/2011/01/blog_button.jpg ” /></a>

When anyone posts that code on their sidebar, or in a blog post, it looks like this:

 HipChickGuidetoPMSPregnancyandBabies

(I hope that explanation makes sense. Please let me know if it doesn’t!)

Step 4: Make your “Grab my Blog Button” Box Code

Now that you’ve created the code for your button, you need to create a “Grab My Button” Box so that other bloggers can grab your code and promote your blog on their site. This code includes the “Grab my blog button” box, as well as your blog code. For most bloggers, this is the ONLY code that they need to know.

This code is a bit tricky, but I’ve tried to explain it the best that I can. There are two parts to the code:

1 – Your image
2 – The grab box, where your code appears for others to grab.

Here is the HTML code for the entire thing:

<img src=http://www.YourButtonImageURL” alt=”YourSiteTitle” /><div style=”width: 125px; height: 125px; overflow: auto; border: 1px solid #666666;”>&lt;a href=&#34;http://www.YourSiteURL.com&#34; target=&#34;_self&#34;&gt;&lt;img src=&#34;http://www.YourButtonImageURL&#34; alt=&#34;YourSiteTitle&#34; width=&#34;125&#34; height=&#34;125&#34; /&gt;&lt;/a&gt;</div>

It’s a very confusing code, and all the strange symbols – such as &#34 stand for quotation marks. (For some reason, WordPress and Blogger can’t pick up the quotes that should go around the YourSiteURL, and they transform them into &#34.) A very confusing code, but it works.

Here’s what the finished product should look like:

HipChickGuidetoPMSPregnancyandBabies

<a href=” http://www.mypregnancybaby.com/” target=”_self”><img src=” http://lh6.ggpht.com/_33SCR_mnGZw/TNTBmgIvc8I/AAAAAAAAARw/STQlAR-zXjY/blogbutton.jpg ” alt=” HipChickGuidetoPMSPregnancyandBabies” width=”125″ height=”125″ /></a>

Copy and paste the code I’ve given you into Notepad, or TextEdit (if you are using a Mac). Replace all the URLS with your own.

Step 5: Copy and Paste the Code and Use it on Your Sidebar

If you are using a self-hosted WordPress blog, you need to go to Appearance → Widgets → Text. Copy and paste the blog button code.


If you’re using Blogger, underneath the “Design” tab, you will need to “Add a Gadget.” Then scroll down until you find “HTML/Javascript.” Click on that and copy and paste the blog button code.


Save your work. Test the code to ensure that it works properly. It should.

 

Troubleshooting Problems:

If you are having problems with the blog button code, check your quotation marks. Each and every URL needs to have quotes before and after it.

If you’re still have issues, your quotes may have been changed to “smart quotes,” which are curved quotation marks. HTML hates smart quotes. HTML wants straight quotes. Unfortunately, this means, you will need to go back to the blog button code and carefully delete every single quote (“) and re-type it. There are a total of 6 in the code that I’ve given you.

Good luck. Please let me know if this tutorial on “how to make a blog button” was helpful. I’ve tried to make it as simple as possible. I may do a video tutorial when I have more time.

If you enjoyed this post, please ReTweet, StumpleUpon, Digg, Reddit . . . and Share this post with your friends!

(And if you can’t figure it out, I am more than willing to help you figure it out. All I I ask is for a link back to this post! I’d love the exposure!)

Please note that if you Read this Post correctly, it WORKS. A lot of people have been emailing me, claiming that it doesn’t work, or that they are confused. The reason is that you did NOT read the post in its entirety. Skipping will make you confused! The Code in Step 4 is the code that Most people are looking for.

About the author: DP Nguyen is founder and editor of Hip Chick’s Guide to PMS, Pregnancy and Babies. She’s an expert pregnancy and women’s health blogger. She is NOT a medical doctor and does NOT offer medical advice. Connect with her on Google+, Twitter and Facebook.

{ 317 comments… add one }
  • Sherlyn December 27, 2016, 1:00 am

    Arceltis like this make life so much simpler.

  • Estela October 20, 2016, 5:07 am

    Hi, i think that i saw you visited my website so i got here
    to go back the desire?.I’m attempting to find things to improve my website!I guess its adequate to use a
    few of your ideas!!

  • lb7 fuel pressure regulator problems February 21, 2016, 12:17 am

    Whenn a player cannot sing tthe song, he has to drink.
    For the stress test tuat night, there will be no live music,
    just a bar annd grill. Don’t you deserve berter health and a slimmer body.

  • 12 bottle wine cooler February 6, 2016, 11:15 am

    Most everyone knows not once pupils along with fathers and mothers some thing to help her at high school, living
    inside a your dorm, specially when thinking about lengthy distance and might definitely
    not vacation forwards and backwards so that you can mild their houses.
    4) Games – It is a great idea to bring some games or
    toys to occupy the troops until dinner time. Another
    thing you should consider, particularly in today’s world, is the cost of a cooler and it is a very important factor.

  • Micaela January 18, 2016, 2:46 pm

    Hi, what is the “your site title” for the code?

  • Heya i am for the first time here. I came across this board and I in finding It really helpful & it helped me out a lot.
    I’m hoping to provide one thing back and help others like
    you aided me.

  • beconit December 28, 2015, 7:26 pm

    to become a ://www.beconit.org>computer programmer need a good support.

  • luvlots December 8, 2015, 3:19 pm

    I will try to follow this. someone please check out my blog, and don’t forget my others! I use wordpress:
    puppiluv88
    readwriteloveava
    thanks!

  • tourism November 16, 2015, 6:21 pm

    hi!,I like your writing so so much! percentage we be in contact more about your post on AOL?
    I need an expert in this area to solve my problem.
    Maybe that’s you! Looking forward to peer you.

  • Car Garage blog November 8, 2015, 5:57 am

    Actually no matter if someone doesn’t know then its up to other
    people that they will assist, so here it occurs.

  • Babyparadisestore October 18, 2015, 6:43 am

    Whenever a baby is available in earth first of all needs a title. A label is very important for any baby. This article describes ways to get a significant name.

  • auto transport carriers florida September 21, 2015, 9:28 am

    It is, however, becoming more and more common to get a shipper
    to offer cars directly on the house in the buyer. When you are going to create
    decision to ship your automobile in California
    then you definitely must have a idea in regards to the
    routes of California. And one of essentially the most important requirements in looking positive
    is dressing properly.

  • Paragraph writing is also a excitement, if you know after that you can write or else it is difficult to write.|

  • Iona September 1, 2015, 9:50 am

    When we begin chatting I will certainly frequently request your birthday
    celebration and also name to help in the readings.

  • lee esto August 15, 2015, 4:59 am

    Pero lo que no se puede es llegar el primer año y estimar hacer una gran compilación.

  • Florian August 12, 2015, 6:46 am

    Wow! Finally I got a web site from where I know how to
    truly get useful information regarding my study and knowledge.

  • slang words August 9, 2015, 3:18 pm

    Thanks on your marvelous posting! I genuinely enjoyed reading it,
    you’re a great author. I will ensure that I bookmark your blog and
    will come back at some point. I want to encourage you to ultimately continue
    your great posts, have a nice morning!

  • Bate papo cam

  • answer key download August 6, 2015, 12:17 pm

    you are truly a just right webmaster. The site loading pace is amazing.
    It seems that you are doing any unique trick.
    Moreover, The contents are masterpiece. you have performed a magnificent
    process on this topic!

  • hgh xl supplement review July 28, 2015, 3:03 am

    It’s really very difficult in this active life to listen news on TV, thus
    I only use internet for that purpose, and obtain the most up-to-date news.

  • kindle account July 27, 2015, 5:21 pm

    Hello every one, here every person is sharing these experience, therefore it’s pleasant
    to read this weblog, and I used to pay a visit this blog every day.

  • boom beach ifunbox hack file July 27, 2015, 10:37 am

    Users can at this time add unlimited information to their consideration by working with the
    no cost generator to download Boom Seashore
    hack with no fuss or threat.

  • Amy July 20, 2015, 10:51 am

    Thank you! I followed your tutorial and managed to create my own button 😀 I’ve wanted to do this for months now and it’s always seemed like something only tech savvy people can do. I want to send you a huge thank you because now I have a decent looking button on my sidebar. You’ve made the impossible happen 😀
    Thank you so much,
    Amy x

  • https://www.facebook.com/ July 20, 2015, 12:53 am

    First of all, they believe current state of affairs are at best
    a good solid year therefore, “would need to eliminate a small number of (industry), unfortunately is carrying greater than five ages-retro sales trip in check no issue. Do not waste your money on this DLC, or you are encouraging EA’s shady enterprise. Plug the likes of a Bully Dog Power Pup into your OBD-II port and hang on my darling, you.

  • Frauen anpissen July 18, 2015, 12:04 pm

    Excellent post. I’m dealing with many of these issues
    as well..

  • ingresso fire 2015 July 15, 2015, 7:02 am

    But flattening your stomach and forgetting about really
    like handles does not essentially imply giving up on flavorful
    and delightful foods. Attraction marketing has completely changed the
    network marketing industry. This includes access to live chat, over 500 training modules, 3 classrooms,
    networking, commenting, 2 free websites, access to
    the keyword tool.

  • marvelfuturefighthackx.wordpress.com July 9, 2015, 5:35 am

    I am regular visitor, how are you everybody? This piece
    of writing posted at this website is truly good.

  • ghetto booty July 6, 2015, 8:00 pm

    Wow, amazing blog structure! How lengthy have you ever been running a blog for?
    you make running a blog look easy. The whole look of your site
    is magnificent, let alone the content!

  • seats for 1952 ford July 5, 2015, 2:32 am

    Thanks for a marvelous posting! I definitely enjoyed
    reading it, you will be a great author.I will remember to bookmark your blog
    and will often come back from now on. I want to encourage you to continue your
    great job, have a nice afternoon!

  • https://www.behance.net July 4, 2015, 2:50 am

    If we take this into the following memory card this proceeds straight to the
    yard of eden in the family members card – the Lovers.

  • Jenni July 3, 2015, 7:51 am

    School of Dragons Hack Software guaranteed working tested earlier than launch by
    all workforce.

Leave a Comment