• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

MY PREGNANCY BABY

Hip Chick's Guide to PMS, Periods, Pregnancy & Babies

  • Home
  • PMS
  • Pregnancy
    • Maternity Fashion
    • Preconception / Trying to Conceive
    • Pregnancy Complications
    • Pregnancy Diet
    • Pregnancy Fitness
    • Pregnancy Health
    • Pregnancy Lifestyle
    • Prenatal Care
    • Postpartum
  • Babies
    • Baby Development
    • Baby Health
    • Baby Safety
    • Feeding Baby
    • Life with Baby
    • Baby Gear and Products
  • Parenting
  • Women’s Health

Tutorial: How to Make a Blog Button

by DP Nguyen 318 Comments

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=”https://www.mypregnancybaby.com“><img src=” https://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=” https://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.

Filed Under: Blogging Tips & Tutorials Tagged With: Blog button, beginning bloggers, blog button how to, blog button tutorial, blog buttons, blog tutorial, blogging tips, blogging tutorial, design blog button, how to blog button, how to create a blog button, how to make a blog button, successful blogging tips

About DP Nguyen

DP Nguyen is founder and editor of My Pregnancy Baby. She’s a mother of the cutest little boy, and is an experienced health author and blogger. She's been writing about pregnancy and women's health since 2008.

Reader Interactions

Comments

  1. canadian pharmacy says

    September 20, 2017 at 12:09 pm

    Global Information Fro this offshoot

    Reply
  2. Sherlyn says

    December 27, 2016 at 1:00 am

    Arceltis like this make life so much simpler.

    Reply
  3. Estela says

    October 20, 2016 at 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!!

    Reply
  4. lb7 fuel pressure regulator problems says

    February 21, 2016 at 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.

    Reply
  5. 12 bottle wine cooler says

    February 6, 2016 at 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.

    Reply
  6. Micaela says

    January 18, 2016 at 2:46 pm

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

    Reply
  7. Jonathan Quick Jersey 2015 Dustin Brown Jersey 2015|Anze Kopitar Jersey 2015|Drew Doughty Jersey 2015|Jonathan Quick Jersey 2015|Wayne Gretzky Jersey 2015|Jeff Carter Jerse 2015|Jarret Stoll Jersey|Mike Richards Jersey|Luc Robitaille Jersey|Kyle Clifford says

    January 8, 2016 at 6:09 am

    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.

    Reply
  8. beconit says

    December 28, 2015 at 7:26 pm

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

    Reply
  9. luvlots says

    December 8, 2015 at 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!

    Reply
  10. tourism says

    November 16, 2015 at 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.

    Reply
  11. Car Garage blog says

    November 8, 2015 at 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.

    Reply
  12. Babyparadisestore says

    October 18, 2015 at 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.

    Reply
  13. auto transport carriers florida says

    September 21, 2015 at 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.

    Reply
  14. in chennai|chennai hotels|near airport hotels chennai|5 star hotels at chennai|best hotels for buffet in chennai|hotels near chennai airport|hotels in chennai india|mgm hotels resorts chennai|hotels in chennai in egmore|hotels near chennai us consulate|ho says

    September 18, 2015 at 5:39 am

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

    Reply
  15. Iona says

    September 1, 2015 at 9:50 am

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

    Reply
  16. lee esto says

    August 15, 2015 at 4:59 am

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

    Reply
  17. Florian says

    August 12, 2015 at 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.

    Reply
  18. slang words says

    August 9, 2015 at 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!

    Reply
  19. interessante e inteligente com um bate papo super descontraído. says

    August 7, 2015 at 11:07 pm

    Bate papo cam

    Reply
  20. answer key download says

    August 6, 2015 at 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!

    Reply
  21. hgh xl supplement review says

    July 28, 2015 at 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.

    Reply
  22. kindle account says

    July 27, 2015 at 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.

    Reply
  23. boom beach ifunbox hack file says

    July 27, 2015 at 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.

    Reply
  24. Amy says

    July 20, 2015 at 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

    Reply
  25. https://www.facebook.com/ says

    July 20, 2015 at 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.

    Reply
  26. Frauen anpissen says

    July 18, 2015 at 12:04 pm

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

    Reply
  27. ingresso fire 2015 says

    July 15, 2015 at 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.

    Reply
  28. marvelfuturefighthackx.wordpress.com says

    July 9, 2015 at 5:35 am

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

    Reply
  29. ghetto booty says

    July 6, 2015 at 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!

    Reply
  30. seats for 1952 ford says

    July 5, 2015 at 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!

    Reply
  31. https://www.behance.net says

    July 4, 2015 at 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.

    Reply
  32. Jenni says

    July 3, 2015 at 7:51 am

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

    Reply
« Older Comments

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Copyright © 2023 · Genesis Sample on Genesis Framework · WordPress · Log in

Manage Cookie Consent
We use cookies to optimize our website and our service.
Functional cookies Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
Manage options Manage services Manage vendors Read more about these purposes
View preferences
{title} {title} {title}