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 ...

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.
Tutorial Blogger

Membuat Slide Show di Blog

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("http://3.bp.blogspot.com/-2R8tmOI8om8/U3HrZJmrzPI/AAAAAAAAC_U/-ye9JkB8uQg/s1600/arrows.png") repeat scroll 0 0 transparent;  float: left;  left: 15px;  }
.next {  background: url("http://3.bp.blogspot.com/-2R8tmOI8om8/U3HrZJmrzPI/AAAAAAAAC_U/-ye9JkB8uQg/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.

COMMENTS

BLOGGER: 2
Loading...
Name

Aceh,23,Adsense,8,BBM,3,Biography,1,Bitcoin,4,Blog,21,Blogger,12,Blogging,55,Business,14,Cerita,3,CPNS,1,Delicious,1,Design,1,DeviantART,1,Digg,1,Dollar,3,Dunia,13,Facebook,5,Flickr,1,Friendster,1,Gambar,2,Game,36,Gmail,1,Google+,4,Hosting,1,Inspirasi,2,Instagram,1,Internet,13,Interview,11,Kesehatan,2,LinkedIn,1,Makalah,7,Marketing,12,Meme,8,Money,3,Motivasi,2,MySpace,1,Outlook,1,Path,1,Pendidikan,10,Pengetahuan,4,Pinterest,1,Plugin,5,PNS,1,Reddit,1,Review,4,Seo,53,Smartphone,5,Social Media,38,Sukses,3,Sumatera Barat,16,Sumatera Utara,3,Templates,1,Tips,6,Toko Online,3,Top10,18,Tumblr,1,Tutorial,29,Tutorial Blog,146,Twitter,3,Umum,9,Vimeo,1,VK,1,Weebly,1,WhatsApp,1,Widget,55,Wisata,4,WordPress,14,Yahoo,1,Youtube,3,
ltr
item
Blog iTapuih.com: Membuat Slide Show di Blog
Membuat Slide Show di Blog
https://3.bp.blogspot.com/-h4M77GJiosI/Wkp7zVjU8ZI/AAAAAAAANjM/ZrNDyFwtXr4gk21SO8XPi54ICKiywmA0QCLcBGAs/s1600/Widget-Okay.png
https://3.bp.blogspot.com/-h4M77GJiosI/Wkp7zVjU8ZI/AAAAAAAANjM/ZrNDyFwtXr4gk21SO8XPi54ICKiywmA0QCLcBGAs/s72-c/Widget-Okay.png
Blog iTapuih.com
https://blog.itapuih.com/2015/02/membuat-slide-show-di-blog.html
https://blog.itapuih.com/
https://blog.itapuih.com/
https://blog.itapuih.com/2015/02/membuat-slide-show-di-blog.html
true
2732475762120586724
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy