🎯 Ad Banner Code Snippets

Complete collection of HTML/CSS ad banner templates with instructions

📋 Quick Navigation

⚠️ IMPORTANT ABOUT AUTOPLAY: Modern browsers (Chrome, Safari, Firefox) BLOCK autoplay with sound. All video banners MUST include the muted attribute to autoplay properly. The code below already includes this.

🎬 Live Demos

Below are working examples of each banner type. These are actual, functioning banners - not just code!

Option 1 Simple Clickable Image Banner
<a href="https://your-ad-link.com" target="_blank" rel="nofollow">
  <img src="https://your-image-url.com/banner.jpg" alt="Advertisement" style="width:100%; max-width:728px; height:auto; border-radius:8px; display:block; margin:0 auto;" />
</a>
Option 2 Custom HTML5 Banner with Background Image
<style>
  .custom-ad-banner {
    width: 100%;
    max-width: 728px;
    height: 120px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
  .custom-ad-banner a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .custom-ad-banner .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://your-background-image.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
  }
  .custom-ad-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 2;
  }
  .custom-ad-banner .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    color: white;
    font-family: 'Poppins', sans-serif;
  }
  .custom-ad-banner .text {
    text-align: center;
  }
  .custom-ad-banner .text h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
  }
  .custom-ad-banner .text p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #ddd;
  }
  .custom-ad-banner .cta-button {
    background-color: #EA4C89;
    color: white;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    margin-left: 30px;
    transition: all 0.3s;
  }
  .custom-ad-banner .cta-button:hover {
    background-color: #c1356e;
    transform: scale(1.05);
  }
  @media (max-width: 600px) {
    .custom-ad-banner {
      height: auto;
      padding: 20px 15px;
    }
    .custom-ad-banner .content {
      flex-direction: column;
      text-align: center;
    }
    .custom-ad-banner .cta-button {
      margin-left: 0;
      margin-top: 15px;
    }
  }
</style>

<div class="custom-ad-banner">
  <a href="https://your-ad-link.com" target="_blank" rel="nofollow">
    <div class="background"></div>
    <div class="overlay"></div>
    <div class="content">
      <div class="text">
        <h3>Premium Streaming</h3>
        <p>Watch ad-free with our premium plan</p>
      </div>
      <div class="cta-button">Learn More →</div>
    </div>
  </a>
</div>
Option 3 Video Background Banner (With Autoplay)

✓ This banner uses a sample video that autoplays automatically (muted)

<style>
  .video-ad-banner {
    width: 100%;
    max-width: 728px;
    height: 180px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  }
  .video-ad-banner a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
  }
  .video-ad-banner video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .video-ad-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(90,46,152,0.9) 0%, rgba(234,76,137,0.8) 100%);
    z-index: 2;
  }
  .video-ad-banner .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    z-index: 3;
    color: white;
    box-sizing: border-box;
  }
  .video-ad-banner .text h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.9;
  }
  .video-ad-banner .text h3 {
    margin: 5px 0 0;
    font-size: 28px;
    font-weight: 700;
  }
  .video-ad-banner .button {
    background-color: white;
    color: #5a2e98;
    padding: 12px 30px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }
  .video-ad-banner .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
  }
  @media (max-width: 600px) {
    .video-ad-banner {
      height: 150px;
    }
    .video-ad-banner .content {
      flex-direction: column;
      justify-content: center;
      text-align: center;
      padding: 15px;
    }
    .video-ad-banner .button {
      margin-top: 10px;
      padding: 8px 20px;
      font-size: 14px;
    }
    .video-ad-banner .text h3 {
      font-size: 20px;
    }
  }
</style>

<div class="video-ad-banner">
  <a href="https://your-ad-link.com" target="_blank" rel="nofollow">
    <!-- 
      AUTOPLAY REQUIREMENTS:
      - autoplay: starts playing automatically
      - muted: REQUIRED for autoplay in Chrome/Safari/Firefox
      - loop: repeats continuously
      - playsinline: required for iOS autoplay
    -->
    <video autoplay muted loop playsinline>
      <source src="https://your-video-url.com/background.mp4" type="video/mp4">
      <!-- Fallback image if video doesn't load -->
      <div class="background" style="background-image: url('https://your-fallback-image.jpg');"></div>
    </video>
    <div class="overlay"></div>
    <div class="content">
      <div class="text">
        <h4>SPONSORED</h4>
        <h3>Premium Membership</h3>
      </div>
      <div class="button">Get 50% OFF</div>
    </div>
  </a>
</div>

<!-- Fallback JavaScript for additional autoplay support -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var videos = document.querySelectorAll('.video-ad-banner video');
    videos.forEach(function(video) {
      var playPromise = video.play();
      if (playPromise !== undefined) {
        playPromise.catch(function(error) {
          console.log("Autoplay was prevented, but video is muted so this is fine");
        });
      }
    });
  });
</script>

🎥 Sample Video URLs for Testing

Use these video URLs to test the video banner before uploading your own:

https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4 - ✓ Works great for testing
https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4 - ✓ 1MB sample video
https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 - ✓ Big Buck Bunny (classic test video)

📦 Complete Blogger Widget Code

Replace your existing Text1 widget with this code (Option 3 - Video Banner):

<b:widget cond='data:view.isHomepage' id='Text1' locked='false' title='Advertisement' type='HTML' version='2' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='content'><![CDATA[
<style>
  .video-ad-banner {
    width: 100%;
    max-width: 728px;
    height: 180px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  }
  .video-ad-banner a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
  }
  .video-ad-banner video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .video-ad-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(90,46,152,0.9) 0%, rgba(234,76,137,0.8) 100%);
    z-index: 2;
  }
  .video-ad-banner .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    z-index: 3;
    color: white;
    box-sizing: border-box;
  }
  .video-ad-banner .text h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.9;
  }
  .video-ad-banner .text h3 {
    margin: 5px 0 0;
    font-size: 28px;
    font-weight: 700;
  }
  .video-ad-banner .button {
    background-color: white;
    color: #5a2e98;
    padding: 12px 30px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }
  .video-ad-banner .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
  }
  @media (max-width: 600px) {
    .video-ad-banner {
      height: 150px;
    }
    .video-ad-banner .content {
      flex-direction: column;
      justify-content: center;
      text-align: center;
      padding: 15px;
    }
    .video-ad-banner .button {
      margin-top: 10px;
      padding: 8px 20px;
      font-size: 14px;
    }
    .video-ad-banner .text h3 {
      font-size: 20px;
    }
  }
</style>

<div class="video-ad-banner">
  <a href="https://your-ad-link.com" target="_blank" rel="nofollow">
    <video autoplay muted loop playsinline>
      <source src="https://your-video-url.com/background.mp4" type="video/mp4">
    </video>
    <div class="overlay"></div>
    <div class="content">
      <div class="text">
        <h4>SPONSORED</h4>
        <h3>Premium Membership</h3>
      </div>
      <div class="button">Get 50% OFF</div>
    </div>
  </a>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var videos = document.querySelectorAll('.video-ad-banner video');
    videos.forEach(function(video) {
      var playPromise = video.play();
      if (playPromise !== undefined) {
        playPromise.catch(function(error) {
          console.log("Autoplay was prevented");
        });
      }
    });
  });
</script>
    ]]></b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <div class='widget-content'>
      <data:content/>
    </div>
  </b:includable>
</b:widget>

📝 Detailed Implementation Instructions

How to Find and Replace Your Widget:

  1. Open your Blogger template editor (Theme → Edit HTML)
  2. Press Ctrl+F (or Cmd+F on Mac) to open search
  3. Search for: id='Text1' - This will take you directly to the widget
  4. Delete everything from <b:widget cond='data:view.isHomepage' id='Text1' to the closing </b:widget>
  5. Copy one of the complete widget codes above and paste it in the same location
  6. Update the placeholder URLs with your own content
  7. Click "Save Theme" and view your blog to see the new banner

URLs You Need to Replace:

Placeholder What to Replace With
https://your-ad-link.com Your destination URL (where you want people to go when they click)
https://your-image-url.com/banner.jpg URL of your banner image (for Option 1)
https://your-background-image.jpg URL of your background image (for Option 2)
https://your-video-url.com/background.mp4 URL of your video file (for Option 3)
https://your-fallback-image.jpg Fallback image if video doesn't load (for Option 3)

Video Hosting Options:

  • Upload to your own server - Best control, but requires hosting space
  • Use a CDN - Cloudinary, Imgix, etc. (often have free tiers)
  • Google Cloud Storage - Reliable, pay-as-you-go
  • Amazon S3 - Industry standard, pay-as-you-go
  • Cloudflare Stream - Optimized for video streaming

Video Optimization Tips:

  • Keep it short - 5-15 seconds is ideal for background videos
  • Compress the file - Aim for under 2-3MB
  • Use H.264 codec - Best browser compatibility
  • Resolution - 720p or 1080p is fine for banners
  • Tools - HandBrake, FFmpeg, or online compressors

❓ Frequently Asked Questions About Autoplay

Q: Why isn't my video autoplaying?

A: Check these common issues:

  • Missing "muted" attribute - All modern browsers require muted videos to autoplay
  • Browser settings - Some users disable autoplay entirely in their browser settings
  • Data saver mode - Some mobile browsers block autoplay when data saver is on
  • Video format - Make sure your video is in MP4 format with H.264 encoding

Q: Can I autoplay videos with sound?

A: No, not reliably. Modern browsers only allow autoplay with sound if the user has interacted with the site first (clicked somewhere) or has added the site to exceptions. For banners, always use muted videos.

Q: Will this work on mobile devices?

A: Yes! The code includes playsinline attribute which is required for iOS devices. Most mobile browsers support muted autoplay.

Q: How do I create a good background video?

A: Use subtle, slow-moving content that doesn't distract from your message. Abstract patterns, gentle motion, or ambient footage work best. Avoid fast cuts or text-heavy video.

🔧 Troubleshooting

Problem Solution
Banner not showing at all Check that the widget is set to visible='true' and you're on the homepage
Video not playing Verify the video URL is accessible, check browser console for errors
Video plays but no overlay/colors Check that the overlay div is present and has a background color/gradient
Banner not clickable Ensure the <a> tag wraps all content properly and has href attribute
Layout broken on mobile The code includes responsive CSS, but you may need to adjust heights/padding

✅ You're All Set!

Choose the banner style you like best, copy the code, and paste it into your Blogger template. Remember to replace all placeholder URLs with your own content!

Need help? The demo banners above are fully functional - click them to test!