Well, I have been sent a couple of emails from different users in the last few weeks asking what I did to my banners. This technique is very simple, but I find it makes the site look much better.
This is going to be a short post as it’s very plain and simple. Ok, so what did I do?
Actually, not much. I saw it on one of the sites that I just happened to find by mistake and checked their source code. It took me a while to understand what was being done, but I did get it 
Once I had found the code, then it was just a copy and paste situation.
I personally feel that it makes the banners a bit dull, which enables the user to concentrate on the content of the blog. That is what you actually want in the end, right?. When the user hovers over the banners, then only will they be highlighted. I know it works in my case as many have said so.
If you look at the two banners below, one is normal and the other will be highlighted once you move the mouse over it.
 Normal banner | Hover banner |
I will give you the code and then it’s up to you to copy it to the images you want to.
You will see that it has details for style, that is it. Nothing more or less, very simple hey? Now all you have to do, is implement it on your blog and check the images.
Final Thought
Did you think it was more technical than what it really was? Would you use this technique on your site? If so, then let us know so that we can give you feedback.
I am the proud owner of Serradinho.com and have made this my second home. I'm into blogging, downloads, WordPress, meeting and helping others, etc. Basically the internet in general :) Serradinho Web Services is my own company whereby I offer my services to clients. This ranges from web design, website upgrades, theme customizations, support, premium WordPress plugins and many more .....
View all posts by George Serradinho, there might be other posts that interest you.
{ 43 comments }
Stumbled and dugg the topic for you George. Thanks for the tutorial. Bookmarked it as well for personal use
.-= Ricky´s last blog ..Remove Ikee iPhone Worm Easily[How-to] =-.
@Ricky – thanks man, appreciate it. Could come in handy later on.
And how do it work in this blog? do it give more click to the image?
.-= Dana @ Online Knowledge´s last blog ..Keyword Optimizing =-.
@Dana – I’m not 100% sure if I’m getting more clicks, but I would love to think so.
Great tip George.
I have always wonder how you do that
Thanks
.-= Roseli A. Bakar´s last blog ..Setting Up Facebook Fan Pages and Groups =-.
@Roseli – will now you know and you can do the same if you want to
Thanks George for the wonderful tip..
me just drafted the mail and was ready to clink on send for asking this hovering effect but read this tutorial and saved ur inbox from one more bombardment of such mail
Atul
.-= TechOfWeb´s last blog ..Adding Google Search is against Adsense Policies =-.
@TechOfWeb – glad to be of help, hope it works for as it has for me.
Awesome tip George…I will try this on my website as well…
.-= Anand Srinivasan´s last blog ..Promoting Your Niche Store – SEO vs. SEM =-.
@Anand – glad to be of help, let me know when you have made some changes.
I like how you can select which specific images you want to put the effect on, I know I wouldn’t want it on all of my images for instance.
.-= Extreme John´s last blog ..5 Reasons I Suck at Entrecard =-.
@Extreme John – for your site, NO. For my site that has not got many images (my opinion), I like it all over. Let me know if I have overdone it here????
Easy tutorial, George. RT-ed
.-= Jacob Yap´s last blog ..Tweet To Win a Google Wave Invitation Everyday, for 10 Days! =-.
Excellent
I sent it all around FB and Twitter so that may get two visitors LOL 
Just messing around the site and everything is looking awesome Better and Better. Me, I mismanaged my funds and got my main blog shut off till the 16th. I could of spent it mad and am embarrassed, but said I will learn from it and move on 
So don’t drink up all your funds is my tip of the day 
Hope all is well thanks man
Keep up the excellent work
.-= John Sullivan´s last blog ..Keywords that pay the best on Google adsense =-.
@John Sullivan – sorry to hear about your blog, I guess it won’t happen again. Ok, lets hope so
George, I used this technique in the personal ads placed at the footer of my blog and is very nice indeed. I also noticed this in the ads under the comment box here!
.-= Hicham´s last blog ..Justice and Stereotype =-.
@Hicham – I have used this technique for all my ads and a few other places. I saw your changes on your site, glad to be of help
That is what I intended to ask you for a long time but I did not dare to do so
Do you mind if you can share the way to customize your footer area. I saw many blogs using thesis had the same footer like yours but could not find anywhere the tutorials to do so. I will try to search within DIYthemes forum again
.-= Tinh´s last blog ..Historic Thesis Skin for FREE =-.
@Tinh – the footer is from Alex from asnio.com. Here is the link for you – Footer Mod. I hope it helps you out.
Thanks George! Really appreciate that I wish you have my emotional icons here to show some love
.-= Tinh´s last blog ..Twitter Tips: Who To Follow & Who Not To Follow =-.
Thanks George for sharing this.
.-= steppinout´s last blog ..Grab A Free 3GB Storage From Memopal Online Backup Service =-.
Excellent tips. Makes your affiliate images somewhat off and maybe that will create some curiousity from your visitors and attract clicks.
.-= MichaelR´s last blog ..OneSuite Has Canada Covered! Up to 50% Cheaper =-.
@MichaelR – I think it creates a suspense when they hover over it as it lights up. I still have to see if my clicks increase which will be done after a few months as I will have enough data to work with.
Yep, we can empower our images by using this trick. But this is my small upgrade, need to hear from you
We should make it a new class or a new id in the styles sheet file and write two javascript functions for mouseOver and mouseOut. So it might take less size when our post have many images, the browser then can cache the code and doesn’t need to reload the functions or style next time readers visit our post.
.-= Phaoloo´s last blog ..6 Effective Tools To Check Your Site For Broken Links =-.
Really great tips man. I did not know about it before. It can really attract visitor to our post. I have already tweet this post. Thank you.
.-= chandan@work at home´s last blog ..New from google work at home affiliate network =-.
but which part of the blog should this go in…. i mean should we paste this code in the sidebar…
or may be, we could just use the text widget…
Thks for letting me know George
Cheers
Sandee
.-= Curious Little Person´s last blog ..What are Backlinks? And the Different Kinds of Backlinks? =-.
@CLP – if you looked at the code, you will notice the styling is done as part of the image. All you have to do is add the style to your images and it should work.
John’s comment gave me a thought. I wonder how paid advertisers would feel about a faded banner?
.-= Dennis Edell´s last blog ..He/She Has Unsubscribed – Should You Ask Why? =-.
@Dennis – thats a very good question, but I would not make a paid advertiser a faded banner. That would be unfair to them. I would have their ad show as normal.
Smart move, I’d surely do the same.
.-= Dennis Edell´s last blog ..I Want You To Review Me. Part 1 =-.
Serradinho, you know I like this feature and I thought you won’t be revealing it in your blog, and now you do it! Thanks again for sharing bro, you know I like your thesis customization tutorial.
Regards,
Lee
.-= Lee Ka Hoong´s last blog ..Free Blog Contest Giveaways In WeBuildYourBlog =-.
@Lee Ka Hoong – I had to share it as I received a few emails a week about it. I don’t mind sharing the tip as everyone has a right to know, I’m not one of those bloggers who keep things to myself
Really cool, just implemented on my new domain and looks so great. Thanks
.-= Tinh´s last blog ..My Blog Has New Name! Win My Last Google Wave Invite! =-.
Hi George,
Great CSS coding customization.Even you can add this effect to your Text links and hovers.
.-= Surender Sharma´s last blog ..How To Find Friends and Likeminded People To follow On Twitter =-.
This opacity effect really looks great in your sidebar. Thanks for sharing this opacity CSS, it works properly.
.-= Sanjeev´s last blog ..“Aureola” Wordpress Magazine Theme by Internet Techies – RELEASE =-.
@Sanjeev – no problem, I thought I should share it as many users wanted to know.
I just gave it a try on my blog, it is really very simple to use and it is looking great , thanks alot for sharing it.
.-= Ruchi´s last blog ..Is Excessive Blogging Hurting your Relations =-.
@Ruchi – glad it worked and yes, it’s very easy and simple to use.
Wow there’s always something new whenever I come to your blog
I barely see any “Thesis resemblance” anymore…
.-= Michael Aulia´s last blog ..Backing up with HP Simple Save =-.
@Michael – I’m trying to be unique and different, do you like it?
This is a good option, but I would not like to repeat this action for all my images, but only for the sidebar images (since the task is not repetitive)
.-= John Samuel´s last blog ..Happy Birthday Firefox! It’s 5 years of Happy Browsing =-.
Really cool tip George!
.-= Liane YoungBlogger´s last blog ..The Three Things Every Blogger Needs to Understand About Social Networking =-.
Thanks for the code!!! More clicks come to me!
.-= minhmeo´s last blog ..35 Plugins phổ biến nhất cho Wordpress =-.
Comments on this entry are closed.
{ 1 trackback }