Content slider carousel otomatis yang saya lihat dari blog nya
maskolis.com ada dua macam, yang pertama adalah content slider carousel
dengan image dan judul artikel ada dibagian bawah gambar, sedangkan yang
kedua adalah content slider carousel dengan judul artikel ada disamping
gambar seperti yang anda lihat di home page blog saya, atau seperti
gambar diatas.
Artikel ini memang sumbernya dari maskolis.com, saya membuat artikel ini
tujuan utamanya adalah untuk dokumentasi saja, agar suatu saat nanti
kalau ingin memasang pada blog saya yang lain gampang mencarinya. Terima
kasih buat maskolis yang sudah bersedia berbagi ilmunya.
Berikut panduan cara membuat content slider carousel otomatis versi 2 (dengan judul artikel disamping gambar)
1. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
Setelah semua langkah diatas anda lakukan, cari kode:
]]></b:skin>, kemudian masukkan kode berikut ini diatasnya.
Perhatikan kode:
width:980px;height:125px diatas, itu adalah lebar dan tinggi slider pada blog yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
2. Langkah selanjutnya masih pada posisi Edit HTML, cari kode:
</head>, kemudian masukkan kode berikut ini diatasnya.
Perhatikan URL script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya
gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat
jQuery.min.js walaupun serinya berbeda, kode tersebut diatas tidak
perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template,
terserah mau seri berapa, kalau bisa versi yang terbaru.
Kode:
numposts1 = 12; diatas adalah jumlah slider yang ditampilkan. Sedangkan kode:
img width="100" height="90" adalah panjang dan lebar image yang ada di slider.
3. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode:
<div id='main-wrapper'> atau yang mirip dengan kode itu, kemudian letakkan kode berikut ini diatasnya.
Perhatikan kode:
script src=\"/feeds/posts/default/-/sport?max-results
diatas, sport adalah label yang ditampilkan pada slider nantinya (ingat
besar kecil huruf harus sama dengan label yang sudah Anda buat). Jika
Anda ingin menampilkan postingan atau artikel terbaru pada slider,
tinggal hapus kode
/-/sport. Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer.
4. Langkah terakhir, save templates dan lihat hasilnya.
Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.
Jika ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat.
ADS HERE !!!