Tampilan layout posting pada homepage Blogger sangat mempengaruhi pengalaman pengunjung saat membaca artikel. Karena itu, banyak pengguna template Plus UI mulai menambahkan fitur post grid toggle agar pengunjung dapat mengganti tampilan posting menjadi grid atau list dengan lebih fleksibel.
Fitur ini membuat homepage blog terlihat lebih modern, ringan, dan nyaman digunakan terutama pada perangkat mobile maupun desktop.
Pada tutorial ini, kamu akan belajar cara menambahkan post grid toggle di template Plus UI Blogger dengan mudah tanpa merusak struktur template serta tetap aman untuk SEO dan Google Adsense.
Apa Itu Post Grid Toggle di Blogger?
Post grid toggle adalah fitur yang memungkinkan pengunjung mengubah tampilan posting blog menjadi beberapa mode layout seperti:
- Grid view
- List view
- Compact layout
Fitur ini cukup populer pada template Blogger modern karena membuat tampilan homepage lebih interaktif dan responsif.
Selain meningkatkan UI blog, fitur toggle layout juga membantu pengunjung memilih tampilan yang paling nyaman saat membaca artikel.
Keuntungan Menggunakan Post Grid Toggle
Berikut beberapa keuntungan menambahkan fitur grid toggle pada template Plus UI:
- Tampilan homepage lebih modern
- Pengunjung dapat memilih layout posting
- Meningkatkan user experience
- Membuat blog terlihat profesional
- Lebih nyaman digunakan pada mobile
- Mempercantik tampilan thumbnail posting
- Membantu optimasi UI Blogger
Cara Menambahkan Post Grid Toggle di Plus UI
Sebelum memulai, pastikan kamu sudah menggunakan template Plus UI versi terbaru agar struktur kode lebih kompatibel.
1. Masuk ke Dashboard Blogger
- Buka Blogger
- Masuk ke menu Tema
- Klik panah kecil
- Pilih Edit HTML
2. Cari Kode Layout Posting
Gunakan fitur pencarian template dengan menekan:
CTRL + FLalu cari kode berikut:
blogPosts
Biasanya struktur posting pada template Plus UI berada di bagian container homepage Blogger.
3. Tambahkan Kode Toggle Button
Pada langkah ini, kamu perlu menambahkan tombol toggle untuk mengganti tampilan posting Blogger menjadi mode grid atau list.
Letakkan kode berikut tepat di atas container posting homepage atau sebelum bagian daftar artikel Blogger.
Biasanya pada template Plus UI, posisi kode berada di atas bagian:
<div class='blogPts'>
Atau di atas container posting utama homepage template Blogger.
Lalu tambahkan kode berikut:
<div class='gridToggle'>
<button class='gridV'>Grid</button>
<button class='listV'>List</button>
</div>
Penjelasan fungsi kode:
gridToggleberfungsi sebagai container tombol togglegridVdigunakan untuk mengaktifkan tampilan gridlistVdigunakan untuk mengaktifkan tampilan list
Ketika tombol ditekan, layout posting homepage Blogger akan berubah secara otomatis sesuai mode yang dipilih pengunjung.
Jika tampilan homepage Blogger masih kurang rapi, kamu juga bisa membaca tutorial cara menyembunyikan nama penulis Blogger di homepage.
Fitur ini membuat tampilan template Plus UI terlihat lebih modern dan interaktif terutama pada perangkat mobile maupun desktop.
Biasanya pada beberapa template Blogger, posisi kode layout posting berada di atas bagian container utama posting, seperti:
<div class='blogPts'>
Namun, pada template lain nama class atau struktur bisa berbeda, seperti:
<div class='blog-posts'>
<div class='posts'>
<div id='Blog1'>
Jadi pastikan kamu menyesuaikan dengan struktur template yang sedang digunakan.
4. Tambahkan CSS Grid Toggle
Selanjutnya tambahkan CSS berikut sebelum kode:
]]></b:skin>
Lalu paste kode berikut:
.gridToggle{
display:flex;
gap:10px;
margin:15px 0;
}
.gridToggle button{
padding:8px 14px;
border:none;
border-radius:8px;
cursor:pointer;
}
.gridView .blogPts{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
}
.listView .blogPts{
display:block;
}
CSS di atas digunakan untuk mengatur tampilan grid dan list pada homepage Blogger.
5. Tambahkan JavaScript Toggle
Sekarang tambahkan script berikut sebelum kode:
</body>
<script>
document.querySelector('.gridV').onclick = function(){
document.body.classList.add('gridView');
document.body.classList.remove('listView');
}
document.querySelector('.listV').onclick = function(){
document.body.classList.add('listView');
document.body.classList.remove('gridView');
}
</script>
Script tersebut berfungsi untuk mengganti layout posting Blogger secara otomatis ketika tombol ditekan.
Hasil Setelah Grid Toggle Ditambahkan
Setelah berhasil dipasang, homepage Blogger akan memiliki fitur:
- Tampilan grid modern
- Mode list posting
- Layout lebih fleksibel
- UI blog lebih interaktif
- Tampilan mobile lebih nyaman
Selain itu, pengunjung juga dapat memilih layout yang paling nyaman saat membaca artikel di blog kamu.
Apakah Fitur Ini Aman Digunakan?
Fitur post grid toggle aman digunakan pada Blogger, termasuk untuk SEO maupun Google AdSense, karena hanya memengaruhi tampilan layout posting tanpa mengubah struktur utama artikel.
Dengan kata lain, elemen penting seperti struktur konten dan data artikel tetap sama, sehingga tidak mengganggu proses indexing di Google.
Selama pemasangan kode dilakukan dengan benar sesuai tutorial, fitur ini dapat digunakan dengan aman pada berbagai template Blogger modern.
Tips Agar Tampilan Grid Lebih Responsive
Supaya tampilan post grid lebih maksimal, kamu juga bisa melakukan beberapa optimasi berikut:
- Menggunakan thumbnail rasio konsisten
- Mengaktifkan lazy load gambar
- Menggunakan format gambar WebP
- Mengurangi metadata posting berlebihan
- Mengatur jarak antar thumbnail
Dengan optimasi tersebut, tampilan homepage Blogger akan terlihat lebih clean dan profesional.
Kesimpulan
Menambahkan post grid toggle pada template Plus UI Blogger dapat membuat tampilan homepage lebih modern, fleksibel, dan nyaman digunakan oleh pengunjung.
Selain meningkatkan UI blog, fitur ini juga membantu memberikan pengalaman browsing yang lebih baik terutama pada perangkat mobile.
Jika dipasang dengan benar, fitur grid toggle tetap aman untuk SEO maupun Google Adsense karena hanya mengubah tampilan layout posting Blogger.
FAQ Post Grid Toggle Plus UI Blogger
Apakah post grid toggle aman untuk SEO Blogger?
Ya, fitur post grid toggle aman untuk SEO karena hanya mengubah tampilan layout posting tanpa mempengaruhi struktur artikel Blogger.
Apakah fitur ini bisa digunakan di template selain Plus UI?
Bisa. Fitur ini dapat digunakan pada sebagian besar template Blogger modern yang memiliki struktur container posting serupa.
Kenapa grid toggle tidak berfungsi?
Biasanya karena posisi JavaScript atau CSS belum ditempatkan pada bagian template yang benar.
Apakah fitur grid toggle mempengaruhi kecepatan blog?
Tidak terlalu. Jika kode dibuat ringan dan rapi, fitur ini tetap responsif dan nyaman digunakan pada homepage Blogger.
