Bagaimana Menambahkan Timeline di Situs WordPress?

WordPress hadir dengan editor blok Gutenberg default yang menawarkan blok untuk memasukkan tombol, ikon sosial, kolom, dan banyak elemen lainnya. Namun, dalam banyak situasi Anda memerlukan widget khusus seperti FAQ, akordeon, garis waktu, dll. Terutama, garis waktu akan lebih berguna untuk menunjukkan kemajuan atau pertumbuhan Anda kepada pembaca Anda. Meskipun tidak ada blok default untuk timeline, untungnya Anda memiliki beberapa cara untuk menambahkan timeline di situs WordPress.

Terkait: Bagaimana cara menambahkan widget timeline di situs Weebly?

Apa itu Garis Waktu?

Timeline adalah representasi visual dari peristiwa yang ditampilkan berdasarkan waktu. Mereka dapat mengambil bentuk video, gambar, teks atau bentuk konten lainnya untuk memberikan pengalaman pengguna yang menarik dan sangat interaktif. Anda dapat menambahkan garis waktu di situs WordPress dalam arah vertikal atau horizontal yang menampilkan aliran peristiwa.

Keuntungan Menambahkan Timeline?

Ada banyak alasan Anda mungkin ingin menyisipkan garis waktu di postingan atau halaman:

• Ini adalah cara yang bagus untuk menunjukkan kemajuan perusahaan atau sejarah merek Anda selama bertahun-tahun.
• Jika Anda menawarkan layanan proyek, akan berguna untuk menunjukkan tahap perkembangan proyek.
• Anda dapat menggunakan garis waktu untuk kelangsungan hidup produk dan menampilkan pencapaian.
• Selain itu, garis waktu berguna saat Anda ingin menceritakan kisah, memvisualisasikan produk dan proses (yang menyampaikan pesan kompleks sebagai pesan yang lebih sederhana) kepada pengguna akhir atau audiens target.

Dengan demikian, tampilan garis waktu yang terlihat bagus membantu membangun lebih banyak kepercayaan pada pengunjung Anda, dan inilah cara membuatnya.

Berbagai Metode untuk Menambahkan Timeline di WordPress

Opsi mudah di WordPress adalah menggunakan salah satu plugin timeline yang tersedia. Namun, Anda juga dapat dengan mudah membuat widget dan menyisipkan di mana saja dengan konten khusus.

1. Widget Garis Waktu Vertikal Kustom

Di bawah ini adalah widget garis waktu khusus yang dapat Anda sisipkan di mana saja di situs Anda menggunakan blok "HTML Khusus".

• 2025

  Garis Waktu Acara 5

  Berikut adalah konten untuk acara timeline Anda. Masukkan paragraf kecil untuk menggambarkan acara secara detail.

• 2024

  Garis Waktu Acara 4

  Berikut adalah konten untuk acara timeline Anda. Masukkan paragraf kecil untuk menggambarkan acara secara detail.

• 2023

  Garis Waktu Acara 3

  Berikut adalah konten untuk acara timeline Anda. Masukkan paragraf kecil untuk menggambarkan acara secara detail.

• 2022

  Garis Waktu Acara 2

  Berikut adalah konten untuk acara timeline Anda. Masukkan paragraf kecil untuk menggambarkan acara secara detail.

• 2021

  Garis Waktu Acara 1

  Berikut adalah konten untuk acara timeline Anda. Masukkan paragraf kecil untuk menggambarkan acara secara detail.

Di bawah ini adalah kode lengkap untuk widget timeline dan Anda dapat menyesuaikan tampilan dan teks sesuai kebutuhan Anda. Anda dapat memasukkan kode ini di mana saja di situs Anda tanpa plugin tambahan.

 <style> .tl { position: relative; padding: 20px 0 20px; list-style: none; } .tl:before { content: " "; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background-color: #eeeeee; } .tl > li { position: relative; margin-bottom: 20px; list-style-type: none !important; } .tl > li:before, .tl > li:after { content: " "; display: table; } .tl > li:after { clear: both; } .tl > li:before, .tl > li:after { content: " "; display: table; } .tl > li:after { clear: both; } .tl > li > .tl-panel { float: left; position: relative; width: 40%; padding: 20px; border: 1px solid #d4d4d4; border-radius: 5px; -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175); box-shadow: 0 1px 6px rgba(0,0,0,0.175); } .tl-body { font-size: 18px; line-height: 26px; color: rgba(121, 112, 112, 0.71); } .tl > li > .tl-panel:before { content: " "; display: inline-block; position: absolute; top: 26px; right: -15px; border-top: 15px solid transparent; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; border-left: 15px solid #ccc; } .tl > li > .tl-panel:after { content: " "; display: inline-block; position: absolute; top: 27px; right: -14px; border-top: 14px solid transparent; border-right: 0 solid #fff; border-bottom: 14px solid transparent; border-left: 14px solid #fff; } .tl > li > .tl-badge { z-index: 1; position: absolute; top: 16px; left: 50%; width: 50px; height: 50px; margin-left: -25px; border-radius: 50% 50% 50% 50%; text-align: center; font-size: 1.4em; line-height: 50px; color: #fff; background-color: #999999; } .tl > li.tl-inverted > .tl-panel { float: right; } .tl > li.tl-inverted > .tl-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .tl > li.tl-inverted > .tl-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .tl-badge { font-size: 18px !important; font-weight: bold; } .tl-badge.primary { background-color: #2e6da4 !important; } .tl-badge.success { background-color: #3f903f !important; } .tl-badge.warning { background-color: #f0ad4e !important; } .tl-badge.danger { background-color: #d9534f !important; } .tl-badge.info { background-color: #5bc0de !important; } .tl-title { margin-top: 0; margin-bottom: 10px; color: rgba(45, 45, 72, 0.44); font-size: 20px; } @media screen and (max-width: 380px) { .tl > li > .tl-panel { width:25% !important; } } @media screen and (max-width: 800px) { .tl > li > .tl-panel { width:33%; } } </style> <ul class="tl"> <li> <div class="tl-badge success"> 2025 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 5</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li class="tl-inverted"> <div class="tl-badge warning"> 2024 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 4</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li> <div class="tl-badge danger"> 2023 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 3</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li class="tl-inverted"> <div class="tl-badge"> 2022 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 2</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> <li> <div class="tl-badge info"> 2021 </div> <div class="tl-panel"> <div class="tl-heading"> <h4 class="tl-title">Timeline Event 1</h4> </div> <div class="tl-body"> <p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p> </div> </div> </li> </ul>

2. Tambahkan Timeline di WordPress dengan Plugin Timeline Keren

Langkah pertama membutuhkan menginstal dan mengaktifkan plugin “Cool Timeline”. Gunakan fitur pencarian melalui submenu "Tambah Baru" di bawah kategori menu bilah sisi "Plugins" untuk mencapainya. Setelah mengaktifkan plugin, item "Cerita Garis Waktu" dan "Pengaturan Garis Waktu Keren" sekarang akan muncul sebagai menu bilah sisi baru di dasbor Anda. Untuk menggunakan plugin, Anda harus membuat cerita dan kemudian membuat garis waktu untuk menampilkan cerita saat peristiwa mengalir.

Atur Pengaturan Default Plugin

Jika Anda ingin menyesuaikan pengaturan default, buka menu "Pengaturan Timeline Keren" untuk menemukan semua pengaturan relevan yang dapat Anda gunakan dengan plugin Cool Timeline.

• Pengaturan Umum – di sini Anda dapat menyesuaikan perataan default, panjang konten, tag heading judul, jumlah cerita untuk ditampilkan, mengaktifkan atau menonaktifkan baca lebih lanjut, urutan cerita, dll.
• Pengaturan Gaya – di sini Anda dapat menyesuaikan warna untuk latar belakang dan elemen lainnya. Anda juga dapat menambahkan CSS khusus untuk menghias timeline Anda sesuai kebutuhan Anda.
• Pengaturan Tipografi – mengatur ukuran font, keluarga dan berat untuk setiap elemen di timeline.
• Pengaturan Lanjutan – di sini Anda dapat menemukan perbedaan antara versi gratis dan versi pro.

Setelah menyelesaikan penyesuaian Anda, klik tombol "Simpan Perubahan" untuk menyimpan semua pengaturan Anda.

Buat Cerita untuk Linimasa

Seperti yang disebutkan, Anda harus membuat cerita untuk digunakan sebagai acara di widget garis waktu. Arahkan kursor ke menu "Cerita Garis Waktu" dan klik submenu "Tambah Baru" di panel admin situs Anda. Tambahkan judul dan media yang akan menyertai cerita Anda. Juga, ketik deskripsi cerita menggunakan antarmuka "Visual atau "Teks". Klik tombol “Tambah Ikon” untuk memilih ikon cerita.

Kemudian, gulir ke bawah ke "Pengaturan Cerita Timeline" dan pilih tanggal/tahun/waktu cerita, nyatakan gambar cerita sebagai ukuran kecil atau penuh. Atur gambar unggulan dan isi fitur tambahan seperti format cerita, kategori, dan pengaturan khusus yang disertakan dalam versi pro. Anda dapat mengosongkan bidang versi pro saat menggunakan plugin versi gratis. Terakhir, ketuk tombol "Terbitkan" untuk membuat cerita garis waktu Anda dengan sukses. Juga, lakukan hal yang sama untuk cerita lain yang akan muncul di timeline Anda.

Catatan: Seperti yang Anda lihat, plugin menggunakan Editor Klasik untuk membuat cerita sementara itu mendukung blok Gutenberg serta widget Editor Klasik untuk menyisipkan di pos. Cerita yang Anda buat disimpan sebagai jenis posting khusus dengan nama cool_timeline.

Tambahkan Timeline di Postingan atau Halaman WordPress

Plugin ini menawarkan beberapa tata letak garis waktu seperti tata letak vertikal, horizontal, satu sisi, sederhana dan kompak. Kami akan menjelaskan cara menggunakan timeline baik di Gutenberg dan Editor Klasik.

Menggunakan Blok Kode Pendek Timeline Keren di Editor Gutenberg

Anda memiliki dua cara untuk membuat dan menambahkan garis waktu – gunakan kode pendek atau gunakan blok pembuat garis waktu instan. Saat Anda berada di dalam editor Gutenberg, klik ikon + di sudut kanan atas dan cari "garis waktu". Anda akan melihat dua blok – Cool Timeline Shortcode dan Cool Timeline – Insta Builder.

Klik pada blok “Cool Timeline Shortcode” dan plugin akan menampilkan preview bersama dengan shortcode. Anda dapat menyesuaikan pengaturan dari bilah sisi seperti mengubah tata letak dan mengisi detail lainnya sesuai minat Anda. Kode pendek akan diperbarui secara otomatis dan tekan tombol "Terbitkan".

Sekarang, Anda dapat melihat cerita yang secara otomatis dimasukkan ke dalam tata letak garis waktu yang bagus sesuai pengaturan Anda.

Jika Anda ingin menampilkan cerita dalam garis waktu horizontal, Anda hanya perlu memilih "Horizontal" sebagai tata letak garis waktu dan pengaturan lain yang sesuai dengan garis waktu Anda. Satu sisi lainnya, tata letak yang sederhana dan ringkas akan berfungsi baik sebagai pengaturan garis waktu horizontal atau vertikal.

Bahkan, Anda dapat menempelkan kode pendek di bawah ini langsung di mana saja di situs Anda untuk menampilkan cerita sebagai garis waktu.

 [cool-timeline layout="default" skin="default" date-format="F j" icons="YES" show-posts="10" animation="FadeInOut" order="DESC" story-content="full"]

Penjelasan untuk mengedit efek adalah sebagai berikut:

• Cool-timeline: ini adalah sintaks awal plugin default kami.
• Layout: ada sekitar lima pilihan layout utama, yaitu vertikal, horizontal, satu sisi, sederhana, dan kompak. Anda dapat membuat perubahan pada kode di atas untuk menjadi pertimbangan Anda.
• Skin: opsi clean/default tersedia di sini.
• Format tanggal: Anda dapat memilih format tanggal apa pun untuk ditampilkan di samping cerita sesuai dengan bahasa atau representasi gaya negara Anda.
• Ikon: Anda dapat memilih untuk mengaktifkan atau menonaktifkan ikon (Ya/Tidak) untuk cerita garis waktu apa pun.
• Show-posts: membantu dalam pagination, sering kali di timeline (dengan banyak cerita).
• Animasi: hanya ada satu efek animasi yang tersedia dalam versi gratis Cool Timeline (yaitu – FadeInOut). Anda dapat membeli pro untuk lebih.
• Urutan: membantu mengatur dan mengatur cara cerita muncul di garis waktu, baik dalam urutan menaik atau menurun (ASC/DESC).
• Konten cerita: memiliki opsi pendek/penuh untuk menampilkan seluruh teks HTML atau deskripsi singkat dengan lebih banyak baca untuk cerita garis waktu.

Tambahkan Garis Waktu di Gutenberg Menggunakan Blok Pembuat Instan

Metode kode pendek berguna karena Anda dapat menyalin dan menempelkan kode pendek di mana saja di situs Anda untuk menampilkan garis waktu yang sama. Namun, Anda harus membuat cerita dan cerita hanya dapat digunakan dalam satu timeline. Jika Anda ingin membuat beberapa garis waktu yang menunjukkan peristiwa yang berbeda, maka Anda dapat dengan mudah melakukannya secara real-time menggunakan blok “Garis Waktu Keren – Pembuat Instan” dengan pengaturannya. Di halaman atau halaman Anda, cari dasbor editor pos dan tambahkan blok "Garis Waktu Keren - Pembuat Instan". Mulai edit judul garis waktu, deskripsi, tanggal, ikon, gambar, dan tambahkan lebih banyak cerita jika Anda mau. Anda dapat menggunakan "Default (Kedua Sisi)" atau "Satu Sisi" sebagai tata letak garis waktu Anda dan menyesuaikan ukuran dan warna judul/deskripsi.

Tambahkan Timeline dengan Elementor Page Builder

Plugin Cool Timeline menawarkan plugin tambahan untuk digunakan dengan plugin pembuat halaman Elementor yang populer. Jika Anda menggunakan Elementor, instal dan aktifkan plugin "Elementor Timeline Widget Addon", Edit halaman atau posting yang ingin Anda buat timeline Anda dengannya (tombol "Edit dengan Elementor"). Ketik "garis waktu" ke dalam bilah pencarian, lalu seret dan lepas komponen "Linimasa Cerita". Gunakan pengaturan "Edit Timeline Cerita" untuk mengubah berbagai opsi untuk memenuhi persyaratan timeline ideal Anda.

Menggunakan Editor Klasik untuk Menyisipkan Garis Waktu

Jika Anda menggunakan Editor Klasik alih-alih Gutenberg, jangan khawatir!!! Cool Timeline juga memiliki opsi untuk Editor Klasik. Saat Anda berada di Editor Klasik, klik menu tarik-turun “Cool Timeline Shortcode” dan pilih “Add Cool Timeline Shortcode”.

Sesuaikan pilihan Anda di pop-up dan klik tombol "OK" untuk memasukkan kode pendek garis waktu.

Demikian pula, Anda dapat memilih opsi "Tambahkan Garis Waktu Horizontal Keren" untuk memasukkan widget garis waktu horizontal.

Pikiran Akhir

Garis waktu dapat secara signifikan meningkatkan kredibilitas bisnis Anda. Meskipun ada banyak plugin timeline yang tersedia, plugin Cool Timeline menawarkan cara yang layak untuk menambahkan timeline di situs WordPress. Anda dapat dengan mudah membuat tata letak vertikal atau horizontal menyesuaikan tampilan. Jika Anda tidak tertarik menggunakan plugin, gunakan kode widget yang diberikan di atas.