How to replace demo ad content in the post?

• First, go to your Blogger dashboard
• Then click on the Theme option

• Then click on the drop-down icon near Customize option

• Then click on the Edit HTML option

• Then find the following code

<!--[ Post top ad ]-->

How to implement AdSense without speed loss?

Method 01

• Go to your Blogger dashboard
• Then click on Earning section

• Then click on Connect button

Method 02 (On scroll lazyload)

• Click on the Theme option

• Then click on the drop-down icon near Customize option

• Then click on Edit HTML

Find

<!--<script>/*<![CDATA[*/ var lazyadsense = false; window.addEventListener('scroll', function(){if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) { (function() { var ad = document.createElement('script'); ad.setAttribute('crossorigin','anonymous'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyadsense = true; }}, true); /*]]>*/</script>-->

Replace

<script>/*<![CDATA[*/ var lazyadsense = false; window.addEventListener('scroll', function(){if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) { (function() { var ad = document.createElement('script'); ad.setAttribute('crossorigin','anonymous'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyadsense = true; }}, true); /*]]>*/</script>

Sunflower

Post Malone and Swae Lee

remove add

repeat favorite volume_up

00:0000:00 play_arrow

<div align="center">
<div class="player-STLH">
        <div class="cover-PS">
            <img alt="Song Poster" src="add_image_here" title="title_here">
        </div>
        <div class="info-MS">
            <div class="title-MS">song_title_here</div>
            <div class="singer-MS">creator_name_here</div>
        </div>
        <div class="volume-box">
            <span class="volume-down"><i class="material-icons">remove</i></span>
            <input type="range" class="volume-range" step="1" value="80" min="0" max="100"
                oninput="music.volume = this.value/100">
            <span class="volume-up"><i class="material-icons">add</i></span>
        </div>
        <div class="btn-box">
            <i class="material-icons repeat" onclick="handleRepeat()">repeat</i>
            <i class="material-icons favorite active" onclick="handleFavorite()">favorite</i>
            <i class="material-icons volume" onclick="handleVolume()">volume_up</i>
        </div>
        
  <div class="music-box">
            <input type="range" step="1" class="seekbar" value="0" min="0" max="100" oninput="handleSeekBar()">

            <audio class="music-element">
                <source src="song_src_here">
            </audio>
            <span class="current-time">00:00</span><span class="duration">00:00</span>
            <span class="play" onclick="handlePlay()">
                <i class="material-icons">play_arrow</i>
            </span>
        </div>
    </div>
</div>

Don't forget to replace hilighted parts

Hiding images

class='hidden'

Responsive image

<img src="..." class="img-fluid" alt="Responsive image">

Image thumbnails

<img src="..." class="img-thumbnail" alt="...">

Aligning images

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

Picture

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Display headings

Display 1

Display 2

Display 3

Display 4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Inline text element

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Blockquotes

A well-known quote, contained in a blockquote element.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Name source

A well-known quote, contained in a blockquote element.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Buttons

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Table

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Alerts

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>

Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Image slider

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Embed YouTube

<div class="embed-responsive embed-responsive-16by9 lazyload">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/video-id?rel=0" allowfullscreen></iframe>
</div>

Syntax highlight

<p>An example code</p>

<pre><code>your_code_goes_here</code></pre>

Post break

<hr/>