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>.
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
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>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>When you're in the layout editor, Blogger will add the ID attribute to the <body> tag which is handy for styling the layout view, for example:
body#layout { /* ... */ }