HTML Interior Banner. A How-To Post, By Request

For those of you who hadn't noticed, my last couple of blog posts have included something new. A banner inside the text box, at the top of each post. I've used this banner in the past but I had forgotten about it. Well, after some tweaking, I decided it was time for it to make a comeback. And this will probably be a permanent comeback since it contains specific key words that will help my SEO, at the top of each post.

As soon as I posted the first "new" banner post, I received a message from Lisa Heindel, asking me how to do it. Now I wish I could take credit for the original idea of using this banner, but I can't. I originally learned about it from someone else here on Active Rain. I wish I could remember who it was, so I could give the proper credit, but it's been a long time, so my apologies to the person who showed me how to do it.

So in this post, I had planned to show you how to switch to HTML mode and copy the code I would provide. I was then going to direct you to HTML sites that give you color charts. So imagine my surprise when, while still in WYSIWYG mode, when I pasted in the HTML for my banner, which would allow you to copy and paste, I was not left with just code, but the actual, entire banner. Obviously Active Rain has changed something that allows us to paste HTML and have banners (and possibly other things?) work, while still in WYSWYG mode. Huh. Go figure.

So, after removing brackets, then adding junk code, then more fiddling around, doing everything I could think of to get just the code to show, I finally gave up. And just as I was changing this post to an "ask for help" post, I remembered the Freeware I had downloaded, that enables me to take snapshots of anything on my computer screen. So I pasted the code into a WordPerfect document, then took a snapshot of it. The snapshot is saved as a .jpeg image, so it can be embedded as a photo. So here you go! Below is the HTML code for the banner you see above.

You won't be able to copy and past this code, since I had to embed it as a .jpeg image, but you can type it into your own post. You'll also need to place your own text in the box, and you may want to change the background colors, border colors and text colors.

There are many web sites that offer the HTML or CSS code color lists. I prefer (for obvious reasons) the lists that show the code along with the actual color. But bear in mind, colors look different on every computer monitor.

Here is one list of HTML colors. You'll also notice that if you turn the page on this list, it also provides basic HTML code for a number of things you can do on your blogs and web sites.

You may notice that my color codes are different than the codes on the list above. That's because I used codes from the web color Hexidecimal/RGB chart. (BTW, RGB is red, green, blue) The hexidecimal/RGB chart will allow you to duplicate web colors on print media as well. If you're trying to get an exact duplicate color both on and offlice, you may notice that when using Adobe Photoshop, you can change the colors of objects by entering the precise numbers of red, green and blue.

Lastly, I keep basic HTML, and HTML/CSS color charts printed and clipped together and tucked in the very front of the metal folder holder on my desk. It's great to keep them handy because let's face it. We're REALTORS®, not web masters, but we usually only need the basic codes, which we can easily do ourselves. But it's easy to forget the little parts of HTML code that make a BIG difference in the outcome of your HTML projects! So I recommend keeping handy cheat-sheets nearby.

If you really want to learn more about HTML, but don't want to experiment on your web site, or ruin a blog post while you're learning, here's an idea. Create an extra page on your web site, but don't make it visible to the public. This way you can experiment til your heart's content =) Heck, you might even want to keep that page there and just copy and past what you've created, anytime you need it. I haven't done this, (since I just thought of it) but it would sure save a lot of time in the future!

Terri- Sometimes I feel the same way... just enough knowledge to be dangerous. BTW, Mike Mueller had a great idea! He showed how to link the banner to our outside blogs. I'll have to change it more than what he demonstrated though, since I assigned a seperate domain name to my outside blog. Mine's www.ultimaterealestateblog.com =)

Disclaimer: ActiveRain, Inc. does not necessarily endorse the real estate agents, loan officers and brokers listed on this site.
These real estate profiles, blogs and blog entries are provided here as a courtesy to our visitors to help them
make an informed decision when buying or selling a house. ActiveRain, Inc. takes no responsibility for the content in these profiles,
that are written by the members of this community.