Cara Membuat Slide Show Otomatis di Blogger Keren Responsive

Cara Membuat Slide Show Otomatis di Blogger Keren Responsive

Cara Membuat Slide Show Otomatis di Blogger Keren Responsive

Kreatifitas seorang blogger dapat dilihat dari cara dia menghias blognya, tampilan blog yang menarik akan lebih membuat nyaman pengunjungnya. Salah satu cara membuat tampilan blog agar lebih menarik yaitu dengan cara membuat slide show otomatis di blogger kalian. Blog kalian akan terlihat lebih cantik setelah adanya slide show tersebut. Cara Membuat Slide Show Otomatis di Blogger caranya cukup mudah hanya dengan mengedit template blog kalian. Ada dua cara untuk menampilkan artikel di bagian slide show, ada cara otomatis dan cara manual. Kali ini saya akan membagikan Cara Membuat Slide Show Otomatis di Blogger Keren Responsive jadi lebih mudah tanpa harus memasukkan kode artikel kalian satu per satu.


Langsung saja ke cara membuat slider otomatis di blogger.

Caranya yaitu :

1. Masuk ke blog

  • Pilih Tema
  • Edit HTML
Cara Membuat Slide Show Otomatis di Blogger Keren Responsive
  • Cari kode ]]></b:skin> agar lebih mudah gunakan fitur pencarian dengan cara menekan Ctrl+F kemudian pastekan kode ]]></b:skin>
  • Jika sudah ketemu kode ]]></b:skin> maka copy kemudian pastekan kode dibawah ini diatas kode ]]></b:skin>
/* slide otomatis */

.s3slider {  margin:0 auto 10px;  border:3px solid black;  background:#333 none no-repeat 50% 50%;  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);  box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);  position:relative;  overflow:hidden;}.s3slider.loading {  background-image:url(' ');  text-indent:-9999px;}.s3slider-content,.s3slider-content li {  position:absolute;  top:0;  right:0;  bottom:0;  left:0;  margin:0;  padding:0;  list-style:none;  overflow:hidden;}.s3slider-content li {  position:static;  display:none;}.s3slider-content img {  display:block;  width:100%;  height:100%;  max-width:none;  max-height:none;  border:none;  outline:none;  padding:0;  margin:0;}.s3slider-caption {  position:absolute;  right:0;  bottom:0;  left:0;  height:auto;  font:normal normal 13px/normal Helmet,Freesans,Sans-Serif;  color:white;  background-color:black;  opacity:.8;  filter:alpha(opacity=80);  padding:17px 20px 20px;  display:none;}.s3slider-title,.s3slider-meta {display:block}.s3slider-title a {  font-size:110%;  font-weight:bold;  color:white;  text-decoration:none;}.s3slider-title a:focus,.s3slider-title a:hover {text-decoration:underline}.s3slider-meta-comment:before {content:" - "}
  • Kemudian save

2. Buka Tata Letak
  • pilih Tambahkan Gadget
  • Pilih HTML/JavaScript
Cara Membuat Slide Show Otomatis di Blogger Keren Responsive

<div id="s3slider-container">  <div class="s3slider loading" style="width:650px;height:280px;">    Memuat...  </div></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>var s3slider_config = {    url: 'https://cekbae.com/',    numPost: 6,    labelName: null,    monthArray: [        "Januari",        "Februari",        "Maret",        "April",        "Mei",        "Juni",        "Juli",        "Agustus",        "September",        "Oktober",        "November",        "Desember"    ],    noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',    newTabLink: false,    containerId: 's3slider-container',    slider: {        width: 650,        height: 280,        timeOut: 5000    }};</script><script src="https://cdn.rawgit.com/dedypokoke71/dedy/master/dedylinux-slider.js"></script>
sumber script dedy-linux.blogspot.com
  • Lalu save
Keterangan:
  • Warna kuning width:650px;height:280px ukuran slider anda 
  • Warna biru https://cekbae.com/ ganti dengan Alamat blog anda 
  • Warna hijau 5000 waktu slider
Sekian tutorial Cara Membuat Slide Show Otomatis di Blogger Keren Responsive, semoga blog kalian jadi memiliki tampilan yang lebih cantik.

2 Responses to "Cara Membuat Slide Show Otomatis di Blogger Keren Responsive"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel