Cara mengubah tampilan blog menjadi 2 grid responsif

Cara mengubah tampilan blog menjadi 2 grid responsif

Nugie Dwitama
Selasa, 25 Februari 2020


gambar template 2 grid
sumber : blog Faronesia


Template blogger yang memiliki tampilan homepage 2 grid memang banyak di cari-cari oleh para blogger, Karena tampilan homepage blog 2 grid memang terlihat lebih cantik dan menarik.

Namun jarang sekali template blogger yang memiliki tampilan homepage 2 grid saat dibuka di perangkat mobile atau android, dan biasanya tampilan 2 grid hanya untuk perangkat desktop saja.

Maka dari itu agar tampilan Homepage blog anda menjadi 2 grid di perangkat mobile Anda harus mengubah dan menambahkan beberapa kode, dan untuk mendapatkan kodenya anda bisa mendapatkannya di artikel ini beserta tutorial cara pemasangannya.

Yuk intip hasilnya terlebih dahulu, klik link demonya dibawah ini.


Gimana? Keren ngga? Buat anda yang berminat dan tertarik untuk mencobanya yuk langsung aja simak tutorialnya.


Cara mengubah tampilan homepage blogger menjadi 2 grid responsif


Sebagai permulaan admin menyarankan anda untuk menggunakan template-template premium yang mendukung grid mode agar anda tidak mengalami kesulitan saat pemasangan kodenya, contoh template blogger premium yang direkomendasikan untuk digunakan adalah template Viomagz, Igniplex, Kompi flexible, dan Asal SEO. Mungkin masih ada template lain yang bisa anda gunakan, tetapi admin menyarankan beberapa template diatas.

Jika anda sudah menggunakan template blogger premium mari kita mulai tutorialnya, sebagai contoh admin menggunakan template Viomagz V3.2. mungkin anda menggunakan template igniplex atau yang lain intinya sama dan hanya penempatan kodenya yang berbeda. Oke ga perlu lama-lama lagi, ini dia tutorialnya.

1. Hal-hal yang perlu anda perhatikan



  • Silahkan backup terlebih dahulu template anda untuk menghindari kesalahan.
  • Siapkan teks editor terlebih dahulu, saya sarankan menggunakan notepad++ atau vscode. Hal ini untuk memudahkan anda copy paste kodenya.
  • Siapkan PC atau laptop dan koneksi internet, anda harus menggunakan PC atau laptop untuk mengedit template langsung di blog. Jika anda mengedit blog secara langsung menggunakan android akan sangat sulit.

2. Mulai memasang dan mengganti beberapa kode


Silahkan anda log in atau masuk ke akun blogger anda, jika anda ingin praktek di blog baru silahkan anda buat blog baru terlebih dahulu. Lalu masuk ke dashboard blogger>Menu>Tema> Edit html.

Lalu cari kode ini ]]></b:template-skin> gunakan tombol shortcut CTRL+F kemudian copy dan paste kode diatas lalu tekan enter.

Kemudian copy semua kode dibawah ini dan paste diatas kode ]]></b:template-skin> .



Code by : Faronesia

Langkah selanjutnya silahkan anda tekan tombol shortcut CTRL+F lalu copy kode <div clas='blog-post'> maka anda akan diarahkan ke bagian kode tersebut.

Dibawah kode <div clas='blog-post'> terdapat kode seperti kode dibawah ini, silahkan hapus semuanya.





  • Kemudian salin semua kode dibawah ini, dan tempelkan tepat di area anda menghapus kode tadi.



Langkah selanjutnya silahkan cari kode </article> . dibawah kode tersebut terdapat kode seperti dibawah ini, silahkan anda hapus semua kodenya.





  • Kemudian copy kode dibawah ini dan pastekan tepat di area anda menghapus kode tadi.



Sampai disini anda sudah berhasil membuat tampilan 2 grid untuk homepage blog anda, sekarang anda tinggal mengatur dan mempercantik tampilanya menggunakan css.

Silahkan cari kode </body>, kemudian copy dan paste kode css dibawah ini tepat diatasnya.




Dan selamat anda telah berhasil mengubah tampilan homepage blog anda menjadi 2 grid, silahkan anda cek dan lihat homepage blog anda secara langsung.


Akhir Kata


Anda telah membaca artikel tentang cara mengubah tampilan homepage blog menjadi 2 grid, Silahkan kreasikan sesuai keinginan anda. Terimakasih telah berkunjung, semoga artikel ini bisa berguna dan bermanfaat bagi anda semua.

Dapatkan juga update artikel-artikel menarik dari blog webo-lovers.