🔔 Aktifkan notifikasi. disini Google News

Cara Merubah Beranda Tampilan Homepage Fletro Pro Menjadi Grid Seperti Kartu

Buat temen-temen yang ingin merubah tampilan pada beranda template fletro Pro supaya lebih menarik yuk ikuti caranya, mudah banget kok.
Mr. Hello

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
Cara Merubah Beranda Tampilan Homepage Fletro Pro Menjadi Grid Seperti Kartu

Harga : *Belum termasuk Ongkos kirim
Pesan via whatsapp Pesan via Email
Baca juga :

Mau donasi lewat mana?

BRI - Warsito (38940-10507-29535)

Mandiri - Warsito (1370-0182-86605)

BSI - Warsito (7153-4266-72)
Merasa terbantu dengan artikel ini? Ayo dukung dengan donasi. Klik tombol merah.

Post a Comment

Silahkan berkomentar dengan tutur bahasa yang baik!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.