Blog Button Tutorial: How to Make A Blog Button for Blogger and WordPress; Blogging 101

It is time for our next edition in our blogging tutorial series; how to create your own blog button or some like to call it a blog button tutorial! The first part of this blog button tutorial will give you step by step instructions on how to create a blog button and insert it into blogger. This part I created shortly after I started blogging back in 2011, so please forgive any “outdated” photos. The second part will be how to create and install a button into Wordpress. And the third section will show you how you can slightly alter the code to create buttons for many different events and blogging occasions. Every blogger should know how to make their own simple buttons, as it will save you a lot of money if you have the basics for simple buttons! Once you have the basic “know how” you can then create your own blog button for blog events, weekly hops and more.

PART 1: Blog Button Tutorial for Blogger:

The most simple way to make a blog button is with an image or photo. Lets get started.

Step 1: Select any picture you want to use.

Step 2: you will need to crop the picture down to size. I often use Picmonkey.com as it is free, and I can quickly crop and resize my photo in just a matter of a few seconds. Standard Blog button size is 150X150. But really you can make it any size you want to fit the theme or size of your sidebar.

Step 3: You will need to upload your photo onto a site hosting page. You can use Picasa, but For this demonstration I will be using Photobucket. Once you upload your picture to photobucket, you can then select and copy the “direct link” code shown by my green arrow.

Step 4: This is where you will be creating the HTML code for the picture. You will want to open a “notepad” writing file. The program is actually called notepad if you have a PC computer. It is free and standard on PC computers. If you don’t know about it, simply go to your start menu and in the search box type in notepad. It will find the program for you. You can create a shortcut icon on your desktop to make it faster to find for future use if you want.

Many people use Word documents, but I often found that when I would transfer the code from word to blogger or wordpress, that Word documents would change the coding slightly which then in turn would not work. Word documents don’t always play nicely with HTML codes, as they try to convert the actual code to do what the code is suppose to do once placed in an HTML code reader. So if you use notepad instead, it won’t alter any of the HTML coding, and you will have less struggle with getting your code to work.

use this code:

<a border=”0″ href=BlogURLaddress” target=”_blank”><img src=”imagedirectURL”/></a>

Where it says blogURL address replace that with your blog’s actual URL address. Farther into the code it will say, “imagedirectURL” replace that with the link you just copied from Photobucket. Once you have the entire link set up, now you are ready to put it into your blog.

This is also the most basic code you will use for many other uses! Basically that’s all the coding you need for a blog button! Simple right? Now let’s install this blog button!

Step 5: For BLOGGER/Blogspot, go to your editing section and click “layout”.

Select “add a Gadget” and select HTML Then Add the HTML code you just created.

You can title it “Grab our button” or “take our button” or anything you want. Save and view your blog to make sure the link worked. Click on your picture to be sure it will direct your traffic where you want it to go. You now have a blog button!

Step 6: If you want the little box at the bottom with the code inside where others can take your button and add it to their own page, then simply go back to the same Gadget box, but at the end of the current code that is written in that box add:

<textarea rows=”4″ cols=”20″>insert your html code from before and end with </textarea>

So you will have the first code listed twice, but with the <textarea rows… etc code separating the two. This short little code is what makes that fun box appear below your blog button so others can then take the code and insert your button into their own site. Our complete code looks like this:

Save and then view your blog to be sure it listed correctly.

CONGRATS! You now have your button created!
If at any time you want your button to direct your fans to a different location, you can simply go into the gadget html code and simply change the first URL to where you want the button to direct your traffic!

Part 2: Blog Button Tutorial for WordPress:

The only difference between making a blog button for blogger versus wordpress is the installation. So most of what I mentioned earlier you will still do. Follow steps 1-4 from above.

Step 5: In your dashboard, go to Appearance and click widgets. Where you will then click on “TEXT” and drag it over into your chosen sidebar where you want the blog button to appear.

Step 6: Insert the same codes from above into the new text box. Name the box and click Save!

You now have a Blog Button installed in your WordPress site!

Part 3: Using your Button for Blog Hops and Events!

As I mentioned, once you have a basic knowledge of how a button works, you can then with minor edits to the code and image create buttons for blog hops, blogger events and more! Take our Wordless Wednesday button for instance.

All you do is start with an image. Crop and resize the photo how you want it. Add a little text if it calls for it and then saved the photo to your computer. You upload the photo to an image hosting site such as photobucket, and then merely use the same HTML code, just change the URL of the image and where you want the image directed. Simple as that.

Then you can simply enter the code into the HTML side or Source side of the post editor in the location you want the button to show up.

Again, if you only want the image, delete the rest of the code starting from

 <textarea rows=”4″ cols=”20″><a border=”0″  

And then you will have just the image without the box. And when they click on the image, it will redirect them to the URL you specified. The possibilities are endless! Does it all make sense?

So do you think you can make your own blog button now? 

What did you think of our Blog Button Tutorial?

If you found it helpful, don’t forget to share, pin, stumble, Google+ and more to help others out! 

424 Flares Twitter 63 Tweet Facebook 9 Google+ 14 Pin It Share 318 Reddit 0 StumbleUpon 9 LinkedIn 11 Email -- Email to a friend 424 Flares ×

Tagged as: blog button tutorial, blogging tips, how to