Cara membuat slider otomatis di Blog

Cara membuat slider otomatis di Blogspot. Ok sobat, Seocips berikut ini akan membagikan tentang bagaimana cara membuat dan memasang Slider otomatis sederhana ini di Blog Blogger. Salah satu cara untuk mempercantik tampilan blog/web adalah dengan memasang slider, lebih bermanfaat lagi jika slider ini bisa menampilkan postingan terbaru dan postingan terbaru berdasarkan label yang di pilih dan di tampilkan secara otomatis, seperti slider ini.

Sebelumnya sudah pernah dibagikan cara memasang slider otomatis ditemplate Blogger. Nah, cara memasang slider ini tidak jauh berbeda, hanya kodenya yang berbeda. Slider ini pernah saya pasang pada salah satu template yang sudah pernah dibagikan sebelumnya. Tampilannya adalah seperti gambar dibawah ini, agar lebih jelas lagi kamu dapat melihat demonya.

Slider Otomatis

DEMO SHOW

Sudah puas melihat demonya? Ok sobat, berikut adalah cara memasangnya di Blog Blogger.

Cara Membuat Slider Otomatis Di Blogger

Masuk ke edit Html template Blogger silahkan cari dan temukan kode ini: ]]></b:skin> setelah ketemu, salin kode di bawah ini, kemudian letakkan di atasnya:

.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:" - "}

Langkah selanjutnya, masuk ke menu "tata letak" dan masukan kode dibawah ini di widget HTML/JavaScript, pilih letak yang sesuai misalnya di atas postingan.

<div id="s3slider-container">  <div class="s3slider loading" style="width:420px;height:270px;">    Memuat...  </div></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>var s3slider_config = {    url: 'http://www.seocips.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: 420,        height: 270,        timeOut: 5000    }};</script><script src="https://cdn.rawgit.com/Brando07/share/newbe/seocips-slider.js"></script>

Kode url warna biru diatas di ganti dengan url blog kamu, kode warna merah dihapus jika ditemplate kamu sudah ada kode seperti itu atau ganti dengan jquery versi terbaru, kode warna hijau adalah jumlah postingan yang akan di tampilkan ubah nilainya untuk jumlah postingan yang akan di tampilkan. Kode warna kuning adalah lebar dan tinggi, silahkan ubah nilainya untuk mengubah ukurannya.

Slider ini juga dapat sobat pasangi efek animasi loading blog untuk menambah kesan di slider template ini. Sekian tutorial cara memasang slider otomatis keren diblog, semoga bermanfaat.