Cara Membuat Ticker Posting Blog dengan Modul Slider Posting Divi

Ticker posting blog adalah alat yang mudah digunakan untuk menampilkan posting blog secara dinamis (terbaru, terkait, dll.) di situs web Anda. Anda dapat menganggapnya sebagai ticker berita untuk posting blog WordPress.

Hari ini, kami akan menunjukkan cara membuat ticker posting blog dengan modul slider posting Divi. Mirip dengan ticker berita, ticker posting blog yang akan kita buat akan menjadi versi sederhana dan ringkas dari modul penggeser posting Divi. Dan, karena modul penggeser pos memiliki fitur bawaan untuk menampilkan pos dalam berbagai cara, Anda dapat menggunakannya di mana pun Anda mau. Anda dapat menggunakannya di beranda sebagai ticker posting untuk menampilkan posting terbaru, atau Anda dapat menggunakannya di header template posting blog untuk menampilkan posting yang terkait dengan kategori saat ini.

Setelah kami menunjukkan cara membuat ticker posting blog di Divi, kami juga akan menunjukkan cara menyimpannya ke Divi Library Anda sehingga Anda dapat menambahkannya ke header template posting blog di Divi Builder.

Mari kita mulai!

Sneak Peek

Berikut adalah sekilas ticker posting blog yang akan kita buat dalam tutorial ini.

Berikut adalah cara ticker pos ditumpuk dengan baik di layar ponsel.

Kami akan menunjukkan cara menambahkan ticker posting untuk menampilkan posting terkait di header template posting blog juga.

Unduh Tata Letak dan Template GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Impor Tata Letak ke Perpustakaan Divi

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda. Ini akan menjadi file JSON di dalam folder bernama "tata letak ticker posting blog (Divi Library)".

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Impor Template Header ke Divi Theme Builder

Jika Anda ingin mengimpor template posting blog dengan ticker posting ditambahkan ke header, Anda harus menavigasi Divi > Theme Builder.

Kemudian gunakan ikon portabilitas di kanan atas halaman untuk mengimpor file JSON. Ini akan menjadi file di dalam folder bernama "templat header posting blog dengan ticker posting (Pembangun Tema)".

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Membuat Ticker Posting Blog di Divi

Membuat Baris

Untuk memulai, mari buat baris satu kolom di dalam bagian.

Pengaturan Baris

Selanjutnya, perbarui pengaturan desain baris sebagai berikut:

• Lebar Talang: 1
• Padding: 0px atas, 0px bawah

Membuat Judul Posting Ticker dengan Modul Teks

Sekarang setelah baris berada di tempatnya, tambahkan modul teks ke baris untuk membuat judul ticker posting.

Teks Judul dan Latar Belakang

Perbarui teks isi untuk membaca "Postingan Terbaru:".

Kemudian perbarui warna latar belakang:

• Warna Latar Belakang: #333333

Pengaturan Desain

Di bawah tab desain, perbarui gaya teks sebagai berikut:

• Font Teks: Poppins
• Berat Font Teks: Semi Tebal
• Gaya Font Teks: TT
• Warna Teks Teks: rgba(255.255.255,0.7)
• Spasi Huruf Teks: 1px
• Tinggi Baris Teks: 40px
• Perataan Teks: Tengah

• Lebar: 100%
• Lebar Maks: 175 piksel (desktop dan tablet), 100% (ponsel)

Itu menangani judul ticker posting kami. Sekarang mari kita mulai membangun ticker pos.

Membuat Ticker Posting Blog dengan Modul Slider Posting Blog

Untuk membuat ticker posting blog, kita akan menggunakan modul slider posting dan kemudian menyederhanakan desainnya agar benar-benar kompak.

Tambahkan modul penggeser pos di bawah modul teks.

Posting Konten Slider

Di bawah tab konten, Anda dapat memilih jumlah posting, kategori yang disertakan, dan bagaimana mereka atau dipesan. Untuk contoh ini kita akan mempertahankan default dan memiliki slider yang menampilkan posting terbaru.

Untuk menyembunyikan kutipan posting, pastikan untuk memperbarui yang berikut:

• Gunakan Kutipan Postingan: TIDAK
• Panjang Kutipan: 0

Posting Elemen Slider dan Latar Belakang

Sungguh, semua yang ingin kita tampilkan di slider adalah judul posting dan panah slide. Di bawah grup opsi elemen, sembunyikan semuanya kecuali panah.

• Tampilkan Kontrol: TIDAK
• Tampilkan Tombol Baca Selengkapnya: TIDAK
• Tampilkan Meta Postingan: TIDAK

Kami akan menyimpan opsi untuk menampilkan gambar unggulan sebagai latar belakang setiap slide. Tetapi untuk cadangan, pastikan untuk menambahkan warna latar belakang berikut:

• Warna Latar Belakang: #eeeeee

Pengaturan Desain Slider Posting

Gaya Hamparan dan Panah

Di bawah tab desain, perbarui hamparan latar belakang dan warna panah sebagai berikut:

• Gunakan Hamparan Latar Belakang: YA
• Warna Hamparan Latar Belakang: rgba (248.248.248,0.9)
• Warna Panah: #ffffff (desktop), #ef51f7 (arahkan kursor)

Teks Judul

Kemudian, perbarui gaya teks judul sebagai berikut:

• Judul Font: Poppins
• Judul Font Berat: Sedang
• Perataan Teks Judul: Kiri
• Warna Teks Judul: #333333
• Warna Teks Judul (arahkan kursor): #ef51f7
• Judul Teks Ukuran: 16px (desktop), 14px (ponsel)
• Tinggi Baris Judul: 40px
• Judul Teks Bayangan: lihat tangkapan layar
• Judul Teks Warna Bayangan: transparan

Jarak

Kita perlu memberi ruang untuk modul teks judul ticker posting sehingga kita dapat memposisikan slider posting kita di sisi kanannya. Untuk melakukannya, perbarui yang berikut ini:

• Margin: 175px kiri (desktop dan tablet), 0px kiri (ponsel)
• Padding: 0px atas, 0px bawah, 0px kiri, 0px kanan

Animasi Otomatis

Slider pos memiliki opsi bawaan untuk menambahkan animasi otomatis. Ini akan memberi kita fungsi ticker yang kita butuhkan untuk melihat posting tanpa harus mengklik panah slide.

Tambahkan animasi otomatis sebagai berikut:

• Animasi Otomatis: AKTIF
• Kecepatan Animasi Otomatis: 3500

Jangan ragu untuk menambah atau mengurangi kecepatan ke apa pun yang Anda rasa paling baik.

Gaya Tingkat Lanjut

Kelas CSS dan CSS Kustom

Pada titik ini, penggeser posting adalah ticker posting yang berfungsi untuk sebagian besar. Tapi ada beberapa tweak lanjutan yang bisa kita tambahkan untuk membersihkan desain.

Pertama, tambahkan Kelas CSS khusus sebagai berikut:

• Kelas CSS: et-post-ticker

Untuk memastikan judul posting tetap pada satu baris di dalam slider/ticker dan menyembunyikan overflow dengan elipsis, tambahkan CSS berikut ke Judul Slide:

padding-bottom:0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Untuk memberikan lebih banyak nuansa tombol pada panah slide, tambahkan CSS berikut ke Panah Slide:

height: 40px;
width: 40px;
line-height:40px;
font-size: 28px;
text-align: center;
margin-top:-20px;
background:#333;

CSS Tambahan dengan Modul Kode untuk Memosisikan Panah Geser

Pada titik ini, fungsi default panah slide hanya akan ditampilkan saat mengarahkan kursor dan penempatan panah berada di sisi kanan dan kiri slide. Untuk meningkatkan pengalaman pengguna dan membuatnya lebih seperti ticker pos, kita dapat membuat panah selalu ditampilkan dan menempatkannya di sebelah kanan penggeser.

Untuk melakukan ini, tambahkan modul kode baru di bawah bilah geser pos.

Kemudian rekatkan CSS berikut dan pastikan untuk membungkusnya dengan tag gaya yang diperlukan.

.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
  right: 40px !important;
  opacity: 1 !important;
  left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
  right: 0px !important;
  opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
  padding: 0 84px 0 3% !important;
}

Hasil Akhir

Berikut adalah hasil akhir pada halaman langsung.

Perhatikan bagaimana ticker pos menangani limpahan teks judul.

Dan inilah cara ticker pos ditumpuk dengan baik di layar ponsel.

Menambahkan Ticker Posting ke Header Template Posting Blog

Salah satu kasus penggunaan yang jelas untuk ticker posting ini adalah membuatnya menampilkan posting terbaru pada header sebenarnya dari template posting blog. Inilah cara Anda dapat melakukannya.

Menyimpan Baris ke Perpustakaan Divi

Pertama, simpan baris yang berisi elemen yang membentuk ticker posting kita ke Divi Library. Anda dapat melakukan ini dengan mengklik ikon tiga titik pada baris dan memilih "Simpan ke Perpustakaan". Kemudian beri nama tata letak dan klik tombol "Simpan ke Perpustakaan".

Menambahkan Baris Posting Ticker ke template Header

Edit Header Kustom

Setelah baris disimpan ke perpustakaan, kami siap untuk menambahkannya ke header khusus. Untuk contoh ini, pastikan template ditetapkan ke "Semua Postingan". Kemudian klik untuk mengedit header kustom untuk template tersebut.

Sisipkan Baris (Posting Ticker) dari Perpustakaan

Di editor tata letak header, klik untuk menambahkan baris baru di mana pun Anda ingin ticker posting ditampilkan.

Di modal Baris Sisipkan, pilih tab Tambahkan Dari Perpustakaan. Temukan baris ticker posting blog yang sebelumnya Anda simpan ke perpustakaan dan pilih.

Sekarang ticker posting akan muncul di header.

Tampilkan Posting Terkait untuk Kategori Saat Ini

Karena ticker postingan ini hanya akan ditampilkan pada postingan blog, kita dapat memilih untuk hanya menampilkan postingan yang terkait dengan kategori saat ini.

Pertama, kita perlu memperbarui teks judul dalam modul teks kita menjadi “Related Posts:”.

Kemudian, buka pengaturan slider pos. Di bawah Kategori yang Disertakan, pilih opsi Kategori Saat Ini.

Sekarang setiap posting blog akan memiliki ticker posting di header yang menampilkan posting terkait berdasarkan kategori saat ini.

Hasil pada Template Posting Blog

Berikut adalah animasi otomatis beraksi.

Berikut adalah bagaimana Anda dapat mengklik panah navigasi untuk melompat ke posting berikutnya dan sebelumnya. Dan mengklik judul posting membawa Anda ke posting itu.

Dan inilah tampilannya di tablet dan ponsel.

Pikiran Akhir

Seperti yang telah kita pelajari, kita dapat membuat ticker posting blog dengan mudah dengan menyederhanakan desain modul slider Divi dan membuat beberapa penyesuaian khusus pada panah navigasi. Dan jangan lupa bahwa Anda selalu dapat membuat penyesuaian gaya dengan mudah menggunakan semua opsi yang ada di dalam penggeser pos. Mudah-mudahan, ini akan berguna bagi Anda semua blogger dan pengembang web di luar sana.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!