This is a nice simple tutorial. It is a guide to using css to customize the look of you google adsense. Later I will release a variety of examples for you to use on your own website. Customising the look of the google ads can be very good as it can make the ads blend into your site's design and cause it to look less cumbersome and gaudy.Using CSS With Adsense
When I first think of customising my ads I first need to work out what type of ads I am going to use. For m example I will be using the bann er ads which are 468px x 60px. I chose these as they are easy to fit into site designs and for different widths of screen. I will also be showing this tutorial through adobe photoshop. If you use a different image editting program it shouldn't be too difficult to see what I am doing at each stage.
Designing The Ad Background
Okay so this will be simple. Open up photoshop and select a page of width 468px and height 90px (greater than the height of the ads so we can can add gradients at top and bottom). When we start designing we must keep in mind one important thing - the background of the ads must be a solid colour. So with photoshop open create a new layer and fill the whole working area a background colour. For this example I am going to use #FEF1F9 as it blends in with this site but you can use any colour of your chose. The will be the background for the ads. Next is to create the gradient at the top. To do this open the marquee tool and chose fixed size of 468px wide and 15px high. Create a new layer and fill it with any colour as it will be getting changed. Change the layer properties for this layer as:
Fill Opacity: 0% Gradient Overlay: Overlay - 100%, Linear, 90 degress, From base background colour with opacity set to 0 to black set to 100%.
Read More here
Tags:
