----------------------------------------------------------------------------------------------------------------
RESPONSIVE GENERIC BLOGGER TEMPLATE CODE:
Read More:
https://css-tricks.com/the-perfect-fluid-width-layout/
https://btemplates.com/blogger-templates/responsive/
http://btemplates.com/2016/blogger-template-healthdaily/demo/

RESPONSIVE BLOGGER TEMPLATE - YouTube

----------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------
OR UPPER CODE IN MINIMIZE CODE:
https://www.youtube.com/watch?v=edLvIS-_GqQ
http://computermaster5089.blogspot.com/2018/03/how-to-create-websitewebpage-in-html.html
https://www.google.co.uk/search?q=create+a+responsive+website+using+html5+and+css3&rlz=1C1CHBD_en-GBGB813GB813&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiG6IrBr7bdAhUFbMAKHVKkCaMQ_AUICygC&biw=1280&bih=645#imgrc=HTYvlePPSbyZ0M:
---------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------

add slide show google blogger post images in blogger templates

How to Add an Image Slideshow to Blogger Posts in Your Template

Here's a comprehensive solution to automatically convert post images into a slideshow within your Blogger template:

Step 1: Add the CSS to Your Template

Add this CSS code to your template's <b:skin> section (before ]]></b:skin>):

xml

/* Post Image Slideshow Styles */

.post-slideshow {

  margin: 20px auto;

  max-width: 100%;

  position: relative;

}

.slideshow-container {

  position: relative;

  margin: auto;

}

.mySlide {

  display: none;

  text-align: center;

}

.mySlide img {

  max-width: 100%;

  height: auto;

  vertical-align: middle;

  border-radius: 5px;

}

.prev, .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -22px;

  color: white;

  font-weight: bold;

  font-size: 18px;

  transition: 0.3s;

  border-radius: 0 3px 3px 0;

  user-select: none;

  background-color: rgba(0,0,0,0.5);

}

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}

.prev:hover, .next:hover {

  background-color: rgba(0,0,0,0.8);

}

.slideshow-dots {

  text-align: center;

  padding: 10px;

}

.dot {

  cursor: pointer;

  height: 12px;

  width: 12px;

  margin: 0 4px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.3s;

}

.active, .dot:hover {

  background-color: #717171;

}

.fade {

  animation-name: fade;

  animation-duration: 1s;

}

@keyframes fade {

  from {opacity: .4}

  to {opacity: 1}

}

Step 2: Add the JavaScript Code

Add this JavaScript right before the closing </body> tag in your template:

xml

<script>

//<![CDATA[

// Initialize slideshow for post images

function initPostSlideshow() {

  // Only run on post pages

  if (document.querySelector('.post-body')) {

    var postBody = document.querySelector('.post-body');

    var images = postBody.querySelectorAll('img:not(.slideshow-exclude)');

   

    // Only create slideshow if there are multiple images

    if (images.length > 1) {

      // Create slideshow container

      var slideshowHTML = `

        <div class="post-slideshow">

          <div class="slideshow-container">

            ${Array.from(images).map((img, index) => `

              <div class="mySlide fade">

                ${img.outerHTML}

                <div class="slide-caption">${img.alt || ''}</div>

              </div>

            `).join('')}

            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

            <a class="next" onclick="plusSlides(1)">&#10095;</a>

          </div>

          <div class="slideshow-dots">

            ${Array.from(images).map((img, index) => `

              <span class="dot" onclick="currentSlide(${index + 1})"></span>

            `).join('')}

          </div>

        </div>`;

     

      // Insert slideshow after first image and remove all images

      images[0].insertAdjacentHTML('afterend', slideshowHTML);

      images.forEach(img => img.remove());

     

      // Initialize slideshow

      initSlideshow();

    }

  }

}

 

// Slideshow functions

function initSlideshow() {

  var slideIndex = 1;

  showSlides(slideIndex);

 

  window.plusSlides = function(n) {

    showSlides(slideIndex += n);

  }

 

  window.currentSlide = function(n) {

    showSlides(slideIndex = n);

  }

 

  function showSlides(n) {

    var i;

    var slides = document.getElementsByClassName("mySlide");

    var dots = document.getElementsByClassName("dot");

    if (n > slides.length) {slideIndex = 1}   

    if (n < 1) {slideIndex = slides.length}

    for (i = 0; i < slides.length; i++) {

        slides[i].style.display = "none"; 

    }

    for (i = 0; i < dots.length; i++) {

        dots[i].className = dots[i].className.replace(" active", "");

    }

    slides[slideIndex-1].style.display = "block"; 

    dots[slideIndex-1].className += " active";

  }

 

  // Auto-advance every 5 seconds (optional)

  var slideInterval = setInterval(function() {

    plusSlides(1);

  }, 5000);

 

  // Pause on hover

  var slideshow = document.querySelector('.post-slideshow');

  if (slideshow) {

    slideshow.addEventListener('mouseenter', function() {

      clearInterval(slideInterval);

    });

    slideshow.addEventListener('mouseleave', function() {

      slideInterval = setInterval(function() {

        plusSlides(1);

      }, 5000);

    });

  }

}

 

// Run when page loads

window.addEventListener('DOMContentLoaded', initPostSlideshow);

//]]>

</script>

Step 3: Add Optional Caption Style (Optional)

Add this to your CSS if you want captions for your slides:

css

.slide-caption {

  text-align: center;

  padding: 8px 0;

  color: #666;

  font-size: 14px;

  margin-top: 5px;

}

How It Works:

1.        Automatically detects all images within your post content

2.        Converts them into a responsive slideshow

3.        Preserves image alt text as captions (if available)

4.        Includes navigation arrows and dot indicators

5.        Auto-advances every 5 seconds (pauses when hovered)

6.        Uses smooth fade transitions between slides

Customization Options:

1.        To exclude specific images: Add class="slideshow-exclude" to any image you don't want in the slideshow

2.        Change transition speed: Modify the animation-duration in the .fade class

3.        Change auto-advance timing: Adjust the 5000 (5 seconds) value in the JavaScript

4.        Disable auto-advance: Remove the setInterval code block

This implementation will automatically convert all images in your blog posts into a beautiful slideshow, while maintaining all your existing template styles and responsiveness.