Cara Membuat Slider Widget Responsive 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

Pemberitahuan :
URL BLOG : http://www.naufalardhani.ml/ ganti Dengan Url Blog Sobat
Gambar URL : Isi dengan Gambar Url Sobat

Cara Install Responsive Slider Widget Di Blogger:

Login Blogger > TATA LETAK > TAMBAHKAN GADGET
Pilih HTML/JAVASCRIPT Dari Daftar pilihan
Masukan 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/AVvXsEhlYDybbMpab_THOalihnS9j-3Ngq0DzwTSpoaMY3SmNfQ7gQREXUlmD9HOKZ3vJlXdz_W31VZFd2o4eebkBZR1dl3ZBlLtdh8e2upQXpU_aYPWiw-Gzk4oj1wRn5PWrX5RLtMfVDv2SrwR/s1600/arrows.png") repeat scroll 0 0 transparent;  float: left;  left: 15px;  }
.next {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlYDybbMpab_THOalihnS9j-3Ngq0DzwTSpoaMY3SmNfQ7gQREXUlmD9HOKZ3vJlXdz_W31VZFd2o4eebkBZR1dl3ZBlLtdh8e2upQXpU_aYPWiw-Gzk4oj1wRn5PWrX5RLtMfVDv2SrwR/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://www.naufalardhani.ml/"><img alt="" src="Gambar URL " /></a></li>
<li><a href="http://www.naufalardhani.ml/"><img alt="" src="Gambar URL" /></a></li>
<li><a href="http://www.naufalardhani.ml/"><img alt="" src="Gambar URL" /></a></li>
</ul>
</div>