Modifikasi Jetpack Related Posts dengan CSS

Salah satu plugin yang saya pakai di blog ini adalah Jetpack. Ini adalah plugin yang dibuat Automattic, yang juga membangun CMS WordPress. Ini adalah sebuah plugin all in one (menurut saya), di mana dalam plugin ini, ada banyak sekali fitur yang dibutuhkan oleh sebuah blog. Salah satu fiturnya adalah Related Posts atau Pos Terkait. Atau secara default, terjemahan Jetpack sendiri menggunakan kata “Terkait”. Biasanya letaknya ada di bawah artikel posting.

Fitur ini bermanfaat sekali kalau kita menggunakan theme bawaan dari WordPress, atau theme clean lainnya. Clean di sini maksudnya adalah, belum diisi dengan berbagai macam fitur. Namun, ada juga kawan saya yang lebih memilih fitur related posts Jetpack ketimbang menggunakan fitur bawaan theme.

Theme yang saya pakai di blog ini juga terhitung theme clean. Ga ada itu related posts di bawah artikel. Jadi, kita harus membuat sendiri atau meminta bantuan plugin. Nah, saya memilih menggunakan Jetpack. Karena selain fitur related posts ini, saya juga bisa memanfaatkan fitur lain misalnya auto share artikel ke sosmed, widget follow blog, popular posts, visibility, performance booster, dan lainnya.

Masalah dalam Related Posts Jetpack

Sebenarnya, ini bukan masalah besar. Karena ini cuma soal tampilannya saja. Tidak ada masalah dengan tampilan kalau dibuka menggunakan desktop atau laptop atau device lain yang lebar. Namun, tampilan jetpack menjadi tidak enak dilihat kalau dilihat dengan smartphone. Begini penampakannya.

Saya rasa, kalau Jetpack menampilkan 4 postingan dengan susunan 2 kolom 2 baris, itu bagus. Sayangnya, secara default, Related posts Jetpack hanya menampilkan 3 artikel terkait. Dengan wujud seperti gambar di atas. Nah, saya mau tampilannya menjadi seperti iklan Flex Adsense atau MGID ketika diakses di smartphone. Yaitu 1 artikel per baris, dengan thumbnail di atas judul artikel.

Cara Modifikasi Jetpack Related Posts dengan CSS

Akhirnya, saya berhasil menemukan caranya. Yaitu dengan menambahkan CSS Media.

@media only screen and (max-width:640px) {    #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {         float: none;        margin: 10px auto;          max-width: 350px;           padding-top: 20px;          width: 100%;    }}

Itu dia kode css-nya. Dan berikut gambar hasilnya

Kalau ingin membuat Related Posts Jetpack menjadi seperti milik saya ini, copy saja CSS di atas, lalu paste di custom CSS atau CSS tambahan melalui dasbor WordPress.