Comment créer un espace ou une boîte publicitaire en CSS pur ?

Si vous écrivez un blog, il y a toujours une chance de gagner de l'argent en faisant de la publicité sur votre blog. La publicité peut être publiée via des fournisseurs de services publicitaires tels que Google Adsense, Infolinks, Viglinks, etc. ou si votre blog a un classement Alexa impressionnant ou des lecteurs de niche, certaines entreprises peuvent demander un espace de blog pour afficher leurs produits et services. Ces publicités peuvent être sous forme d'image, de flash et de texte. Dans cet article, nous parlerons des annonces textuelles utilisant CSS et certaines propriétés HTML. Ces annonces seront au format texte mais auront une certaine propriété d'animation pour attirer l'attention des visiteurs de votre blog.

Espace publicitaire CSS animé ou aperçu de la boîte

Code pour l'espace ou la boîte de publicité animée CSS

<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="https://www.techprevue.com">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>
</div>

Vous pouvez également afficher un espace publicitaire ou une boîte pour montrer aux annonceurs que vous êtes intéressé par une publicité sur votre blog. Dans ce cas, vous pouvez essayer ce code. En modifiant la hauteur et la largeur, vous pouvez créer une boîte de différentes tailles.

Espace ou boîte de publicité CSS statique

Code pour l'espace ou la boîte de publicité CSS statique

<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]yahoo.com</span></div>

Comme ces espaces ou boîtes publicitaires sont créés à l'aide de CSS pur, cette lumière est de taille afin de ne pas ralentir votre site/blog. J'espère que vous apprécierez ce post et qu'il vous sera utile.