Slide Responsive

Kholil Khoirul Muluk, S.H.I. 》

Bagikan melalui WhatsApp
semoga menjadi ilmu yang bermanfaat untuk orang banyak.

Baca Juga

Sederhana tapi widget slider responsifmengagumkan untuk blogger yang saya akanmenulis tutorial tentang dan berharap Anda akanmenikmati dan menerapkannya ke blog Anda. Judulartikel 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 yangdapat beradaptasi itu ukuran resolusi layarperangkat. 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/AVvXsEghFFKETQijwZWvKGQx0fIlvbXqS-qVCZIPuQzuaO-KVzuORJbq7-hyBFDVnM7FfLgR_d1uQyNsw6pBsEluEAOP33GGMr78J6AlYYKOZ5wzGfUAG3tjna4FSqjm86s8MZwPZEkk3Nh8nnLh/s1600/arrows.png") repeat scroll 0 0 transparent;  float: left;  left: 15px;  }
.next {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghFFKETQijwZWvKGQx0fIlvbXqS-qVCZIPuQzuaO-KVzuORJbq7-hyBFDVnM7FfLgR_d1uQyNsw6pBsEluEAOP33GGMr78J6AlYYKOZ5wzGfUAG3tjna4FSqjm86s8MZwPZEkk3Nh8nnLh/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

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

Bagikan : Facebook | Twitter | WhatsApp

Daftar Isi | Beranda Utama

facebook

twitter

Tweet

google+

linkedin

Kholil Khoirul Muluk, S.H.I.
Alumni Universitas Islam Negeri Lampung.