Membuat Slide Show di Blog

Kali ini saya akan berbagi tentang cara Membuat Slide Show di Blog dengan beberapa photo favorite sobat. Membuat Slide Show di Blog di blog cukup mudah, kita tidak perlu menotak atik HTML Template. Melalui tutorial ini sobat bisa menampilkan gambar favorit dengan style slide show.


1. Login ke akun Blogger sobat.

2. Pada halaman dashboard, masuklah lah ke bagian Tata Letak.

3. Klik Tambahkan gadget di posisi widget Slide Show di Blog ini ingin dipasang.

4. Pilih HTML/Javascript, dan masukan kode berikut

<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/AVvXsEhFC3sNSujcXCHv4jyB-EH408lrWKsFuR1JQScKQ8tZuvCjhH8s-sgSVdVSqe1WX_P1BGWrXjZ2AWuVG1q6UdRzMhZkYEBPrLUSiwHCb2Mjzc1MwRckpAbKectW_d_AO6uoFuhuV4qZw0OI/s1600/arrows.png") repeat scroll 0 0 transparent;  float: left;  left: 15px;  }
.next {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFC3sNSujcXCHv4jyB-EH408lrWKsFuR1JQScKQ8tZuvCjhH8s-sgSVdVSqe1WX_P1BGWrXjZ2AWuVG1q6UdRzMhZkYEBPrLUSiwHCb2Mjzc1MwRckpAbKectW_d_AO6uoFuhuV4qZw0OI/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://Masdabang.blogspot.com/"><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://Masdabang.blogspot.com/"><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://Masdabang.blogspot.com/"><img alt="" src="http://img-url.com/" /></a></li>
</ul>
</div>

Keterangan : Silahkan ganti tulisan berwarna merah dengan nama blog sobat dan warna biru dengan URL gambar sobat.

Klik simpan dan selesai.

Sekarang slide show telah tampil di blog sobat. Demikianlah tutorial cara Membuat Slide Show di Blog.