How to Create a Pure CSS Advertisement Space or Box?

If you write a blog then there is always a chance to earn money by advertising on your blog. Advertisement can be published through ad service providers like Google Adsense, Infolinks, Viglinks, etc. or if your blog has awesome Alexa rank or niche readers then some company may ask some blog space to display their products and services. These advertisements can be in the form of image, flash, and text. In this article, we’ll talk about text ads using CSS and some HTML properties. These ads will be in text format but have some animation property to attract the attention of your blog visitors.

How to create a pure CSS ad space or box

Animated CSS Advertisement Space or Box Preview

Order your dream blog or website designअपना ब्लॉग या वेबसाइट डिज़ाइन करवायेंOrder Now: +91-876567XXXX

Ads by techPrevue

Code for CSS Animated Advertisement Space or Box

<div style="background: #FFA92F; color: white; font-size: 14px; height: 75px; width: 300px;">
<marquee behavior="alternate" direction="left" scrollamount="2"><span style="float: left; font-family: Oswald, Arial; padding: 0 0 0 2px;">Order your dream blog or website design</span></marquee><marquee behavior="alternate" direction="right" scrollamount="2"><span style="float: right; padding: 0 2px 0 0;"><a href="">CLICK HERE</a></span></marquee>
<span style="background: #FFF; color: #ffa92f; float: left;">Order Now: +91-876567XXXX</span><div style="float: right; font-size: xx-small;">
Ads by <span style="background: #FFF; color: #ffa92f;">techPrevue</span></div>

You can also display an ad space or box to show advertisers you have interest in an advertisement on your blog. In this case, you can try this code. By changing height and width you can create a box of different sizes.

Static CSS Advertisement Space or Box

Advertise Here
Size 300X250
Mail Us

Code for Static CSS Advertisement Space or Box

<div style="background:#F1F6FB;border:#D6DFD8 2px solid;vertical-align:middle;text-align:center;width:160px;padding:78px 68px 78px 68px;color:#879F9F"><b>Advertise Here</b><br/>Size 300X250<br/>Mail Us<br/><span style="font-size:small">techprevue[at]</span></div>

As these ad spaces or boxes are made with using pure CSS so this light is size so they do not make your site/blog anyhow slower. I hope you’ll enjoy this post and it will be helpful to you.

Leave a Comment

Your email address will not be published. Required fields are marked *