Live Theme Editor

Edit the Blogger XML on the left and see your changes rendered live on the right. This is a simulation and doesn't process dynamic Blogger data tags.

Theme.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<body>
  <div class='container'>
  
    
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='My News Blog' type='Header'>
        <b:includable id='main'>
          <div class='header-widget'>
            <h1 class='title'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
            <p class='description'>A sample description for the blog</p>
          </div>
        </b:includable>
      </b:widget>
    </b:section>
    
    <div class='content-wrapper'>
    
      
      <div class='main-content'>
        <b:section class='main' id='main' showaddelement='no'>
          <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
            <b:includable id='main'>
              
              <div class='post'>
                <div class='post-content'>
                  <h2 class='post-title'><a href='#'>Your Post Title Goes Here</a></h2>
                  <div class='post-meta'>By John Doe | September 1, 2023</div>
                  <div class='post-snippet'>This is a sample post snippet. Your actual post content will be rendered here. Edit the XML on the left to see how it affects the layout and styling.</div>
                  <a href='#' class='read-more'>Read More</a>
                </div>
              </div>
              <div class='post'>
                <div class='post-thumbnail'>
                    <img src="https://picsum.photos/id/1015/720/405" alt="Sample thumbnail"/>
                </div>
                <div class='post-content'>
                  <h2 class='post-title'><a href='#'>Another Post With an Image</a></h2>
                  <div class='post-meta'>By Jane Smith | August 28, 2023</div>
                  <div class='post-snippet'>This post includes a sample thumbnail. The real theme uses Blogger's data tags to dynamically fetch post images.</div>
                  <a href='#' class='read-more'>Read More</a>
                </div>
              </div>

</b:includable>
          </b:widget>
        </b:section>
      </div>
      
      
      <div class='sidebar-content'>
        <b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
          <b:widget id='Label1' locked='false' title='Categories' type='Label'>
            <b:includable id='main'>
              <div class='widget'>
                <h2 class='title'><data:widget.title/></h2>
                <ul>
                  <li><a href='#'>Technology (5)</a></li>
                  <li><a href='#'>Tutorials (3)</a></li>
                  <li><a href='#'>Reviews (7)</a></li>
                </ul>
              </div>
            </b:includable>
          </b:widget>
          <b:widget id='HTML1' locked='false' title='About' type='HTML'>
            <b:includable id='main'>
              <div class='widget'>
                <h2 class='title'><data:widget.title/></h2>
                <div class='widget-content'>
                  This is a sample "About Me" widget. You can add any HTML content here.
                </div>
              </div>
            </b:includable>
          </b:widget>
        </b:section>
      </div>
      
    </div>
    
  </div>
</body>
</html>

Live Preview

Live Editor is Desktop Only

To provide the best experience with a side-by-side code editor and preview, this feature is only available on larger screens. Please switch to a desktop or tablet in landscape mode.