Blogging Tips | DIY Custom Clickable Buttons!

Okay so I've had a lot of you asking me how to create clickable buttons for different things such as my custom system for all my sponsors (see below) and I just recently added the custom Popular Reads sidebar on BEB Blog so I could share the posts that are most pinned, most viewed, or most shared!

Anyway, this is really a SIMPLE process! Don't get freaked with using HTML code. It's not that hard or bad and using this code you can do just about anything you want for you blog design which is FANTASTIC!

Okay, so FIRST RULE is that your image needs to be cropped to the exact size you want it to appear on your blog. Some of you probably know about creating blog buttons with grab boxes (my tutorial here, by the way!). So you know that for a square image you do 200x200 (one of the most popular button sizes) or any other pixel size like 200x100 or 100x100...it goes on. The PIXEL SIZE is what makes the image size. So make sure you make the image into the pixel size you want before you get ready to use it. There is absolutely no way around this rule.

SECOND RULE. Keep in mind when you're going to create something like I created the custom sponsor system, or the popular reads section, that you keep all the images for that group the exact same pixel size. For example: all the images in my sponsor bar are 100x100. ALL OF THEM. The ones for my Popular Reads are 100x100 because everything on my sidebars are 200x200 and I wanted two rows so I just divided 200 in half to get the 100 so everything would line up correctly.

THIRD RULE. Keep them centered! Wow I cannot stress enough the importance of keeping your clickable buttons centered! No matter what you do always line them up using the center of a page. Not left, not right. This keeps everything lined up on your blog no matter what layout you choose.

FOURTH RULE. Label wording. Okay so this really isn't a rule, but is something to consider. Especially if you are going to use these buttons for something like I've done on my Popular Reads post. Keep the text a size that is still readable, even when the image is shrunk to the size you have for your sidebar. I had a little difficulty with the text size for my 100x100 Popular Reads. I';l be redoing the buttons on my current Popular Reads sidebar at some point, but for now they'll do.

Okay so let's get creating!!

The HTML Code you will need:

<a href="http://blueeyedbeautyblogg.blogspot.com/p/blog-restyling.html"><img src="http://4.bp.blogspot.com/-NhTBbuP9W_M/UWenNyou7zI/AAAAAAAAXcA/ruNlW-KDqZs/s1600/100x100+want+me+to+restyle+your+blog.jpg" /></a>

How it breaks down:

PINK: This is where you will place the URL to a blog post, another blog, or a website that you want the button to link to. IF you don't want the button to link anywhere, but still want to be able to have completely lined up buttons just enter the YELLOW code (photo URL) here instead of a URL leading to something as else.

YELLOW: This is the image code. There are several ways to get this, but I've found one of the easiest for me is to create a photo album on Picasa Web and upload the photo(s) for the project. Then open each of the photos in a draft post and copy the code as shown just below and paste it in the HTML code above. If you already have a system for getting image URLs then ignore this part! :)

Centering the HTML code

Before you go and use the code I'd HIGHLY suggest copying the entire bit you create and pasting it into a draft post on HTML mode. Switch over to Compose mode and then click the 'center' box in the options along the top bar just under the post title. Switch back to HTML mode, copy the ENTIRE code listed there and then paste it on your blog in an HTML/Java Script box. (These are all blogger terms. I don't know how to do anything on/for Wordpress.)

What it looks like finished:

You should be able to click on the image above and it will take you directly to my "Want Me To Restyle Your Blog Too Page". This image is size 100x100. It's one of the smaller projects I've done. I used custom clickable buttons for all of my pages (see the left top sidebar of my blog) and for my Pick A Series column, for my Social Media/Follow column, and pretty much everything else on my blogs sidebars. It's an awesome code and has so many applications!

Wrap It Up

So this may look a little tricky, but give it a try. Unless you erase a piece of the code it should be very simple to copy and paste. To create a continuing line of images that automatically fill a row and start the next row (as I've done at the bottom of my blog in both the Link Parties & Blog Hops sections) simply paste each image code to where they connect like this:

<a href="http://blueeyedbeautyblogg.blogspot.com/p/blog-restyling.html"><img src="http://4.bp.blogspot.com/-NhTBbuP9W_M/UWenNyou7zI/AAAAAAAAXcA/ruNlW-KDqZs/s1600/100x100+want+me+to+restyle+your+blog.jpg" /></a><a href="http://blueeyedbeautyblogg.blogspot.com/p/blog-restyling.html"><img src="http://4.bp.blogspot.com/-NhTBbuP9W_M/UWenNyou7zI/AAAAAAAAXcA/ruNlW-KDqZs/s1600/100x100+want+me+to+restyle+your+blog.jpg" /></a>

They will all line up next to each other and keep in the order that you put them in.