🔔 Aktifkan notifikasi. disini Google News

Cara Merubah Tampilan Homepage Fletro Pro Menjadi 3 Kolom Seperti Median UI

Bosen dengan tampilan homepage template Fletro Pro yang standart ? mau modifikasi ? Yuk simak cara merubah tampilan Homepage Fletro Pro
Mr. Hello


Modifikasi Tampilan Home Fletro Pro
- Sebenarnya tampilan dari Fletro pro sudah simpel banget menurut aku dan keliatan jelas banget, namun yang namanya manusia, tentunya kita punya keinginan buat aku melihat tampilan Homepage dari Fletro Pro terlihat sepi konten hehe maklum keliatan gede-gede. Jadi aku pengen kalau dibuat 3 kolom kayaknya bagus deh seperti tampilan Median UI.

Dan karena rasa penasarans erta keinginaku sudah membara akhirnya aku analisa kira-kira kode yang mana yang bisa di otak-atik. Tentunya kita langsung berfokus ke CSS dari Grid, nah berikut merupakan hasil eksperimen saya. Buat temen-temen yang ingin Merubah Tampilan Homepage Fletro Pro Menjadi 3 Kolom Seperti Median UI, berikut langsung saja kopi kopi dan paste Kodenya.

Ini untuk tampilan standar dari template Fletro Pro, terlihat besar-besar dan jelas banget hehe..

Nah berikut untuk hasilnya bisa temen-temen cek dan hal ini langsung saya terapkan di Template Fletro Saya. Sebenarnya dulu saya pengennya beli Median UI tapi pas check Out baca-baca lakok malah beli yang Fletro Pro. Ya sudahlah .. tapi sama-sama ringan Kok.

Bagaimana?  Menurut temen-temen Bagus sebelum dirubah atau sesudah? Menurut saya lebih enakan yang ini, terlihat banyak konten dan banyak pilihan. Nah kalau temen-temen tertarik buat edit atau modifikasi yuk simak caranya.

Cara Merubah Tampilan Homepage Fletro Pro Menjadi 3 Kolom Seperti Median UI

  • Buka Dashboard Blogger
  • Klik Tema
  • Tekan icon Segitiga Terbalik
  • Lakukan Back Up terlebih dahulu
  • Pilih Edit HTML
Silahkan temen-temen Cari Kode berikut, biar gampang tekan CTR+F kemudian paste kode berikut dan Enter :
/* Gridmode */ 
Setelah kalian menemukan Kode berikut, Klil aja 2x di kolom kode untuk copy :
/* Gridmode */ .tGr::before{content:attr(data-grid);position:absolute;right:32px;opacity:.8} .grD .tGr::before{content:attr(data-list)} .grD .blogPts{display:flex;flex-wrap:wrap;position:relative; width:calc(100% + 22px);left:-11px;right:-11px} .grD .ntry{width:calc(50% - 22px);margin-left:11px;margin-right:11px;position:relative;padding-bottom:33px} .grD div.ntry{padding-bottom:0} .grD .ntry .pInf{position:absolute;left:0;right:0;bottom:0} @media screen and (min-width:897px){.onMl.grD .ntry{width:calc(33.33% - 22px)}} @media screen and (max-width:1100px) and (min-width: 897px){.grD .ntry .pTtl{font-size:1.1rem}} @media screen and (max-width:500px){.grD:not(.oGrd) .ntry .pSnpt, .grD:not(.oGrd) .ntry .pHdr .aIm{display:none} .grD .blogPts{width:calc(100% + 15px);left:-7.5px;right:-7.5px} .grD .ntry{width:calc(50% - 15px);margin-left:7.5px;margin-right:7.5px} .grD div.ntry{width:calc(100% - 15px)}}
Kemudian Kita akan mengganti beberapa ukuran :
50% - 22px menjadi 33%-22x dan ah daripada nanti malah salah ganti lebih baik, langsung saja Copy kode berikut dan langsung kamu ganti kode yang lama dengan yang baru atau dengan code yang sudah saya rubah ukuranya. Berikut kodenya :
/* Gridmode */ .tGr::before{content:attr(data-grid);position:absolute;right:32px;opacity:.8} .grD .tGr::before{content:attr(data-list)} .grD .blogPts{display:flex;flex-wrap:wrap;position:relative; width:calc(100% + 22px);left:-11px;right:-11px} .grD .ntry{width:calc(33% - 22px);margin-left:11px;margin-right:11px;position:relative;padding-bottom:33px} .grD div.ntry{padding-bottom:0} .grD .ntry .pInf{position:absolute;left:0;right:0;bottom:0} @media screen and (min-width:897px){.onMl.grD .ntry{width:calc(33.33% - 22px)}} @media screen and (max-width:1100px) and (min-width: 897px){.grD .ntry .pTtl{font-size:1.1rem}} @media screen and (max-width:500px){.grD:not(.oGrd) .ntry .pSnpt, .grD:not(.oGrd) .ntry .pHdr .aIm{display:none} .grD .blogPts{width:calc(100% + 15px);left:-7.5px;right:-7.5px} .grD .ntry{width:calc(50% - 15px);margin-left:7.5px;margin-right:7.5px} .grD div.ntry{width:calc(100% - 15px)}}
Proses untuk merubah Thumbnail Tema Fletro Pro menjadi 3 kolom sudah selesai namun tidak sampai disini, karena ukuran thumbnail postingan telah mengecil maka otomatis judul artikel kita akan terlihat lebih besar kamu bisa merubahnya atau mengecilkan ukuran Judul Postingan kamu supaya lebih enak dilihat.

Silahkan kamu cari kode berikut ini :
/* Title and Entry */ .pTtl{font-size:1.2rem;
Kemudian kamu ganti ukuranya menjadi seperti ini :
/* Title and Entry */ .pTtl{font-size:1.0rem;

Baiklah sampai disini Proses modifikasi atau Cara Merubah Tampilan Homepage Fletro Pro Menjadi 3 Kolom Seperti Median UI sudah selesai silahkan kamu Klik Simpan dan kamu lihat Hasilnya.
Demikian Tutorial untuk Template Fletro pro, semoga bisa membantu dan jikan ada kendala atau pertanyaan apapun silahkan tulis di kolom komentar agar bisa kita bahas bersama.
Cara Merubah Tampilan Homepage Fletro Pro Menjadi 3 Kolom Seperti Median UI
Cara Merubah Tampilan Homepage Fletro Pro Menjadi 3 Kolom Seperti Median UI

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.