Cara membuat slider di html

Saat Anda mengunjungi halaman website, terkadang Anda melihat gambar yang bergerak secara otomatis. Bagian tersebut biasanya menampilkan informasi terkait promo atau deskripsi produk. Ketika Anda menemukannya di halaman blog biasanya digunakan untuk menampilkan gambar fitur dari artikel terakhir. Fitur untuk menampilkan gambar bergerak ini dikenal dengan nama slider atau dikenal juga dengan carousel

Anda dapat menginstal slider di situs web dengan mudah. Ini juga memiliki beberapa manfaat. Agar lebih mudah dipahami, artikel ini akan membahas tentang manfaat slider dan cara mudah membuat slider di WordPress

Daftar Isi

Memanfaatkan Slider di Situs Web

Slider atau carousel adalah salah satu dari beberapa fitur website yang sering digunakan. Fitur ini akan menampilkan gambar yang berubah secara otomatis atau ketika Anda mengklik, gambar akan bertransisi dengan sendirinya. Anda mungkin lebih familiar dengan fitur ini dengan nama slideshow

Slider menampilkan informasi artikel terbaru atau artikel yang sengaja disematkan (pinned) agar bisa tampil di halaman pertama. Hal ini akan memudahkan pengunjung untuk membuka artikel terbaru

Selain itu, bagi Anda yang memiliki website e-commerce, Anda bisa memanfaatkan fitur slider untuk memperkenalkan produk yang sedang dipromosikan, produk dengan penjualan terbanyak, atau produk andalan. Konten yang ditampilkan di bagian slider bisa lebih mencuri perhatian pengunjung dibanding konten lainnya

Agar konten pada slider lebih banyak menarik pengunjung, Anda bisa melakukan beberapa variasi pada slider. Slider memungkinkan Anda menambahkan beberapa efek atau modifikasi. Misalnya menambahkan efek transisi, memodifikasi teks, bahkan membuat tombol unik di slider

Dengan memanfaatkan berbagai fitur tersebut, Anda dapat mengubah tampilan slide yang membosankan menjadi lebih menarik dan indah. Tentunya hal ini juga dapat mempengaruhi kesan pengunjung saat mengunjungi halaman website Anda

Kapan Anda Harus Memasang Slider di Situs Web?

Meskipun banyak sekali manfaat dari slider pada website, ada baiknya kita lebih cerdas saat menambahkan slider pada website. Anda harus terlebih dahulu melihat jenis website dan apa tujuannya

Ada beberapa opsi penginstalan slider di situs web. Sebagian besar situs web memasang penggeser pahlawan di bagian atas. Ini berfungsi sebagai pengganti header

Selain penggunaan slider untuk mengganti header, beberapa developer website memasang slider justru di bagian bawah. Tujuannya tidak lain adalah ingin menampilkan beberapa komentar atau testimoni dari pelanggan yang telah bekerja sama

Sedangkan pada website berita, slider tidak hanya menampilkan konten tulisan saja, tetapi juga beberapa video pendek yang secara otomatis berjalan terkait dengan berita yang sedang dibaca. Pemasangan konten seperti ini bisa menarik pengunjung untuk melihat video yang disajikan

Terlalu banyak slider yang Anda pasang di halaman website bisa menyebabkan website tidak berjalan dengan baik. Slider yang memuat konten cukup besar dapat membuat website lambat untuk diunduh dan navigasi pengunjung menjadi kacau. Namun jika Anda bisa menggunakannya dengan bijak, slider bisa menjadi senjata ampuh untuk mendapatkan lebih banyak klien

Cara Membuat Slider di WordPress

WordPress secara default tidak menyediakan opsi fitur slider, namun Anda bisa menginstalnya sendiri. Untuk menggunakan fitur ini, Anda harus memasang plugin yang fungsinya untuk menambahkan slider pada tema

Ada banyak jenis plugin slider yang tersedia di WordPress, namun pada artikel ini kita akan menggunakan plugin Master Slider untuk membuat postingan slide di WordPress.

Master slider memiliki banyak fitur di dalamnya. Anda dapat memasang berbagai jenis slider dengan opsi yang tersedia. Selain itu, plugin ini sepertinya cukup mudah digunakan – bahkan untuk orang awam sekalipun

Ada tiga langkah yang perlu Anda lakukan untuk menginstal dan memasang slider menggunakan plugin ini. Berikut cara membuat slider otomatis di blog menggunakan plugin Master Slider di WordPress

Langkah 1. Membuat Slider di WordPress dan Menambahkan Media untuk Digunakan

Anda harus menginstal master slider terlebih dahulu melalui menu plugin di dashboard WordPress, melalui "Dashboard » Plugin » Add New"

Setelah plugin ini diinstal dan diaktifkan, cari tab Master Slider di dasbor. Saat Anda membuka menu ini, Anda akan menemukan daftar semua slider aktif di WordPress. Namun jika kosong, berarti tidak ada slider aktif di WordPress. Anda cukup mengklik Create New Slider untuk menambahkan slider baru ke website Anda

Ketika Anda mengklik tombol "Buat Penggeser Baru", sebuah jendela akan muncul untuk memilih jenis penggeser yang ingin Anda buat. Anda memiliki 8 opsi penggeser, termasuk penggeser horizontal dengan dan tanpa gambar kecil

Anda dapat memilih Slider Sampel sesuai dengan kebutuhan Anda. Pada contoh pada artikel ini menggunakan Slider dengan Horizontal Thumbnails. Anda kemudian akan diarahkan ke pengaturan slide. Pada tab ini Anda bisa menambahkan ke slider dengan menggunakan uploader WordPress atau dengan memilih gambar yang sudah ada di media penyimpanan Anda

Anda dapat menambahkan gambar atau foto ke slider menggunakan menu ini. Setelah selesai, gambar slider siap digunakan, jangan tutup dulu menunya. Ada beberapa pengaturan yang perlu Anda sesuaikan

Langkah 2. Mengonfigurasi Slider WordPress

Di menu yang sama, saat Anda menggulir ke bawah ada pengaturan slider lainnya. Anda bisa mengatur tampilan dan berbagai fitur tambahan melalui menu di bawah ini

Opsi pengaturan pertama adalah Latar Belakang. Di bagian latar belakang, Anda dapat mengonfigurasi gambar latar, teks, warna, dan mode isian untuk setiap penggeser. Selain itu, Anda dapat memilih Thumbnail dari background yang Anda tambahkan

Di sebelah tab Latar Belakang, ada tab Video dan Tautan. Tab ini digunakan untuk menambahkan link URL ketika gambar diklik oleh pengunjung website. Anda dapat memilih untuk menampilkan halaman sumber gambar atau mengalihkannya ke halaman lain melalui tab ini

Atau sebagai tambahan Anda dapat menambahkan informasi terkait slide menggunakan Info Slide. Informasi yang Anda tambahkan di sini akan muncul di penggeser saat pengunjung mencapai slide tertentu. Perlu dicatat bahwa ini relatif terhadap template slide yang Anda pilih

Setelah Anda selesai memasukkan beberapa pengaturan tambahan, ini berarti Anda telah menyelesaikan pengaturan slider untuk website tersebut. Yang perlu Anda lakukan sekarang adalah mereview slider yang telah Anda buat. Caranya cukup scroll ke bawah dan Anda sudah bisa melihat gambar dan tampilan slider yang akan muncul di website tersebut

Setelah selesai di Tab Slides, Anda bisa melanjutkan pengaturan melalui Tab Slider Setting, Slider Control, dan Slider Callbacks. Anda dapat menggunakan ketiga tab ini untuk mengatur berbagai pengaturan slider lainnya

Misalnya di Slider Setting, Anda bisa mengatur nama slider, ukuran slider, dan metode yang digunakan slider saat berjalan di website. Dalam pengaturan ini, Anda juga dapat menyesuaikan pemotongan dan pengubahan ukuran gambar secara otomatis berdasarkan ukuran yang telah disesuaikan sebelumnya

Selain pengaturan di atas, di Slider Setting Anda juga bisa menemukan pengaturan transisi yang diterapkan pada slider dan juga navigasi yang ingin Anda gunakan. Anda dapat menyesuaikan semuanya di sini. Sayangnya untuk Master Slider versi gratis, Anda hanya dapat menggunakan dua efek. Normal dan Pudar

Sedangkan untuk Tab Slider Control, pengaturan yang bisa kamu lakukan seperti memilih jenis kontrol yang ingin kamu aktifkan. Panah adalah tipe kontrol default yang ditawarkan oleh plugin

Setelah semua pengaturan tersedia, jangan lupa klik Save Changes untuk menyimpan pengaturan yang telah Anda buat

Langkah 3. Menampilkan Slider di Halaman Mana Saja yang Anda Inginkan

Hal terakhir yang perlu Anda lakukan adalah menambahkan penggeser ke halaman atau pos yang ingin Anda gunakan penggesernya

Setelah Anda selesai membuat slider, akan ada daftar slider yang telah dibuat. Setiap daftar memiliki kode pendek di sebelahnya. Oleh karena itu, yang harus Anda lakukan hanyalah menyalin shortcode yang tersedia dan kemudian menambahkannya ke halaman atau postingan

Untuk mendapatkan shortcode, buka Tab Master Slider di dashboard WordPress

Salin kode pendek slider yang ingin Anda tambahkan, lalu buka editor halaman atau posting, dan tempelkan kode pendek di mana saja untuk membuat bilah geser muncul di WordPress. Di bawah ini adalah contoh penggunaan slider dalam sebuah postingan

Setelah Anda masuk, jangan lupa klik "Perbarui" untuk menerapkan perubahan yang dilakukan. Ketika Anda membuka posting yang ditambahkan slider, itu akan terlihat seperti di bawah ini. Maaf agak berantakan, karena ini 'hanya contoh'

Anda dapat membuat slider sebanyak mungkin di WordPress dengan menggunakan plugin Master Slider. Untuk menghapus slider yang sudah tidak terpakai, buka tab Master Slider, lalu pilih delete (ikon keranjang sampah)

Kesimpulan

Meskipun pemasangan slider di WordPress bisa dilakukan secara manual, namun saat menggunakan plugin, pemasangan slider di WordPress menjadi lebih mudah dan sederhana. Yang harus Anda lakukan adalah menginstal dan mengaktifkan plugin. Proses konfigurasi yang disajikan cukup mudah dipahami karena menggunakan interface yang sederhana

Semoga artikel cara membuat slider di WordPress ini bermanfaat bagi Anda dan mempermudah proses penambahan slider di website Anda

Di bawah ini adalah beberapa rekomendasi artikel kami untuk membantu mengembangkan situs web/blog WordPress

• Cara Mengganti Font di WordPress (Otomatis dan Manual)
• Panduan Mengelola Banyak WordPress dari Satu Dasbor
• Cara Membuat Situs Web Multibahasa di WordPress
• Cara Membuat Login Kustom di WordPress
• Cara Mudah Menghapus Sidebar WordPress

Jika Anda memiliki pertanyaan atau informasi tambahan, jangan ragu untuk mengirimkannya melalui kolom di bawah ini, atau jika Anda ingin mendapatkan informasi terbaru dari kami, silakan isi formulir berlangganan