Cara Membuat Slider Gambar Otomatis Berdasarkan Label

Cara Membuat Slider Gambar Otomatis Berdasarkan Label - Slider Gambar Otomatis ini sangat bermanfaat jika kamu pasang di blog kamu, selain menambah keren blog kamu, kamu juga bisa menampilkan posting berdasarkan label dengan efek slider dan yang tampil hanya gambar dan judul posting nya saja, silahkan sobat lihat dulu DEMO gambar nya atau langsung melihat DEMO nyata nya.

Gimana tertarik, jika tertarik saya akan menjelaskan bagaimana cara membuatnya.

1. Login ke Blog kamu.
2. Pilih Rancangan > EDIT HTML > Download Template Lengkap terlebih dahulu.
3. Cari kode ]]> setelah ketemu letakan kode dibawah ini tepat di atas kode ]]>

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYl5NstRsDL58j-bYl6lhEo-SSxLmgmdCciyja98hcsxb-Ox5NlEYKCuSVAxSf6VtIemPWrTvNIloEGQ7XhiARPeD_FNebMayrEF1CtCWUtIeI-U473CwWuzTwtZ-iRvarMhYmT8h1aA/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ5wlHlWA9L7blNYEtP4YGdB-l7W5vUclAbvD2M8lHzyojaOShABiTkNQYq5rUxn2ai3OpTnwGvXenfqLy4f5Nj5_RII5hzwr7La4Vacb6k-7j0Dl45xsOHDC78e6Yj1YhovnW78DyXu0/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTqXNhCOBHCW0OM5xTeabYK73A_lIasDgQh4a8RHn_uTWHbpdWWGayWphj2ipHmAPxzJnNMv65P3pD7uz6MtdTHZ-dnZObkbz_jp9v3tx3vhW8efgfQOxpsO_evLuuvRy_EA81pEAd-Lw/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdZEiFPxEE-L78LDhnrVYGDq9ATIzqyvxW30JVq9E0KJAjQyYG-JsyUMAl1j9PdfI3ORaRKgK9_BeVaiO6hE1IRz_kUcL8TlOo6pAfq0ZdArkH5EJAk9J3RmyGXOGV-_typcSR_ycDwRI/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbcK1-jsXfOAWVm6MARf1CZtVgUClgHkNS6_95eHzgdfbKy23DchFmZZ1uzrqyW-UjXmgt0x_hzQZuXS2CtD1qFMyT4ke9nSTX7XzBjN__KOxrL1T94uyURUxJQ1o6o8www7HXQXMSIjA/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcxCUZu_gzkV8LXvVQV_6a8Y5uCH781ikRwJw_AiBgyd7witH3tH5SzSpC19h60TIeJl_N2CIrCje2-i2kCfGKnlkgUehpE2HS0dIJZEgGHikNi3k9hcviuo9zp0zle1g7mZb0dByS5Cc/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

Atur kode yang berwarna merah width (Lebar) heiight (tinggi) sesuai selera kamu.

4. Cari kode 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Keterangan : kode yang berwarna ungu jika kamu sudah memasang nya di blog kamu tidak usah dimasukan lagi, jika belum masukan, kode yang berwarna merah jumlah posting yang ingin di tampilkan ,kode yang berwarna biru ganti dengan Label nya ingat besar kecil hurup nya harus sesuai.


Sekarang cari kode 

 

jika sudah ketemu letakan kode di bawah ini tepat di bawah kode 

Keterangan : kode 

 

adalah kode bagian bawah header.

Klik dulu Pertinjauan apakah berhasil jika berhasil klik Simpan Template.

Script By : http://creatingwebsite-maskolis.blogspot.com/