Blog Post

Juli 21, 2020 /

Cara Buat Artikel Terkait Pop-Up & Floating Ketika Laman Di Scroll


Berikut adalah cara buat artikel terkait di WordPress Pop-Up dan Floating ketika laman blog kamu di scroll/gulir. Ya, seperti iklan gitu, yang menampilkan artikel blog sebelumnya.

Anda tidak perlu tahu kode untuk membuatnya, karena di sini kita akan memakai plugin. Nah, pertanya’anya, plugin WordPress mana nih, yang performanya cukup bagus untuk urusan ini?

Berikut akan kami bagikan pengalaman, plugin apa sih yang bagus untuk membuat artikel terkait pop-up dan floating ketika laman di scroll beserta tutorial singkat cara pemasangannya.

Ok, langsung saja ya!

Plugin WordPress untuk buat Flyout Box yang menampilkan artikel terkait

Ada lumayan banyak plugin untuk buat artikel terkait pop-up dan floating ketika pengunjung membaca di blog anda. Tapi disini, saya hanya merekomendasikan satu plugin saja yang works sangat baik.

Plugin ini juga adalah yang juga kami pakai di Blogkudewe. Nama plugin tersebut adalah upPrev yang di kembangkan oleh Jason Pelker, Grzegorz Krzyminski.

Installasi dan setting plugin flyout box

Anda bisa langsung cari plugin upPrev di laman admin blog WordPress anda, lalu pasang dan aktifkan pluginnya.

Setelah plugin ter-install, pergi ke laman daftar plugin yang terpasang, lalu cari plugin upPrev tadi. Nah, di tab plugin upPrev anda bisa lihat link Pengaturan/Setting, klik saja untuk mulai pengaturan plugin.


Di Tab Appearance anda bisa mengatur animasi apa yang ingin anda pakai, flyout atau fade in/out. Posisi box di kanan atau kiri laman dan seterusnya. Pada dasarnya, settingan default sudah paling optimal.

Sementara di tan Content, anda bisa atur berapa post yang ingin di tampilkan, post terkait tersebut berdasarkan tag atau kategori, dll.

Merubah tampilan CSS Flyout Box jadi lebih catchy

Untuk merubah tampilan box artikel terkait, di laman pengaturan plugin upPrev kembali lagi ke tab Appearance.

Scroll ke bagian pilihan paling bawah di situ anda akan temukan pengaturan untuk Custom CSS.


Seperti yang kami singgung di atas, bahwa anda tidak perlu tahu kode maka di sini Blogkudewe akan membagikan kode yang sudah kami edit untuk bisa langsung anda terapkan atau hanya untuk sekedar referensi.

Di bawah adalah kode Custom CSS untuk merubah tampilan Flyout Box plugin upPrev. Silahkan di copy lalu paste ke Text Editor Custom CSS plugin upPrev di blog anda lalu klik tombol Save Change untuk menyimpan perubahan.

/* header */#upprev_box h6 a { }/* header link: mouse over */#upprev_box h6 a:hover { }/* headera link: visited */#upprev_box h6 a:visited { }/* container for title, thumbnail and excerpt */#upprev_box .upprev_excerpt { }#upprev_box { border:none !important;border-radius:4px;}/* excerpt */#upprev_box .upprev_excerpt p { font-size:15px; }/* previous post link */#upprev_box .upprev_excerpt p a { }/* previous post link: mouse over */#upprev_box .upprev_excerpt p a:hover { }/* previous post link: visited */#upprev_box .upprev_excerpt p a:visited { }/* thumbnail image */#upprev_box .upprev_thumb { }/* close button */#upprev_close { }

Catatan

Punya artikel terkait yang pop-up dan floating ketika laman di scroll cukup bagus untuk membuat pembaca betah berlama lama nongkrong di blog anda.

Ok, semoga postingan pendek ini cukup bermanfa’at bagi anda para sobat blogger yang lagi cari referensi plugin WordPress yang works untuk buat artikel terkait pop-up dan floating ketika laman di scroll.

Jika ada yang perlu di tanyakan silahkan tinggalkan komen di bawah ya, saya akan coba untuk balas secepat mungkin.

Salam ~

Tidak ada komentar:

Posting Komentar