Fletro Pro - Seperti yang kita ketahui bahwa template ini memiliki gaya desain yang Clean and Flat, telihat simpel bener-bener flat. Saat saya ingin memodifikasi template ini ternyata masih belum banyak yang menggunakan template ini. Sedangkan Untuk tutorial paling banyak ada di median UI, kalau kita lihat susunan kode dan gaya penulisan antara tema median UI dan Fletro Pro benar-benar terlihat berbeda.
Bagian Template Fletro Pro yang Kita Rubah
Kita akan merubah di bagian postingan, setiap postingan akan kita kasih bingkai dengan effek shadow atau berbayang dan menumpulkan setiap sudut bingkai postingan. Untuk template ini ada dua lokasi yang akan kita rubah yaitu di Pinned Artikel dan Postingan Blog yang memiliki gaya Grid. Nah kurang lebih hasilnya seperti ini :
Cara Merubah Beranda Tampilan Homepage Fletro Pro Menjadi Grid Seperti Kartu
Sebelum kalian merubah template pada Blogg kalian, saya sarankan untuk membackup atau membuat cadangan tema kalian terlebih dahulu supaya apabila terjadi error atau mungkin kamu gak sengaja hapus, kamu masih bisa balikin tmplate kamu. Baiklah langsung masuk proses Modifikasi Cara Merubah Tampilan Homepage Fletro Pro :
- Buka Dashboard Blogger
- Klik Tema
- Tekan icon Segitiga Terbalik
- Lakukan Back Up terlebih dahulu
- Pilih Edit HTML
- Cari dan temukan kode berikut :
.itm{display:flex;flex-wrap:wrap;align-items:center;
- Kemudian Tambahkan Kode berikut tepat setelah kode center; dan sebelum kode width:calc
margin-bottom:20px;padding: 8px 10px 10px;border-radius: 8px;border: 1px solid var(--content-border);border-radius:8px;box-shadow:0px 0px 10px 0px rgb(0 0 0 / 10%);
- Langkah Berikutnya kita akan merubah tampilan pada Grid, silahkan temukan code berikut :
;margin-left:11px;margin-right:11px;position:relative;padding-bottom:33px}
- Kemudian Ganti dengan kode berikut :
;margin-left:11px;margin-right:11px;margin-bottom:20px;padding: 11px 11px 33px;border-radius: 8px;border: 1px solid var(--content-border);border-radius:8px;box-shadow:0px 0px 10px 0px rgb(0 0 0 / 10%); position:relative}
- Terakhir silahkan temukan kode beriku ini
.pInf{position:absolute;left:0;right:0;bottom:0}
- Ganti Dengan Kode berikut :
.pInf{position:absolute;bottom:8px;left:10px;right:10px}
- Kemudian Jangan Lupa untuk tekan Simpan atau Save
Sampai disini Cara Merubah Beranda Tampilan Homepage Fletro Pro Menjadi Grid Seperti Kartu telah selesai, setelah kamu klik simpan kamu bisa langsung melihat hasilnya. Simak juga tutorial lainya seputar template Fletro Pro.
Cara Merubah Beranda Tampilan Homepage Fletro Pro Menjadi Grid Seperti Kartu
Harga : *Belum termasuk Ongkos kirim