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 */
/* 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)}}
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
Harga : *Belum termasuk Ongkos kirim