Stunning Image Post Slider For Blogger - JavaScript

Image Post Slider for blogger using javascript

One of the most amazing tutorials that I am going to share with you today is the stunning image post slider for Blogger or Blogspot users using HTML, CSS and JavaScript. After sharing tutorials like hamburger drop down menu and sidebar navigation menu I thought of playing with the code and came up with this amazing image post slider.

The best thing about this post slider is that it gives your users a glimpse of your post and with just single click it can take your users to the post directly. Apart from that, it uses an animated fade effect that makes it more dynamic. 

You can add this image post slider whether as your sidebar widget or publishing directly with your post. WordPress users can also use this slider so it's not specifically for Blogspot users.  Now let's first see a demo.



Add image post slider to Blogger:

For adding image post slider to Blogger blog, we will follow simple three steps. For styling we will use CSS , for functionality we will use Javascript and then obviously HTML for making the slider appear where we will want it to be. So let's start!

The CSS:

  • Go to Theme > Edit HTML
  • Search for ]]> </b:skin> tag
  • Just above it paste the following CSS code.
    
.tebslides {display: none}
.teb-slider{
  max-width: 1000px;
  position: relative;
  margin: auto;
border:5px solid #9b9b9b;
height:500px;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 8px;
  margin-top: -22px;
  color: #666;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
background:#fff;

}

.next {
  right: 10px;
}

.prev  {
left:10px;
}

.text {
text-decoration:none;
color: #666;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 45%;
  max-width: 100%;
  left:45%;
  text-align: center;
  border:1px solid #fff;
font-family:sans-serif;  
background:white;
font-weight:bold;
}

.text:hover{background:none;
color:#fff;}

.sqr {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: lightblue;
  display: inline-block;
  border-radius:20%;
  transition: background-color 0.6s ease;
}

.active, .sqr:hover {
  background-color: #33a2f7;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .5} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .5} 
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

 

The JavaScript:

  • Just above </body> tag paste the following JavaScript code.
<script type='text/javascript'>

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName(&quot;tebslides&quot;);
  var sqrs = document.getElementsByClassName(&quot;sqr&quot;);
  if (n &gt; slides.length) {slideIndex = 1;}    
  if (n &lt; 1) {slideIndex = slides.length;}
  for (i = 0; i &lt; slides.length; i++) {
      slides[i].style.display = &quot;none&quot;;  
  }
  for (i = 0; i &lt; sqrs.length; i++) {
      sqrs[i].className = sqrs[i].className.replace(&quot; active&quot;, &quot;&quot;);
  }
  slides[slideIndex-1].style.display = &quot;block&quot;;  
  sqrs[slideIndex-1].className += &quot; active&quot;;
}
</script>
 

  

The HTML: 

  • Paste the following HTML where you want the image slider to appear in your blog either in theme or in a gadget.
<!--TEBslider starts-->

<div class='teb-slider'>

<div class='tebslides fade'>
  <img src='image-url' style='width:100%; height:500px;'/>
  <a class='text' href='#'>READ MORE</a>
</div>

<div class='tebslides fade'>
  <img src='image-url' style='width:100%; height:500px;'/>
<a class='text' href='#'>READ MORE</a>
</div>

<div class='tebslides fade'>
  <img src='image-url' style='width:100%; height:500px;'/>
<a class='text' href='#'>READ MORE</a>
</div>

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

</div>
    <div style='margin-top:10px;'/>
<div style='text-align:center'>
  <span class='sqr' onclick='currentSlide(1)'/> 
  <span class='sqr' onclick='currentSlide(2)'/> 
  <span class='sqr' onclick='currentSlide(3)'/> 
</div>
<!--TEBslider ends-->  

 

 

Final Tweaks:

  • Replace image-url with your image url.
  • Replace hash sign # with your post url.
  • Save your template and you are done! 

No comments:

Powered by Blogger.