How to Make Adsense Ads Attractive To Earn More?

Nowadays, Adsense is the most popular ads provider for bloggers, WordPress users or say for Blogs and Websites. But their CPC is too low so, many bloggers who don't have a popular blog, are unable to earn from their blog. So, to help them, I am here with a new post that will tell you how to make your blog AdSense ads attractive and able to attract visitors.
Normally, Adsense ads are not much attractive. Just a square or rectangle box with two colors mashup. And this is the biggest reason you don’t get enough clicks from your blog. To make them attractive, today we will use CSS properties like box-shadow to add shadows on advertisements to make ads interesting.
Let’s look at some styles to make AdSense ads attractive.

#1- By Adding Box Shadow

In this style, we have used a little CSS by which, a beautiful shadow will be added behind your blog’s AdSense ads. To add this style in your blog’s all AdSense ads, just follow these steps:

• Go to Blogger Dashboard > Template > Edit HTML
• Now press Ctrl+F to open search box.
• Type ‘]]></b:skin>’ in that search box and press enter.
• After you find it, add this code above ‘]]></b:skin>’ in your template:

ins.adsbygoogle {
box-shadow: 0px 0px 7px 2px #818181;
}

Customization

1. You can change the shadow’s color by changing the hex color code that is highlighted with black color, bold, and italic.

• Save your template and done!

#2- By Adding Borders To Advertisement Boxes

This time, I have tried something different. Now, border CSS property is used to make this ugly adsense ad attractive. This time, I have not used an ordinary border type because using that type (solid), AdSense was not looking more beautiful than this. Let’s learn how to add this stylish, attractive CSS to your blog:
Steps are following:

• Go to Blogger Dashboard > Template > Edit HTML
• Now same- press Ctrl+F to open search box.
• Type ‘]]></b:skin>’ in that search box and press enter.
• After you find it, add this code above ‘]]></b:skin>’ in your template:

ins.adsbygoogle {
border: 10px #007DC1 inset;
}

Customization

1. To change border’s widget replace black colored 10px in above code.
2. To change border’s color replace #007DC1 with the hex color code you want.
3. To change border’s type change the text in sky-blue (aqua) color.

• Save your template and done!

#3- Adding Both Box-shadow and Border

This time, I have added both, Box shadow property and Border property and the resulted design was amazing! Look at this-

Looking professional, eye-catching and attractive? Now let’s learn how to add this style to boost your earnings!

Steps are following:

• Go to Blogger Dashboard > Template > Edit HTML
• Now same- press Ctrl+F to open search box.
• Type ‘]]></b:skin>’ in that search box and press enter.
• After you find it, add this code above ‘]]></b:skin>’ in your template:

ins.adsbygoogle {
border: 10px #007DC1 inset;
box-shadow: 0px 0px 7px 2px #818181;
}

• Save your template and all done! (You know the customizations. :p)

Note: - These styles will work on all ad sizes.

Final Words By Author

I hope you liked this post and going to implement these awesome techniques on your excellent blog. We are not even touching AdSense ads. We are just adding some CSS to get its look attractive. Means, your AdSense account is safe. As always, if any problem occurs during saving changes, please contact us using comment box below. Thanks!

Share this post