Cara Membuat Slider atau Slideshow di blog
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.
1. Masukan kode berikut diatas ]]></b:skin> atau </style> di bagian head template.
Css Untuk Slider
2. Masih di bagian head template, masukan kode Jquery berikut diatas
J-Query
Catatan: Lewati langkah ini, jika sudah memasang Jquery dalam versi yang lain.
3. Masih di bagian head template, masukan kode JavaScript berikut diatas
</head>
Javascript
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 <div class="main-wrapper" > atau <div id="main-wrapper" > 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 </head> di bagian head template, kode ini untuk menampilkan artikel terbaru secara otomatis.
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 <div class="main-wrapper" > atau yang sejenis.
HTML dan JavaScript
Warna Hijau adalah baris kode
pembuka dan penutup untuk menampilkan slider hanya di homepage,5. Save Template, dan lihat hasilnya.
siiip gan
ReplyDeletethank gan
Delete