Cara Customize Jetpack Subscription Widget

Lama tak menyentuh blog tercinta ini, akhirnya kemarin saya memutuskan untuk mengganti theme dan mengutak-utik tampilan biar lebih fresh dan tentunya tujuan utamanya adalah loading blog semakin ringan. Theme terakhir yang dipakai memang bermasalah dan loading berat, makanya diputuskan untuk diganti saja.

Mumpung lagi free weekend ini, saya mau bagi tips bagaimana cara mengkostumisasi atau customize Jetpack subscription widget agar sesuai dengan tampilan website atau blog.

Kenapa harus dikostumisasi? Biar cantik aja sih kalo saya. Contoh yang sudah diimplementasikan ada di area widget di samping.

Karena saya penganut aliran clean dan simple, saya pun melakukan customize Jetpack subscription widget sesederhana mungkin, namun tetap eye catching. Mau bikin juga seperti punya saya? Ikutin tutorialnya berikut ini.

Well, saya yakin semua pasti sudah tahu dong apa itu Jetpack. Jetpack merupakan salah satu plugin yang sangat bermanfaat di WordPress. Plugin ini datang dengan fitur yang sangat mudah untuk diimplementasikan dan membantu blogger untuk meng-organize blog mereka.

Salah satu fiturnya adalah form untuk subscribe atau berlangganan melalui email, yang dikenal dengan nama Jetpack subscription widget, yang sedang kita bahas saat ini. Cara kerjanya adalah, ketika artikel baru di-publish, setiap user yang telah subscribe akan mendapatkan email notifikasi adanya artikel baru. Bermanfaat sekali kan?

Secara default, form standar untuk Jetpack subscription widget sudah lumayan clean. Namun ada beberapa blogger, termasuk saya, yang ingin mengkostumisasinya lagi agar lebih menyatu dengan tampilan blog.

Untuk melakukan customize Jetpack subscription widget ini tidak memerlukan waktu lama dan hanya dengan 3 langkah mudah dan cepat dengan melakukan edit CSS. Sebelumnya, berikut ini adalah widget standar untuk Jetpack subscription.

Sudah siap? Berikut ini adalah langkah-langkahnya untuk customize Jetpack subscription widget.

1. Aktifkan widget di Dashboard > Appearance > Widget > Blog Subscription (Jetpack)
2. Ubah sedikit kata-kata standar dan lakukan setting sesuai dengan selera masing-masing. Klik Save apabila sudah selesai.

3. Navigasi ke Dashboard > Appearance > Edit CSS atau juga bisa dengan klik tombol Customize pada top bar, lalu klik Additional CSS.

Masuk ke menu Additional CSS, berikut ini adalah langkah lanjutannya.

• Modifikasi pertama untuk judul widget. Salin kode CSS berikut ini dan sesuaikan dengan kebutuhan. Kode ini akan menngubah judul menjadi huruf kapital dengan posisi teks rata tengah. 

.jetpack_subscription_widget .widget-title {
font-size: 20px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}

• Lanjut ke langkah kedua, modifikasi untuk kolom isian email. Di sini kita menyesuaikan tinggi kolom dan border sesuai dengan kebutuhan. 

#subscribe-email input {
width: 75%;
height: 25px;
padding: 10px 8px;
font-size: 15px;
float: left;
border: 1px solid #3CC7C5;
}

• Langkah terakhir, memindah tombol Subscribe ke samping kolom isian email dan mengubah warnanya sesuai kebutuhan. Dan, selesai! Simpan semua perubahan apabila sudah sesuai dengan keinginan.

#subscribe-submit input {
width: 15%;
padding: 0;
height: 47px;
border: 1px solid #3CC7C5;
}

Gampang banget kan? Tapi perlu dicatat juga bahwa bisa jadi CSS class berbeda untuk setiap theme. Apabila tidak bekerja sebagaimana mestinya, gunakan inspect element tools untuk menemukan class yang sesuai dengan theme yang digunakan.