Wednesday, March 12, 2014

How to Make a Clickable Button


Have you ever wanted to make your own "ad" of sorts? Do you want a picture on your blog that will catch your readers eye, and then with just one click will take take them to your Facebook page or Etsy shop? There are so many uses for clickable images and I ran into one last week.

I don't know how many of you noticed but there are two new buttons over on the right-hand side of the blog. There is one that takes you to a page of all my free patterns listed under alphabetized categories, much easier to search for what you need. The other will take you to the new blog I opened last week. It is all about our family, our farm, a few recipes that come to me, and children's crafts/project ideas. You can see both buttons right over there! --->>

Go ahead, click on them, let me know what you think {and how well they work.}


Everyone was talking about how easy this was to do. "All you have to do is get some code input your stuff and you're done!" yada, yada.... Ok...... Where do I get this code????

After searching around the internet all I could find were half tutorials that taught people that knew what they were doing already how to do this. I DID'T KNOW WHAT I WAS DOING!!!

So I got smart, I went into the widget that has all my social media buttons and copied a bit of code that I *thought* was what I needed. After some trial and error {and some strands of hair lost..} I was able to narrow it down to EXACTLY what I needed. Now that I actually understand it better I am going to give you the code and I am going to walk you through set by step what you need to change and how you are going to change it so that you too can have your own clickable buttons!!

Let's go!!!


3 things you are going to need:
-The code
-A photo uploaded to Photobucket or Picasa or somewhere that will give you a web address to that picture online. I used Photobucket.
-The website address that you want the picture to direct to

Here is the code:
<a href="website you want the button to direct to" target="_blank" rel="nofollow"><img src="the direct link for the photo" width="250" /></a>

The blue portion you will highlight and erase, replacing it with the website you want the clickable button to direct to. Make sure you have the http:// at the beginning. If you are copy/pasting it from the website it will. If you are typing it in yourself because you have the website memorized, make sure you start the web address with http:// it will not work otherwise.

Next you are going to copy your direct link from your photo where ever you have it uploaded. I can tell you that in Photobucket when you click on the image itself there will be a box on the right-hand side that has 4 links. You will click on the one that is titled "direct" and paste it right where that pink highlighted text is. The image should already start with http:// just be sure it is there.

The last piece of code that is optional to change is highlighted there in green. This will determine how wide your photo appears on your blog. If you apply the code as is, it will be the size of my photo buttons. If you would like it smaller just start experimenting, try 160 for example and then save it, view the button on your blog, too big or too small, adjust again. The photo will shrink and grow proportionately so you don't need to have a height listed anywhere.

Two things I want you to keep in mind when you do this:
1: Copy the code for your clickable button and paste it straight onto a Blogger widget. DO NOT PASTE IT IN MICROSOFT WORD!!! Microsoft word automatically adds symbols to HTML code and you will be totally lost in 3 seconds. DON'T DO IT!!!!
2: Make sure that all of the links that you paste in place of the highlighted text are still surrounded by the quotation marks. Don't erase them.

That should be it! I hope it was simple enough. I really felt that it was once I FINALLY figured it out! I'm really happy with my new clickable buttons. I was able to put them on both blogs and I am sooooo glad that I did it!!! I whipped HTML's little tooshie and it felt gooooood!

Be Happy!!

2 comments:

Hearing from my readers is like Christmas for me! Your comments make my day and keep me going. Please know that I read and enjoy every one. Thank you for leaving me a little note today!