Como ver lista de posts compacta no novo Blogger

Depois de anos esquecido, a Google decidiu reformular a sua plataforma de blogs Blogger, e o resultado foi bastante infeliz. Felizmente, é possível minimizar as atrocidades cometidas e recuperar um pouco da sanidade com um pouco de CSS modificado.

Existe uma lista infindável de bugs e funcionalidades em falta no novo interface do Blogger, que nos faz interrogar como é que alguém poderá ter decidido que estava pronto para substituir o sistema antigo. No entanto, uma das coisas mais criticadas e mais irritantes, é a forma como a lista de posts passou a ser apresentada, passando de um formato de lista para um formato de "cartões", que desperdiça imenso espaço e impede a fácil visualização dos posts por data.

Mesmo em ecrã completo, o novo interface só deixa ver algo como 9 posts (e passando de um sistema de páginas para um absurdo sistema de scrolling infinito, que torna impossível chegar a posts de há anos atrás). Mas felizmente, com a ajuda de um CSS modificado, é possível aproximá-lo do que se tinha no Blogger antigo, passando a algo como isto:

Para isso, temos que recorrer a uma extensão como o Stylebot para o Chrome, que pode aplicar estilos CSS personalizados a qualquer página, e de seguida adicionar as seguintes regras, ligeiramente modificadas a partir do modelo base disponível no GitHub, para o site blogger.com.

/* New Blogger Version 0.951 aadm */

/* Post Editor Label Box */
.KHxj8b {
color: blue;
font-size:14px;
line-height: 20px;
/* height: 132px !important; */
}

/* Draft Label Colour and Size */
.haXJ6e .htI7vb {
color: #7a7;
font-size: 12px;
}

/* Published Label Colour and Size */
.gRzh8c.NY7gZe {
display: none;
}

/*.NY7gZe {
color: #333;
font-size: 12px;
}*/

/* font title bolder and smaller */
.haXJ6e .UHwcef {
font-size: 14px;
font-weight: 450;
}

/* Label stuff. Not 100% sure*/
.haXJ6e .qtvRHc {
padding: 0px 0px;
font-size: 11px;
text-align: center;
}

.haXJ6e .NY7gZe {
font-size: 12px;
}

/* Set Scheduled Color */
.UNTnVe {
color: rgb(240, 137, 0);
font-size: 12px;
}

.uZsIBe {
display: inline-flex;
flex-wrap: wrap;
margin-left: 0px;
margin-right: 0px;
}

/* Label borders and alignment */
.qtvRHc {
border: 0px solid #b0bec5;
border-radius: 0px;
text-align: left;
color:#2196f3;
}


/* Outer Div for Label List on dashboard */
.Q0PqBe {
flex: auto;
overflow: hidden;
margin-left: 10px;
line-height: 1;
margin-top: -12px !important;
display: block;
position: relative;
left: -150px;
}


/* Author Name */
.GLDMfb.UHwcef {
font-size: 11px !important;
color: rgb(131, 131, 141);
font-weight: 200;
}

/* Remove Comment Count */
.jLK47 {
display: none;
}

/* Remove View Counter Icon */
.rtpUCe.JB36v {
font-size: 18px;
display: none;
}

/* View Counter Size and Color */
span.dYZApe.NY7gZe {
font-size: 11px;
color: cadetblue;
}

/* Remove Profile Icon */
.qlgjDe {
display: none;
}

/* Reduces the gap between post and inner padding*/
.oqIa7e {
margin: 0 0 -6px 0;
padding: 0px;
}

/* Change the backgroun color to match the row hover color */
.oqIa7e:focus-within .FeZNBc, .oqIa7e:hover .FeZNBc {
background-image: none;
background-color: aliceblue;
}

/* Editing Tools better padding and align flush to the right */
.FeZNBc {
padding-top: 6px;
right: 0px;
top: 8px;
}

/* Change from box lines around a row to just top */
.vOSR6b {
background-color: #fff;
border-top: 1px solid #e9f0f3;
border-radius: 0px;
box-shadow: none;
border-left: 0px;
border-right: 0px;
}

/* Highlight the hovered row */
.vOSR6b:hover {
background-color: aliceblue;
border-top: 1px solid #e9f0f3;
border-left: 0px;
border-right: 0px;
border-radius: 0px;
}

/* Remove .separator between scheduled text and date */
span.wPZNb {
display: none;
}

/* Reduce size of hover over tools and color to black */
.DPvwYc {
font-size: 16px;
color: black;
}

/* Edit Form Label Row Padding and font size */
.OGidW {
padding: 8px 4px !important;
font-size: 16px;
}


/* Increase the Width of the Sidebar in Edit Mode */
.vW7mGd {
width: 320px;
}


/* Increase the padding of the Editor Content */
.fmzcZd {
padding-right: 340px;
}


/* Move scheduled over - hard coded */
.ngYWic {
/* align-self: center; */
flex: 0 0 auto;
position: relative;
right: -85%;
width: 140px;
}


/* Remove rounded on thumbnails */
.sRb2Nc.DMO9ie {
border-radius: 0px;
}


/* Reduce the main dashboard container padding and margins */
.n8rJwb {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
margin-left: 0px;
margin-right: 0px;
max-width: 100%;
}


/* Row Select Tick Box */
.PPvste {
left: -15px;
}


/* Remove Thumbnail */
.jn15V {
display: none;
}


/* Reduce the row left pad */
.VSOPnd {
padding-left: 6px;
}


/* Moves the post title closer to the horizontal row separator */
.Bv5FY {
margin-top: -6px;
}


/* Select All Left Aligned */
.HJyrF {
display: flex;
height: 48px;
justify-content: flex-start;
}
/* Unopened Labels Text */
.dLSeoc {
color: cornflowerblue;
font-style: normal; }


Esta alteração não corrige todos os problemas com o novo interface do Blogger, sendo extremamente frustrante que, em vez de um novo interface que simplifica a vida aos utilizadores, se tenha um que os obriga a perder ainda mais tempo à custa de coisas básicas incompreensíveis (um exemplo: a função de autocomplete das labels a aplicar aos artigos encravava o browser por dezenas de segundos ao se escrever cada letra, no caso de blogs com muitos milhares de labels - a solução deles foi desactivar o autocomplete para blogs com mais de 10 mil labels; o que agora impede que se saiba se está a usar uma label já existente, ou fomentando erros devido a qualquer deslize na escrita). Mas pelo menos, já permite minimizar o incómodo de um novo ecrã principal praticamente inútil, que optou por ignorar todos os que usam o blogger num computador desktop.