How to Make a Blog Button and Grab Button Code

In this post, I will try to enumerate as much as I can, the steps on how to create a blog button.
But first, what is a blog button?

A blog button, also a blog badge is a great way of promoting your blog.  It would provide you a link back to your blog when other people have it on their websites/blogs.

For this blog, I used my favicon as my button - so I won't need to create another design. :)

Here's what you'll need:
1. Blog button design
2. An online photo server

For the blog button, what you need to do is to create a design that would represent your blog.  You may use Photoshop to create one.  But if you don't have that, you may use other applications/software.

Guess what, mine was created in MS PowerPoint though at first I thought of creating it on Paint.  I really don't wish to buy another application just to create a blog badge so I just used whatever is currently installed in my laptop.

If you used MS PowerPoint, you just have to save it as .jpg, crop whatever excess borders and you'll already have a design.
If you use Paint, you'll have to save it as .jpg instead of .bmp.

What is important is for you to end up with a picture. :)
And if you do not want to create a design, you may just look for a picture in the web that best describes your blog and save it on your computer.  Though I don't recommend this because of property rights and those stuffs. You really have to be careful with that.

Once you already have the picture, you may change it's size to the approximate size of your sidebar. You don't want it to ruin the overall look of your blog right?
In my case, I just used MS office Picture Manager - nothing fancy :)  Though you may also use some other photo editing application like Picmonkey: http://www.picmonkey.com it's for free :) at least as of this writing.

Here's how to do it on Picmonkey:

Click Edit Photo.  By doing so, you will be directed to choose the picture you'd want to edit.  Just choose it.  If it's on your computer, just get it from the directory where you originally saved it.

You should see the photo to be edited at the center page.  Now, click Resize (encircled in red below).

The resize option will be shown.  According to the websites I recently read, the recommended photo size is 125 x 125 but I think, depending on your photo's resolution, you may have it bigger or other shapes - rectangular for example.

Once you're done, click Apply.

There are other options on how you can edit your photo.  Just play with them.
After which, click Save.

Here's how to do it on MS Office Picture Manager:

On your photo, right click and choose Open With then select MS Office Picture Manager.
Then click Edit Pictures

The edit options will be shown on the right side.  Click resize.

Resize as you please.  But again, consider your photo's resolution and how big you really want your badge to be.  Click save afterwards.

Now, you are ready to upload your photo to an online photo server.  Mine was uploaded on a Picasa Web Albums but you may also use Photobucket, Flickr or any other photo sharing server.

How to Upload your Photo on Picasa Web Album.

Make sure you are signed in.  Then, choose upload photo

You will then be asked to choose the file to be uploaded.

Click done to finish the photo upload

You should be able to see the newly uploaded photo on your list.

Click the image to open the album.  Then click again to view the photo.  You should see something like this:

Finally, right click on the image and choose Copy Image URL.  Save it on a notepad or anywhere.  You will be needing that later.

You are almost DONE!

Now, for the code itself, I have already done the research so it wouldn't be difficult for you, how fun is that?  I got this from different websites and made some changes depending on the location where I want my blog button/badge to redirect the visitor.

Okay, so here goes.
Just get the codes below and enter your own URLs.

Redirect to Main Page:

<a href="Your Blog URL" target="_blank" title="Your Blog Title"><img alt="Your Blog Title" src="Your Image URL" /></a>

Mine would look something like this:

<a href="http://www.extraordinairememoir.blogspot.com/" target="_blank" title="Memoir Extraordinaire"><img alt="Memoir Extraordinaire" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQXWtpmzijMqCNJ0ZotfgYagX4SVR8DfUESynkz5ucYq-JV4TQUAmJgGbXSMPQAfnQmrKCuaLED6lp3ilJZkFOoxTg4vhU-gx9aCYR1LMDbXBTmmqHYFHrpJY_nCUwjxT6R4f29zH2a2lj/s201-no/memoir+extraordinaire+blog+button+2.jpg" /></a>

Redirect to a set of posts with the same label

<a href="Your Blog URL/search/label/Your Label/" target="_blank" title="Your Blog Title"><img alt="Your Blog Title" src="Your Image URL" /></a>

When I created my Stop.Blog.Hop button, I opted for it to be redirected to all posts with Stop.Blog.Hop label so the code looked like this:

<a href="http://www.extraordinairememoir.blogspot.com/search/label/stop.blog.hop/" target="_blank" title="Memoir Extraordinaire"><img alt="Memoir Extraordinaire" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtOjs4tuYChXifnUCHlu10v3u7b-LuW2MP_pbPfcJX40vKmzUi6dHHGD32hmCvnuUfgzoStxA4oRKeyoE69NZ84vidIezzZjyHN_DjaOEQFBkaZAYJfhkotPp1z0TAn_Ry7P62MbHzLVzx/w202-h203-no/stop+blog+hop+button.jpg" /></a>

Redirect to a certain post

<a href="Your Post URL" target="_blank" title="Your Blog Title"><img alt="Your Blog Title" src="Your Image URL" /></a>

Mine would look something like this:

<a href="http://extraordinairememoir.blogspot.com/2013/10/quotable-quote-ad-spot-winner.html/" target="_blank" title="Memoir Extraordinaire"><img alt="Memoir Extraordinaire" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQXWtpmzijMqCNJ0ZotfgYagX4SVR8DfUESynkz5ucYq-JV4TQUAmJgGbXSMPQAfnQmrKCuaLED6lp3ilJZkFOoxTg4vhU-gx9aCYR1LMDbXBTmmqHYFHrpJY_nCUwjxT6R4f29zH2a2lj/s201-no/memoir+extraordinaire+blog+button+2.jpg" /></a>

Now, add those codes to your sidebar.

If you are using Blogger platform, go to Layout then Add gadget.  On the Add Gadget option, select Add HTML/Java Script.

Wait there's more.

If you want a Grab box in addition to the button, add this code to the codes above:

Redirect to Main Page:

<textarea style="background:#f0f0f0;border: solid 1px #cccccc; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 7px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="Your Blog URL" title="Your Blog Title"&gt;&lt;img src="Your Image URL" alt="Your Blog Title" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea></pre>

Redirect to a set of posts with the same label

<textarea style="background:#f0f0f0;border: solid 1px #cccccc; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 7px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="Your Blog URL/search/label/Your Label" title="Your Blog Title"&gt;&lt;img src="Your Image URL" alt="Your Blog Title" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea></pre>

Redirect to a certain post

<textarea style="background:#f0f0f0;border: solid 1px #cccccc; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 7px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="Your Post URL" title="Your Blog Title"&gt;&lt;img src="Your Image URL" alt="Your Blog Title" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea></pre>

And if you wish to have it as a blog entry/post do this:
Select Add a New Post then click HTML and paste the code or codes if you want both the button and the grab box.

Your button with the grab box should look like this

I hope this helps!
Let me know if you have any clarification.

Thank you for dropping by.