How to get old-style compact view on the new Blogger interface

Google has decided to finally revamp its nearly forgotten Blogger interface, but sadly the result is far from perfect. Thankfully, there's a way to make it look a lot more like the previous Blogger, with the help of some tweaked CSS.

Though there are a lot of bugs, missing features, and assorted annoyances, related to the new blogger interface (truth be told, the blogger team is doing its best to fix most of the issues), the first and most annoying thing blogger users notice is the new, dreaded, post list that went from being a list to a "card view" that wastes lots of space.

Even on full-screen, you'll likely get under 10 posts visible on the list, which isn't nearly enough for higher volume blogs and, worse of all, it makes a lot harder to have a sense of the posts dates, published / scheduled status, etc. But with the help of some tweaked CSS, you can get it to look like this:

For that we need to use a browser extension than can apply new CSS rules to existing pages, like Stylebot for Chrome. And after installing it you just need to add the following rule set, slightly modified from this one available on GitHub, for the blogger.com site.

/* 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; }


Sure, it doesn't fix evereything, lie all the new editor bugs and quirks; but at least it makes the Blogger blogs main screen manageable once again. I still hope the new Blogger will eventually offer an official compact view, but until then, desktop users hoping to mimick the old blogger look, can resort to this technique to get it right away.