Slider Otomatis Untuk Template Toko Online
Kemarin ada
teman yang meminta via email untuk dibuatkan sebuah slider otomatis
untuk toko online yang dikelolanya. Bisnis jualan barang atau jasa
dengan memanfaatkan fasilitas internet sekarang lagi ngetrend, dan
permintaan untuk membuat sebuah template toko online pun juga banyak,
tapi kok susah banget ya? Saya tidak akan membahas itu sekarang, saya
akan mencoba untuk memenuhi permintaan dengan membuat sebuah Featured
Slider sederhana dengan tambahan paginasi berupa deretan gambar kecil
dibawah summary atau ringkasan artikel. Prinsip kerja dari slider ini
sama dengan slider yang ada pada template Johny Bingung, disini saya hanya modifikasi background dan menambahkan logo shopping pada bagian bawah gambar.
Baiklah langsung saja pada cara pembuatannya :
Langkah pertama
- Kita harus membuat satu widget di bawah header untuk meletakkan slider nantinya. Login ke blogger dengan akun Anda
- Setelah masuk ke dashboard, pilih blog yang mau dipasang slider.
- Kemudian pilih template >> Edit HTM, jangan lupa centang dulu kotak expand widget template.
- Backup dulu template untuk berjaga-jaga jika nanti terjadi kesalahan dalam pengeditan. Kemudian masukkan kode berikut ini diatas ]]></b:skin>
/* Slide Content ----------------------------------------------- */ .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left; word-wrap: break-word; overflow: hidden;} .slide {color: #666666;line-height: 1.3em;} .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;} .slide li {margin:0;padding-top:0; padding-right:0;padding-bottom:.25em; padding-left:0px;text-indent:0px;line-height:1.3em;} .slide .widget {margin:0px 0px 6px 0px;} - Kemudian untuk memanggil widget agar muncul di layout, letakkan kode berikut di atas <div id='main-wrapper'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='slide-wrapper'> <b:section class='slide' id='slide' preferred='yes'/> </div> </b:if> - Lalu save template, sekarang anda masuk ke layout dulu, lihat dibagian bawah header apa sudah ada satu widget kosong seperti pada gambar di bawah?
Jika pada template Anda sudah terdapat
satu kolom kosong yang ada di bawah header seperti gambar diatas, untuk
langkah pertama tinggalkan saja, langsung pada langkah kedua
Langkah kedua
- Masih pada posisi Edit HTML masukan kode dibawah ini diatas ]]></b:skin>
Ukuran 950px diatas menunjukkan lebar slider, dan 325px adalah tinggi slider. Silahkan sesuaikan dengan ukuran template Anda. - Setelah langkah diatas, masukkan kode berikut diatas kode </head>
Perhatikan kode warna merah diatas jika pada template anda sudah terdapat jQuery.min.js meskipun serinya berbeda, Anda tidak perlu memasukkan script warna merah itu lagi. Cukup satu jQuery.min untuk satu template jika ada dua, kemungkinan akan bentrok dan slidernya tidak jalan. - Selanjutnya perhatikan kode script pada langkah pertama untuk nomer 5 diatas, ganti semua dengan kode dibawah ini :
- Setelah itu save template dan masuk ke layout akan nampak seperti pada gambar dibawah ini :
- Kemudian klik Edit pada widget featured content slider, setelah terbuka jendela baru masukkan atau ketik label yang ingin ditampilkan pada slider, lihat gambar di bawah ini :
Dari gambar diatas saya memasukkan label Electronic yang akan muncul pada slider, Anda bisa ganti sesuai keinginan.
- Terakhir save, dan lihat pada blog Anda sudah terpasang slider menarik.
Segitu dulu ya tutorial membuat
featured slider sederhana untuk toko online, maaf kalau tulisan saya
acak-acakan karena lagi sedih, pasti diantara teman-teman banyak yang
mengikuti berita di media banyak korban yang belum ditemukan akibat
jatuhnya pesawat Sukhoi meskipun tidak ada keluarga saya yang ikut dalam
penerbangan tersebut, tapi saya prihatin dengan banyaknya kejadian
pesawat jatuh di negeri ini, kenapa ya? Disamping itu saya juga sedih
Adsense saya hari ini kena banned... duuhhh lebay banget somprettt. Jika
masih ada yang kurang jelas dalam penjelasan diatas tinggalkan pesan di
kotak komentar. Selamat mencoba dan semoga bermanfaat.
Sumber: http://www.maskolis.com/
0 komentar:
Posting Komentar