Berikut
ini cara mudah membuat slider/slideshow di blog. Fitur-fitur Artikel
atau gambar menggunakan slider adalah salah satu elemen umum yang bisa
ditemukan di banyak blog atau website. Fitur slider ini dapat diterapkan
pada homepage bahkan halaman posting.Fitur ini pun bisa dibuat manual
maupun otomatis sesuai kehendak.
Baca juga Fitur Slideshow dengan Efek Animasi.
Cara Membuat Slider
Slider
versi ini sangat sederhana, dan jenis ini sangat ringan karena
ukurannya yang kecil hanya sekitar 2kb, sehingga loading halaman
berjalan normal, dan saya suka slideshow ini karena sederhana tapi cukup
menarik. Saya merekomendasikan untuk menambahkan slider/slideshow atau
setidaknya mencoba terlebih dahulu sebagai pengalaman.
"Slideshow"
ini menggunakan "JavaScript" yang merupakan salah satu cara terbaik
untuk menampilkan banyak informasi halaman artikel dalam ruang yang
relatif kecil dengan menambahkan fungsi yang bagus. Slider ini memiliki
fitur menampilkan gambar otomatis dengan efek geser dilengkapi judul dan
deskripsi / keterangan, juga memiliki navigasi menggunakan persegi /
titik untuk memberikan pada pengunjung agar dapat memilih konten lebih
mudah dengan melompat langsung untuk setiap slide. Slider Geser akan
berhenti secara otomatis ketika mouse hover dan ini dikonfigurasi dalam
kode.
Cara Membuat Slider.
Slider, dibuat dari beberapa baris "HTML" sederhana dan jika Anda memiliki pengetahuan dasar "CSS", maka Anda dapat menyesuaikan atau memodifikasi seperti yang Anda inginkan, dan memang benar-benar dapat dimodifikasi sehingga terlihat lebih bagus. jika tertarik, maka ikuti langkah-langkah berikut.
Slider, dibuat dari beberapa baris "HTML" sederhana dan jika Anda memiliki pengetahuan dasar "CSS", maka Anda dapat menyesuaikan atau memodifikasi seperti yang Anda inginkan, dan memang benar-benar dapat dimodifikasi sehingga terlihat lebih bagus. jika tertarik, maka ikuti langkah-langkah berikut.
1. Masukan kode berikut diatas
]]>CSS untuk Slider
.easyslider-wrapper {
width: auto;
float: left;
position: relative;
padding-right: 2%;
padding-top: 10px;
}
.easyslider {
overflow: hidden;
position: relative;
width: 100%;
height: 350px;
background: #eee;
}
.image_reel {
position: absolute;
top: 0;
left: 0;
}
.image_reel img {
float: left;
width: 20%;
height: 350px;
}
.paging {
background: none;
position: absolute;
bottom: 15px;
right: 20px;
padding:4px 0 2px;
z-index: 100;
display: none;
}
.paging a {
margin: 3px;
background: #fff;
width: 10px;
height:10px;
display: inline-block;
border: none;
outline: none;
}
.paging a.active {
background: #15E3FF;
border: 1px solid #15E3FF;
}
.paging a:hover { }
.easytitledes {
width:70%;
display: none;
position: absolute;
bottom: 20px;
left: 20px;
z-index: 101;
background: #000A3F;
background: rgba(2, 0, 51, 0.6);
padding: 10px 15px;
}
.easytitledes a {
color: #15E3FF;
font: 14px sans-serif;
text-transform: uppercase;
font-weight: bold;
}
.easytitledes a:hover {
color:#29FF00
}
.easytitledes p {
color: #fff;
font: 12px Arial;
}2. Masih di bagian head template, masukan kode Jquery berikut diatas
JQuery
1
4. Ada 2 metode untuk baris kode HTML; Manual dan Otomatis publish artikel terbaru.
Metode 1 Manual.
Masukan kode berikut di suatu bagian dalam HTML body, contoh setelah/dibawah
atau
atau baris kode yang sejenis/mirip, karena struktur setiap Blog memiliki nama yang berbeda-beda.HTML
" />Warna Oranye adalah untuk link image/gambar, Biru untuk link Url posting/artikel, Pink untuk Title/Judul, dan Merah untuk deskripsi. Semuanya dimasukan satu persatu ke dalam baris kode HTML.
Metode 2 Otomatis Publish Artikel Terbaru
Jika anda memakai Platform Blogger, mungkin ingin update artikel secara otomatis masuk ke slider, ikuti langkah berikut:
Masukan tambahan baris kode JavaScript sebelum/diatas
Javascript Artikel Terbaru
Warna Pink adalah link image/gambar yang tampil jika dalam suatu artikel tidak ada gambarnya, sebaiknya anda mengganti link ini dengan link image anda sendiri, supaya pemakaian tidak terbagi-bagi dengan orang lain.
Masukan kode berikut disuatu bagian dalam body template, contoh sesudah/dibawah
atau yang sejenis.HTML dan JavaScript
Warna Hijau adalah baris kode pembuka dan penutup untuk menampilkan slider hanya di homepage, pelajari lebih tentang trik menampilkan dan menyembunyikan elemen disini.
5. Save Template, dan lihat hasilnya.
Catatan: Ingat kalo bingung, lihat saja langsung source code-nya di halaman demo, perhatikan saja kode-kodenya, simple banget.
*Image Reel Slider thanks to Sohtanaka
