Cara Membuat Responsive Slider Widget Di Blogger

Sederhana tapi widget slider responsif mengagumkan untuk blogger yang saya akan menulis tutorial tentang dan berharap Anda akan menikmati dan menerapkannya ke blog Anda. Judul artikel ini adalah memperkenalkan tentang apa yang di sini saya akan berbagi tetapi jika Anda baru untuk blogging atau mendesain web dunia, Anda mungkin tidak tentang desain responsif. Jadi, sebelum kita pergi melalui tutorial mari saya jelaskan tentang apa yang widget slider responsif. Widget slider responsif adalah widget slider yang dapat beradaptasi itu ukuran resolusi layar perangkat. Ini akan terlihat sempurna pada perangkat apapun seperti Desktop, Smartphone, Tab dll

Cara Install Responsive Slider Widget Di Blogger:

1.Login Blogger > Tataletak > Tambakan Gandet
2.Pilih HTML/Javascript dari daftar.
3.Tempatkan kode berikut ke dalamnya.

<style type='text/css'>
.btnt-slider {  margin: 30px auto;  max-width: 850px;  padding: 0 20px;  }
.rslides {  list-style: none outside none;  margin: 0 auto;  max-height: 400px;  max-width: 800px;    overflow: hidden;  padding: 0;  position: relative;  width: 100%; }
.rslides li {  -webkit-backface-visibility: hidden;  position: absolute; border: 5px solid #555; display: none;  left: 0;  top: 0; margin: 0; padding: 0; list-style: none; }
.rslides img {  display: block;  height: auto;  float: left;  width: 100%;  border: 0; margin: 0; max-width: 100%; }
ul.rslides .rslides_nav {  height: 30px;  position: absolute;  text-indent: -99999px;  top: 45%;  width: 30px;  z-index: 9999;  display: none; }
ul.rslides:hover .rslides_nav {  display: block;  }
.prev {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKd2j8GWs3DrhjxOH0VrECY8QCYY140vEIHmVXLfeXTf2370oiA-cFnsW9wOJv6LCmEN6ixNX8UATTwI5skx2FUplhcVVcirDRIYpAD2iQT1stL1xuD8fsFt7G-mog2RHjDNG_FBvkqiA-/s1600/arrows.png") repeat scroll 0 0 transparent;  float: left;  left: 15px;  }
.next {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKd2j8GWs3DrhjxOH0VrECY8QCYY140vEIHmVXLfeXTf2370oiA-cFnsW9wOJv6LCmEN6ixNX8UATTwI5skx2FUplhcVVcirDRIYpAD2iQT1stL1xuD8fsFt7G-mog2RHjDNG_FBvkqiA-/s1600/arrows.png") repeat scroll right 0 transparent;  float: right; right: 15px;  }
</style>
<script type='text/javascript'>
/*<![CDATA[*/
  $(function() {
    $(".rslides").responsiveSlides({
      auto: true,
      speed: 500,
      timeout: 3000,
      nav: true,
      pause: true,
      prevText: "Previous",
      nextText: "Next",
      navContainer: "ul.rslides",
    });
  });
/*]]>*/</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='https://googledrive.com/host/0B-P4_Fs3S76yQ1RVNnl0bVlLMXM' type='text/javascript'></script>
<div class="btnt-slider">
<ul class="rslides">
<li><a href="http://ariezerblog.blogspot.com/"><img alt="" src="Gambar URL " /></a></li>
<li><a href="http://ariezerblog.blogspot.com/"><img alt="" src="Gambar URL" /></a></li>
<li><a href="http://ariezerblog.blogspot.com/"><img alt="" src="Gambar URL" /></a></li>
</ul>
</div>

Pemberitahuan

• Ganti http://ariezerblog.blogspot.com/ Dengan Blog Anda
• Ganti Gambar URL Dengan Gambar URL Anda