Edit Image and Hero section Button
On the main page, this template uses a hero header. You can delete it or change the appearance as you wish.
Here are some steps to edit the hero section of the template header
Steps customization
- On the blogger dasbhoard
- Open the Blogger HTML editor
- Look for the following code <div class='header-hero ...'>
- You will see the complete code like this
<!--[ Hero Header ]-->
<div class='header-hero col-xxl-auto px-5 py-4 text-bg-dark'>
<div class='container'>
<div class='row flex-lg-row-reverse align-items-center g-5 py-4'>
<div class='col-10 col-sm-8 col-lg-6 d-none d-lg-block'>
<img alt='Bootstrap Themes' class='d-block mx-lg-auto img-fluid' height='200' loading='lazy' src='https://cdn.inputekno.com/tbloggerstrap/assets/img/hero.svg' width='400'/>
</div>
<div class='col-lg-6'>
<h1 class='display-6 fw-bold text-body-dark lh-1 mb-3'>Blogger Bootstrap</h1>
<p class='lead'>The free blogger template uses the latest version of Bootstrap 5.3</p>
<div class='d-grid gap-2 d-md-flex justify-content-md-start'>
<a class='btn btn-primary px-4 me-md-2' href='/search' type='button'>Blog</a>
<a class='btn btn-outline-secondary px-4' href='/p/newsletter.html' type='button'>Join Newsletter</a>
</div>
</div>
</div>
</div>
</div>
Information:
- Change the src='#' attribute with your image url
- Replace the header words/sentences as desired.
- Change the href='#' attribute with the destination url
Please delete the code if you don't want to use it. Or you can add a comment to disable it.
Commentaires
Enregistrer un commentaire