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. Advertisements can be published through ad service providers like Google Adsense, Infolinks, Viglinks, etc. If your blog has an awesome Ahrefs rank or niche readers, some companies may ask for some blog space to display their products and services. These advertisements can be in the form of images 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 your blog visitors’ attention.

How to create a pure CSS ad space or box

Animated CSS Advertisement Space or Box Preview

Small advertising banner

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 an 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

Medium advertising banner

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 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 *

Scroll to Top