01 August 2012

Blog Tips: Making Clickable Images and Buttons


Four years Blogging and I finally figured out how to do it - make clickable images (and hence proper html sidebar buttons.)

I mean, I figured out the Social Media Buttons which took long enough, but seemed to have problems finding code that would allow me to link to a specific page, post or label collection.

About a month ago, I found it. Eureka!
Spotted some code on a button which linked to a specific post (mine would always say "Page Not Found" when I tried to do that.

I copied the code and experimented. Created come clickable sidebar buttons, clickable images and then some clickable promos....




It works.
This code, for whatever reason, does the job.
And now I'm gonna share it with you.

You can take it and use it in so many ways.
Make your own groovy sidebar buttons using code - you'll have control over their size and placement, reducing unsightly gaps and letting you choose the alignment (unlike using the old manual "picture" gadget).
You can make clickable images to use in your pages, or giveaways or promos (Next time I'll show you how to make them flashing).

Your blog will never be the same again.


The Magic Clickable Code

<center><a href="YOUR POST ADDRESS"><img src="YOUR IMAGE ADDRESS" width="190" /></a></center>


THE BREAKDOWN: HOW TO USE IT
  • <center> = alter this to <left> or <right> if you want to change the alignment
  • width="190= alter the blue number to control the size of your image (the height will adjust automatically)
  • <a href="YOUR POST ADDRESS"> = insert the URL address of the page, post or "label" you want the image to link to in place of the purple text (go here to find out more about using and linking to labels)
  • <img src="YOUR IMAGE ADDRESS= insert the URL address of the Image you want to make clickable. To get this you need to upload the image to PhotoBucket, then copy the "direct link" code for the image and paste it in place of the orange text.

CREATING IMAGES TO USE AS BUTTONS/PROMOS/CLICKABLE IMAGES
There are loads of programmes you can use to make images for buttons. My favourite is Photoscape, but lately I've started using PicMonkey and  PhotoBucket also has some cool new tools. All are free to use, and are fun to play around in. You can add text to photos you've taken and edited yourself or find some free images on the internet to adapt and use. You can even get your kid to draw something original for you, like I did. Really you are only limited by your imagination.


Some Buttons I've Made for You
If  this all sounds too complicated and you prefer something ready-made, I've created come collections of sidebar buttons that you can take and use.
All you have to do is add in the URL address of the post/page you want to link to and adjust the size and alignment if needed.

{Or you can take this idea, find something cool online like these tags, and add your own text to create a set of buttons unique to your blog.}


BUNTING SIDEBAR BUTTONS CODE

<center><a href="YOUR ABOUT PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/buntingaboutme.png" width="190" /></a></center>
<center><a href="YOUR RECIPES PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/buntingrecipes.png" width="190" /></a></center>
<center><a href="YOUR BEST POSTS PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/buntingbestposts.png" width="190" /></a></center>
<center><a href="YOUR TUTORIALS PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/buntingtutorials.png" width="190" /></a></center>
<center><a href="YOUR PARTIES PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/buntingparties.png" width="190" /></a></center>
<center><a href="YOUR ADVERTISING PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/buntingadvertising.png" width="190" /></a></center>
<center><a href="YOUR MOTHERHOOD PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/buntingmotherhood.png" width="190" /></a></center>




SWING TAG BUTTONS

<center><a href="YOUR ABOUT PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/fabricswingtagaboutme.png" width="190" /></a></center>
<center><a href="YOUR RECIPES PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/fabricswingtagrecipes.png" width="190" /></a></center>
<center><a href="YOUR FAMILY PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/fabricswingtagfamily.png" width="190" /></a></center>
<center><a href="YOUR TUTORIALS PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/fabricswingtagtutorials.png" width="190" /></a></center>
<center><a href="YOUR CONTACT PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/fabricswingtagcontact.png" width="190" /></a></center>
<center><a href="YOUR CRAFTY PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/fabricswingtagcrafty.png" width="190" /></a></center>





SIMPLE FABRIC BUTTONS

<center><a href="YOUR ABOUT PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/BLUESPOTaboutme.png" width="190" /></a></center>
<center><a href="YOUR RECIPES PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/NOTEPAPERrecipes.png" width="190" /></a></center>
<center><a href="YOUR FAMILY PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/BLUESPOTfamily.png" width="190" /></a></center>
<center><a href="YOUR BEST POSTS PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/YELLOWCHECKbestposts.png" width="190" /></a></center>
<center><a href="YOUR TUTORIALS PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/NOTEPAPERtutorials.png" width="190" /></a></center>
<center><a href="YOUR CONTACT PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/BLUESPOTcontact.png" width="190" /></a></center>
<center><a href="YOUR PARTY PAGE ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/PINKSTRIPEparties.png" width="190" /></a></center>
<center><a href="YOUR GRATEFUL POSTS ADDRESS"><img src="http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/YELLOWCHECKgrateful.png" width="190" /></a></center>



SIMPLE RED BUTTONS

<center><a href="YOUR ABOUT PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/aboutredcopy.png" width="190" /></a></center>
<center><a href="YOUR RECIPES PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/recipesred.png" width="190" /></a></center>
<center><a href="YOUR FAMILY PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/familyred.png" width="190" /></a></center>
<center><a href="YOUR MAKINGS PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/makingsred.png" width="190" /></a></center>
<center><a href="BEST POSTS PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/bestpostsred.png" width="190" /></a></center>
<center><a href="YOUR PARTIES PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/partiesred.png" width="190" /></a></center>



CAMERA STAMP BUTTONS

<center><a href="YOUR ABOUT PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/camerastamp3about.png" width="190" /></a></center>
<center><a href="YOUR PHOTOGRAPHY PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/camerastamp3photography.png" width="190" /></a></center>
<center><a href="YOUR BEST OF ME PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/camerastamp3bestofme.png" width="190" /></a></center>
<center><a href="YOUR TUTORIALS PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/camerastamp3tutorials.png" width="190" /></a></center>
<center><a href="YOUR CONTACT PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/camerastamp3contact.png" width="190" /></a></center>
<center><a href="YOUR INSTAGRAM PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/camerastamp3instagram.png" width="190" /></a></center>
<center><a href="YOUR PROJECTS PAGE ADDRESS"><img src=" http://i788.photobucket.com/albums/yy162/donnasimone/Sidebar%20button%20collections/camerastamp3projects.png" width="190" /></a></center>

........................


Now go and make some clickable stuff (and then come back if you would be so kind, and leave me your blog address in the comments so I can see what you've done to your blog with these tips ♥)

{P.S. If you're feeling eternally grateful right now... you can say *thankyou* by Following and/or grabbing my blog design button}

GREATFUN BLOG DESIGN BUTTON
(grab the button if you've had a bloggy makeover or used my blog tips or free buttons)

Greatfun Blog Design

IF BLOGGY DIY ISN'T YOUR THING:
If doing this yourself seems too overwhelming, you can always take the easy way out and let me do it for you. Visit my Custom Blog Design webshop and request either a special customised button set (NZ$25) or an extra button in one of the styles pictured here (NZ$5 per button).
I can also create Headers, grab-buttons and even do a complete blog-design overhaul...


MY OTHER BLOG TIPS



FOLLOW ME ON Facebook // Twitter // Instagram // Bloglovin //

No comments:

Post a Comment