Menampilkan Statistik Kasus Corona NUG Kawal Corona WP di Sidebar WordPress Secara Vertikal

Sejak plugin NUG Kawal Corona WP saya rilis pada 3 April 2020, saya memang tidak banyak melakukan update hanya 1x saya melakukan update, setelah rekan saya yang memang ahli di backend WordPress memperbaiki script saya. Setelah itu saya tinggal karena kesibukan pekerjaan utama saya membuat website untuk klien, ya sesekali melihat respon di blog ini.

Ketika saya mencoba mengecek ternyata responnya luar biasa, ini adalah plugin iseng yang pertama kali disambut baik dan sudah digunakan di banyak website, baik personal, pemerintahan dan kampus. Terima kasih atas respon positifnya dan terima kasih sudah menggunakan plugin ini ^_^.

Dari berbagai kekurangan plugin statistik Covid-19 yang banyak ditanyakan adalah kenapa tampilannya jadi berantakan jika dipasang di sidebar, kok tidak bisa berubah jadi vertikal. Sebetulnya saya sudah memberikan solusi dengan memberikan atribut class_wrap dan id_wrap, dengan atribut tersebut teman-teman bisa menambahkan nama class ataupun id yang bisa menjadi selector untuk code CSS, dengan menambahkan custom CSS tampilannya bisa dirubah sesukanya, termasuk dirubah menjadi vertikal. Tapi sepertinya tidak banyak yang bisa, jadi kali ini sebagai wujud pertanggungjawaban saya yang telah membuat plugin ini saya akan memberikan code CSS yang bisa digunakan untuk menjadikan tampilan statistik Corona menjadi vertikal.

Tampilan statistik Covid-19 plugin NUG Kawal Corona WP untuk style vertikal bisa dilihat gambar dibawah ini

Cara Custom CSS

Bagaimana membuatnya? Ikuti langkah-langkahnya

PERTAMA – Di shortcode NUG Kawal Corona WP yang sudah teman-teman miliki silahkan tambahkan atribut class_wrap dan untuk valuenya sebagai contoh nugkc-vertical. Kira-kira jika ditulis lengkap jadinya seperti ini.

[nug_data_corona data="indonesia" style="card" class_wrap="nugkc-vertical"]

KEDUA – Silahkan tambahkan code CSS dibawah ini ke blog Anda, banyak cara untuk memasukkan custom CSS di WordPress, bisa pakai plugin tambahan, di masukkan di form khusus yang telah disediakan oleh theme yang dipakai (biasanya theme premium ada fitur seperti ini) atau bisa juga dari bawaan WordPress. Untuk fitur custom CSS di WordPress silahkan masuk ke Apperance > Customize > Additional CSS, silahkan masukkan kode CSS dibawah ini di form yang ada dan klik Publish.

.nugkc-vertical > .row > [class*="col-"] {
    flex-basis: 100%;
    max-width: 100%;
}

Ya hanya dengan kode CSS sederhana diatas tampilan statistik Corona teman-teman bisa menjadi vertikal dan bisa ditempelkan di sidebar ataupun tempat lain yang berbentuk vertikal.

Demo Covid-19 di Widget Sidebar WordPress

Jika ada yang ingin melihat live demonya silahkan kunjungi halaman NUG Kawal Corona WP – Vertical Style.

Sekian artikel ini semoga bisa membantu, jika ada yang ingin ditanyakan silahkan tulis di komentar, jika ada waktu dan saya paham saya akan jawab ^_^.