Breaking News

How To Add Style To Adsense Ads 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.


How To Add Style To Adsense Ads To Earn More?


Normally, Adsense ads are not much attractive. Just a square or rectangle box with two colours mashup. And this is the biggest reason you don’t get enough clicks on 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 Borders To Advertisement Boxes 


By_Adding_Borders_To_Advertisement_Boxes-_Expert_Guider

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 the 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 coloured 10px in above code.
  2. To change border’s colour replace #007DC1 with the hex colour code you want.
  3. To change border’s type change the text in sky-blue (aqua) colour.
  4. Save your template and done!

 #2- By Adding Box Shadow 


By_Adding_Box_Shadow-_Expert_Guider

This time, I have tried something different., we have used a little CSS by which, a beautiful shadow will be added to your blog’s AdSense ads. To add this style to your blog’s all AdSense ads, just follow these steps:
  • Go to Blogger Dashboard > Template > Edit HTML
  • Now press Ctrl+F to open the 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 colour by changing the hex colour code that is highlighted in black colour, bold, and italic.
  2. 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-

3-_Adding_Both_Box-shadow_and_Border-_Expert_Guider

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 the 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 also using 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 the comment box below. And we have also changed our Website look and Design, So how is our new Website Look and design, give us your opinion in the comment box Thanks!


No comments