Add CSS Hover Effects To Advertisment Banners in Blogger

I thought i would do a post for CSS hover effects for advertisement banners as i haven't done them in past. The advertisement banners that i am discussing today are mostly used by the Buy-sell ads users, though they can be used for any other advertisement programs.

The tutorial emphasizes on hover effect for ads banners. First take a look at the demo link. (The 125 x125 banner on right side bar)

Demo link:
Liked it? Its very easy to implement so lets get started.

Step 1:

Here are few advertisement banners, very basic ones though but are widely used in the industry. You can save them if you want.

Now lets add them. Go to Design >> Add a Gadget >> HTML / JavaScript and add the following code in it.

<a href="Your Add Link Here" rel="nofollow"><img alt="ad" src="Your Image Link Here" class="borders" style="padding:3px ;background-color:#eeecec" /></a>

Now click save. Add your ad link and banner link in the code above. Upload the banners to some free image hosting site or your blogger profile. Now for styling we need to add a small CSS code to our Edit HTML option of blogger. 

Step 2:
Go to Design >> Edit HTML
Now find the following code:  


And just above this code add the following code:

.Beh banner {-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;

.Beh banner {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

Now click save template. Thats all. Now you would see a cool hover effect on your advertisement banner. If you have any problem comment below in the 'Dubli do' :)



AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
BloggingeHow | Making Blogging Simpler: Add CSS Hover Effects To Advertisment Banners in Blogger
Add CSS Hover Effects To Advertisment Banners in Blogger
BloggingeHow | Making Blogging Simpler
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy

Tools of the Trade