Monday, February 12, 2007

Linda's How-Do-I Series? How Do I Make My Banners With Colored Borders Clickable?

Last time in our Linda's How-Do-I Series? How Do I Add A Colored Border Around My Banners" article we showed you how to add color to the borders around your banners.

Well, let's say we want to make those banners clickable back to our particular website or blog - how would we do it?

Well, here's how:

To review a little - Last time we had two banners side-by-side that we wanted to draw a blue blue rgb(0, 0, 105) border around and we wanted our border to have a 4px (i.e. pixels) thickness and we wanted our line to be a solid line.

Here's the HTML coding to do that (minus the ***'s which are there so you can view the HTML in this article):

<***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105);"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105);">

And that produced this:



The color blue could also be represented as #000069 versus rgb(0, 0, 105) that is shown in our coding in which case the coding would be style="border: 4px solid #000069;

Now, let's say we want to make those banners clickable back to our particular website or blog. By doing so when the reader clicks on our banner they will be brought to that particular website or blog. You can make them clickable back to any page of your website or your home page. Or, you can make them clickable back to the main page of your blog or to any particular article's page. All you need to do this is the exact URL of the page that you want. In our case we are going to make the banners clickable back to the home page of our websites and the main page of our blogs. So, how would we do that?

Here's how to do that (minus the ***'s which are there so you can view the HTML in this article):

<***a href="http://thebookreviewcorner.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/BookReviewButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105);"><***/a><***a href="http://lindawalshoriginals.blogspot.com/"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LindasBlogButton150x150.jpg" style="border: 4px solid rgb(0, 0, 105);"><***/a>

And, that would produce this:



Click on each of the two banners above and see what happens. You should be brought to my "The Book Review Corner " blog for the first banner and to my "Linda's Blog" for the second banner.

I hope this helped to show you how to make your banners with colored borders clickable.


Posted by Linda Walsh Originals - "Doll Patterns for Grown-up Girls!"

No comments:

Post a Comment