Implementing a separation of layout for layout editor and live blog design.
Looking at the official Blogger theme (Contempo, etc.), the blog layout that you see in the layout editor shares the same HTML and CSS with the live blog.
Note: There are 2 ways to apply styling in layout editor: inline CSS and <b:skin>.
Allowed CSS Properties
There's a limited number of allowed CSS properties that you can use for layout editor. Few that I know:
width
max-width
display
margin
float
background
Template Code Separation
What's in the layout editor is not always displayed on the live blog. So, separating the layout for both makes it less complicated to maintain.
In the following snippet, the layout editor view only has an inline style to arrange the layout while the live view has several classes for styling background, padding, etc:
<b:if cond='data:view.isLayoutMode'>
<!-- # layout editor view -->
<div style='display:flex;'>
<b:include name='section:Sidebar' />
<b:include name='section:Main' />
</div>
<b:else />
<!-- # live view -->
<div class='container bg-sky px-2 m-auto'>
<b:include name='section:Sidebar' />
<b:include name='section:Main' />
</div>
</b:if>Default Markups
Now, all we need to do is create a section as a Common default markup. This makes it possible to include the section in both layout view and live view.
<b:defaultmarkups>
<b:defaultmarkup type='Common'>
<b:includable id='section:Main'>
<b:section id='Main'></b:section>
</b:includable>
<b:includable id='section:Sidebar'>
<b:section id='Sidebar'></b:section>
</b:includable>
</b:defaultmarkup>
</b:defaultmarkups>Appendix
When you're in the layout editor, Blogger will add ID attribute to the <body> tag which is handy for styling the layout view, for example:
body#layout { /* ... */ }