wpJakarta.Com – Tips-trik Kustomisasi Prev Next Post WordPress. Website wpJakarta.Com menggunakan tema website storefront by WooCommerce. Kami memilih storefront karena ingin flexibilitas atau bebas kustomisasi via hook dan yang pasti bisa lari kencang karena tema website ini masih tergolong plain. Dan yang pasti tema website storefront 101% kompatibel dengan WordPress ataupun WooCommerce.
Artikel WordPress lainnya
- Tips-trik Kustomisasi Prev Next Post WordPress
- Untuk Website WordPress, Pilih myISAM atau InnoDB
- Tips-trik Kustomisasi Footer WordPress
- Tips-trik Membuat Dan Kustomisasi Topbar WordPress
- Tips-trik Menampilkan Jumlah View Halaman WordPress
- Tips-trik Membatasi Jumlah Revisi Post Website WordPress
- Tips-trik Mengatasi WordPress Error Establishing a Database Connection
- The Response Is Not A Valid JSON Response
- Tutorial WordPress
- Tips-trik Membuat Author Box WordPress
Kustomisasi prev next post WordPress storefront by WooCommerce
“Prev Next” yang di maksud adalah dua navigasi ke kanan dan ke kiri yang di gunakan sebagai link ke post sebelumnya atau post setelah. DI website WordPress umum terlihat di bagian bawah setiap post. Bukan hanya WordPress, hampir di semua platform website pasti ada navigasi tersebut. Baik tema website premium atau free juga ada prev next post tersebut. Hanya saja desainya yang berbeda-beda di setiap tema.
Khusus tema website storefront, “prev next post terlihat sangat sederhana. Atau sudah bisa di bilang jadul. Maklum karena storefront adalah tema dasar khusus untuk mengakomodasi WooCommerce. WooCommerce memang sengaja membuatnya plain, karena biasanya storefront di gunakan lagi orang para user atau developer untuk mengembangkan tema baru yang berbasis storefront (storefront framework).
Artikel WooCommerce lainnya
- Tips-trik Kustomisasi Halaman Checkout WooCommerce
- Tips-trik Menambahkan Teks Pada Halaman Login WooCommerce
- Tips-trik Membuat Deskripsi Pendek Produk Pada Halaman Belanja WooCommerce
- Tips-trik Kustomisasi Halaman Produk WooCommerce
- Tips-trik Membuat Produk WooCommerce
- Menampilkan Harga Yang Berbeda Pada Masing-Masing Kustomer WooCommerce
- Tips-trik Merubah Teks No-Shipping Available WooCommerce
- Memindahkan Deskripsi Kategori Produk WooCommerce Ke Bagian bawah
- Menambahkan Gambar Checkout Aman Pada Halaman Single WooCommerce
- Membuat Menu Sosial Media Pada Tema Storefront WooCommerce
Tips-trik Kustomisasi Prev Next Post WordPress tema website storefront
Kami sangat tidak puas melihat prev next post di tema website storefront. Lalu berfikir untuk sedikit memodifikasinya tanpa banyak perubahan. Tidak perlu membuat “section” baru atau tambahin banyak kode. Jadilah kustomisasi ringan yang kami lakukan. Yaitu dengan memberikan kotak dengan box shadow di tambah animasi transisi saat hover (ketika di tunjuk mouse). Kustomisasi simple ini hanya menambahkan beberapa baris CSS saja. Contohnya bisa terlihat seperti pada gambar berikut. Atau coba scroll ke bagian bawah lalu hover over prev next post di halaman ini.
Artikel lainnya
- Desain Ulang Website Freshplus62.Com
- Daftar Iklan Alternatif Selain Google Adsense
- Remove BG – Tools Online Remove Background
- Kaos Sablon WordPress Murah Di wpJakarta
- Merchandise WordPress Dan WooCommerce Murah Di wpJakarta
- Insight dan Data Industri Laundry di Indonesia (pengalaman selama 10 tahun QnC Laundry)
- Waralaba Usaha Laundry Kiloan oleh QnC Laundry
- Perbedaan Kol Dan Kubis ?
- Apa Itu Cornerstone Content
- Cari Website Guest Posting Gratis, Aman Dan Terpercaya
Kustomisasi prev next post WordPress dengan menambahkan kode CSS
Berikut adalah kode CSS yang di tambahkan. Perubahan karena penambahan script CSS tersebut juga aman pada tampilan handphone.
/* Prev-Next Post */
#post-navigation {
border-top:1px solid #ba0c49;
margin-top:3em;
}
.site-main nav.navigation .nav-previous, .site-main nav.navigation .nav-next {
border:1px solid #ba0c49;
padding:2em;
width:65%;
margin-bottom:0.5em;
transition:width 3s;
background-image:linear-gradient(to right, rgba(255,0,0,0), rgba(186,12,73,1));
}
.site-main nav.navigation .nav-previous:hover, .site-main nav.navigation .nav-next:hover {
box-shadow:2px 2px 4px #ba0c49;
width:100%;
}
Jika anda juga menggunakan tema website storefront. Kode di atas bisa langsung di copy paste karena menggunakan ID dan selector asli storefront. Tips-trik kustomisasi prev next post WordPress tentu bisa di sesuaikan dengan gaya anda sendiri menambahkan style kode CSS lainnya. Tampilan, warna, shadow atau animasi lainnya tentu bisa di sesuaikan.
