February 21, 2025

Blogger Layout Editor Styling Guide

styling

Widget section layout styling guide for Blogger layout editor.

To customize section layout in the Layout editor, you'll have to use inline style or  <b:skin>. Whichever you prefer, it's best to separate the template code for layout and for live view.

Allowed CSS Properties

That being said, if you want to start styling right away, here's a few known CSS properties that are allowed in layout mode:

  • 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>


**


Trivia:

When you're in the layout editor, Blogger will inject layout ID to the <body> tag which is handy for styling the layout view, for example:

body#layout { /* ... */ }


Open comments page