How To Make Simple Responsive Slider For Blogger

How To Make Simple Responsive Slider For Blogger. Until now, the slider is still a web element that is still widely used to display content in the primary or the latest contents of a web. There are many types of sliders design. It makes the webmaster to choose smart slider in order to be a burden loading blog but can match the look website or blog. This time I will be sharing a simple slider and has been responsive made ​​using CSS and Javascript that will not burden the loading blog. This one is better than slider that using Jquery. This is awesome widget for you, however your blog post and share about news. It will look like professional website. If you agree with my statement, please add it on your blog and follow this tutorial below.

DEMO
To try responsive design, please resize your browser to get it. How about it, want to try? Please follow the tutorial below. The first step, use the codes below to get responsive view. You should add CSS below above ]]></b:skin> or </style>.

 @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')
}

#slide {
  height: auto;
}

#pager {
  width: auto;
  margin: 0px auto;
  text-align: center;
}

#pager > span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 24px 5px 30px;
  background: rgba(0, 0, 0, .2);
  text-align: center;
  border-radius: 100%;
  font-size: 17px;
  text-decoration: none;
  transition: background 0.3s linear 0s;
  cursor: pointer;
}

#slidecontent {
  margin: 0px auto;
  transition: opacity 0.3s linear 0s;
  color: #AAA;
  background: #ffffff;
  border: solid 1px #dedede;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  min-height:350px;
}

.slidepanel {
  width: 30%;
  padding: 30px;
  float: left;
  -moz-box-sizing: border-box;
  word-wrap: break-word;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: left;
}

.slidepanel > h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2em;
  color: #333;
  margin: 0 auto 10px;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  text-transform:capitalize;
}

.slidepanel > p,.slidepanel > span {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  color: #777;
  margin:0!important;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.slidepanel a {
  color: #333;
  text-decoration: none;
  font-weight: 700;
}

.slidepanel a:hover {
  color: #000;
}

.slideimage {
  width: 70%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

.slideimage img {
  width: 100%;
  height: 100%
}

.clear {
  clear: both
}
@media screen and (max-width:880px){
.slidepanel {
  width: 100%;
  float: none;
}
.slideimage {
  width: 100%;
  height: auto;
  position: relative;
}
.slideimage img {
  height: auto;
}
.center{
  width: 100%;
}
}

This part should be put in appropriate place to get best result. Script HTML below can be added at your Blogger layout or on your HTML Template.

 <div id="slide">
  <div id="slidecontent">
      <div class="slideimage"><img alt="Lorem ipsum dolor sit amet" height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci mi, in pharetra ligula. Nulla facilisi. Nulla facilisi.</p></div><div class="clear"></div>
    <script>
      //<![CDATA[
      var bca = [
        '<div class="slideimage"><img alt="Lorem ipsum dolor sit amet" height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci mi, in pharetra ligula. Nulla facilisi. Nulla facilisi.</p></div><div class="clear"></div>',
        '<div class="slideimage"><img alt="Mauris convallis venenatis massa" height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Mauris convallis venenatis massa">Mauris convallis venenatis massa</a></h2><p>Mauris convallis venenatis massa, quis <a href="#">consectetur</a> felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui.</p></div><div class="clear"></div>',
        '<div class="slideimage"><img alt="Proin nec orci et elit" height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Proin nec orci et elit">Proin nec orci et elit</a></h2><p>Proin nec orci et elit semper ultrices. <a href="#" target="_blank">Cum sociis natoque</a> penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div><div class="clear"></div>',
        '<div class="slideimage"><img alt="Sed quis urna mi, ac dignissim mauris." height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Sed quis urna mi, ac dignissim mauris.">Sed quis urna mi, ac dignissim mauris.</a></h2><span>Sed quis urna mi, ac dignissim mauris. <a href="#">Quisque mollis ornare mauris</a>.<br>Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere</span></div><div class="clear"></div>'
      ];
      //]]>
    </script>
  </div>
  <div id="pager">
    <span onClick="pager(0); clearInterval(intrvl);" style="background:rgba(0,0,0,.7);"></span>
    <span onClick="pager(1); clearInterval(intrvl);"></span>
    <span onClick="pager(2); clearInterval(intrvl);"></span>
    <span onClick="pager(3); clearInterval(intrvl);"></span>
  </div>
</div>

Note : Look the codes were marking ! It must be the same for the first appearance before the javascript running. The number of pager adjust to the amount of content. For the content please adjust the content you want to display.

It is important one, you have to save the javascript below to make this slider work. Save the javascript code below the above code </body>.

 <script>
//<![CDATA[
  function _(x) {
    return document.getElementById(x);
  }
  var ba, bi = 0,
    intrvl;
  function pager(bi) {
    _("slidecontent").style.opacity = 0;
    for (var i = 0; i < ba.length; i++) {
      ba[i].style.background = "rgba(0,0,0,.2)";
    }
    ba[bi].style.background = "rgba(0,0,0,.7)";
    setTimeout(function() {
      _("slidecontent").innerHTML = bca[bi];
      _("slidecontent").style.opacity = 1;
    }, 300);
  }

  function bubbleSlide() {
    bi++;
    if (bi == ba.length) {
      bi = 0;
    }
    pager(bi);
  }
  window.addEventListener("load", function() {
    ba = _("pager").children;
    intrvl = setInterval(bubbleSlide, 7000);
  });
  //]]>
</script>

That's enough for explanation tutorial How To Make Simple Responsive Slider For Blogger. If you get problem in applying this Slider, I am here for guiding you.

Advertisement