Mengembalikan Tampilan Artikel pada Versi Mobile

Note: pada pembaruan terbaru artikel ini sudah tidak relevan karena sudah disediakan mode List/Grid yang bisa anda ubah dengan mudah

Source: Feshto.blogspot.com

Pada kasus ini, beberapa orang mungkin lebih menyukai tampilan list pada artikel di versi mobile ketimbang grid seperti pada versi sebelum update (v1.26). Selain lebih hemat ruang, tampilan list juga sangat cocok untuk blog media karena lebih memudahkan pembaca untuk mencari judul artikel yang mereka inginkan.

Jika Anda ingin mencoba mengembalikan tampilan artikel pada mobile silahkan tambahkan beberapa baris kode CSS dibawah ini.

Catatan:
Semua kode CSS dibawah ini harus ditambahkan pada kumpulan kode @media screen and (max-width:480px){...} agar supaya tidak mempengaruhi tampilan desktopnya.

Untuk memudahkan Anda menempatkan kodenya, carilah @media screen and (max-width:480px){ hanya ada satu kode tersebut dalam CSS template ini. Anda akan menemukan contoh kode seperti dibawah ini:

@media screen and (max-width:480px){
...
...
...
...
.FeaturedPost .item-content{padding:0 5px 8px;width:100%}

Tambahkan beberapa baris kode CSS ini tepat dibawahnya, sehingga kodenya kurang lebih menjadi seperti dibawah:

@media screen and (max-width:480px){
...
...
...
...
.FeaturedPost .item-content{padding:0 5px 8px;width:100%}

.multipleItem .Blog article{width:100%;display:flex;align-items:center;flex-direction:row-reverse;padding:8px;margin:0 0 12px}
.multipleItem .Blog article:nth-of-type(3n){margin-right:0}
.multipleItem .Blog article .post-thumbnail{flex-shrink:0;width:90px;margin:0 0 0 15px}
.multipleItem .Blog article .post-thumbnail a{padding-top:100%}
.multipleItem .Blog article .post-content{flex-grow:1;padding-left:5px}
.multipleItem .Blog article .post-title{font-weight:400}
.nav-menu:checked + .mainWrapper .mainIner.multipleItem .Blog article{width:100%;margin-right:0}
.nav-menu:checked + .mainWrapper .mainIner.multipleItem .Blog article:nth-of-type(3n){margin-right:0}

Simpan template Anda, untuk melihat perubahannya bukalah blog Anda pada Smartphone.

Blogger Tutorial