Cara membuat Slider Otomatis sederhana, tapi lumayan keren loh guys!

HaiSob apa kabar lagi? semoga semua dalam keadaan baik. Salah satu cara untuk mempercantik tampilan blog/web adalah dengan memasang Slider. Kesempatan ini saya akan membagikan lagi salah satu slider untuk kamu pengguna blog dari Blogger.

Sebelumnya saya sudah sudah pernah membagikan slider otomatis artikel terbaru, tapi munngkin saja kamu tidak tertarik dengan tampilannya, nah kamu bisa coba yang satu ini, siapa tahu cocok. Tampilannya adalah seperti gambar dibawah ini, atau kamu bisa lihat demonya.

Slider ini bisa menampilkan postingan terbaru dan postingan terbaru berdasarkan label yang di pilih dan di tampilkan secara otomatis.

Slider Otomatis


Cara Membuat Slider Otomatis Sederhana Tapi Keren di Blog
Slider Otomatis



Cara Memasang Slider ini di Blogger


1. Di Blog Bloger 😩
2. Pilih menu Template ➔ Edit HTML
ara membuat Slider Otomatis sederhana di Blogger
Template - Edit HTML

3. Letakan kode dibawah ini diatas kode ]]></b:skin> atau dibawah <style>
.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:" - "}

4. Selanjutnya pilih menu Tata Letak lalu klik  Tambahkan Gadget.
5. Kemudian pilih widget HTML/JavaScript

ara membuat Slider Otomatis sederhana di Blogger
Tata Letak >> Tambah Gadget >> HTML / Javascript

6. Masukan kode dibawah ini (tempat yang paling cocok menurtku jika diletakan diatas poostingan di homepage blog):
<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.haisob.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.

Sekian tutorial cara memasang slider otomatis keren diblog, semoga bermanfaat.
Join This Site