Design Google AdSense like ads using HTML and CSS

0
67

Google AdSense is a comprehensive advertising program developed by Google that enables website owners to monetize their online content by displaying ads. When a website owner signs up for AdSense, they receive a code to integrate into their website. This code allows Google to serve ads that are relevant to the site’s content and audience, optimizing the chances that visitors will engage with these ads. The process is largely automated, making it easy for even those with limited technical expertise to use.

Follow this video for complete guidance :

AdSense supports a variety of ad formats to cater to different website layouts and user experiences. These include text ads, display ads, rich media ads, and more. Text ads typically consist of a headline, a short description, and a link, while display ads can include images, videos, or interactive elements. This diversity allows website owners to choose ad types that best complement their content and design, ensuring that ads are not intrusive but blend seamlessly with the site’s look and feel.

Revenue generation through AdSense primarily operates on two models: Cost-Per-Click (CPC) and Cost-Per-Thousand Impressions (CPM). In the CPC model, the website owner earns money each time a visitor clicks on an ad. Conversely, the CPM model generates revenue based on the number of times an ad is viewed, regardless of clicks. This dual approach allows website owners to benefit from both high traffic and high engagement, maximizing their earning potential.

Google AdSense also provides detailed performance reports, which offer insights into how ads are performing. These reports include metrics such as the number of impressions, clicks, and the revenue generated, allowing website owners to make informed decisions about ad placements and strategies. This data-driven approach enables continuous optimization, helping to enhance the effectiveness of ads over time.

ALSO READ  Text to Speech Converter using JavaScript

The following source code creates a Google AdSense like ads using HTML and CSS :

<style type="text/css">
      .new-sponsored{
        background:#fff;
        margin-bottom:30px;
        margin-left:0;
        margin-right:0;
        border:1px solid #ddd;
      }
      .new-sponsored-image{
        border-right:1px solid #ddd; 
        overflow:hidden; 
        padding:0;
      }
      .new-sponsored-image img{
        width:100%; 
        height:100%; 
        object-fit:cover;
      }
      .new-sponsored-content{
        border-left:0px;
        display:flex;
        flex-direction: column;
        flex:10 0 0; 
        height:auto;
        padding:0;
      }
      .new-sponsored-content strong{
        font-size:30px;
        font-family:revert;
        color:#333;
        margin-bottom: 20px;
        display: block;
      }
      .new-sponsored-content p{
        font-size:18px;
        color:rgba(0,0,0,0.5);
        font-family:revert;
      }
      .sponsored-footer{
        font-size:18px;
        height:70px;
        padding:0px 20px;
        display:flex;
        align-items: center;
        justify-content: space-between;
      }
      .new-sponsored-content a{
        text-decoration: none;
        color:#666;
      }
      .sponsored-footer a{
        color:#666;
      }
    </style>
    <div class="new-sponsored row">
      <div class="col-md-6 new-sponsored-image">
        <a href="">
          <img src="graph.jpeg">
        </a>
      </div>
      <div class="col-md-6 new-sponsored-content">
        <div style="padding:0 25px;">
          <div style="height:30px;"></div>
          <a href="">
            <strong>Sales Conversations Start Here</strong>
          </a>
          <p>
            <a href="">
              From casual chats to converting customers – Manychat's DM tools make it possible.
            </a>
          </p>
        </div>
        <div style="background-color: #e9e9e9;height:1.3px; margin-top:auto;"></div>
        <div class="sponsored-footer">
          <span>
            <a href="">Sponsor Name</a>
          </span>
          <span>
            <a href="">Call To Action</a>
          </span>
        </div>
      </div>
    </div>

 

 

Comments are closed.