Layout editor compatible themes?


#1

Hello friends

I downloaded a theme from internet but it is going haywire in layout editor…

Kindly let me know how i can fix this? Any tips or guidelines?

Basically i am planning to design a theme that looks organized in layout editor.

Is it because of improper coding? Or because the theme that i downloaded does not use section tags properly? I guess the answer lies somewhere there!

Kindly guide!


#2

@Priyankeshu_Parihar

Just Search for a blogger theme with powerful admin panel or layout option. Most of themeforest theme support this feature. Else I have Pasted some code here to learn about layout design as i have designed for my theme. Please note that , this code look like ugly until you have specify relevant b:section for this theme.

<b:template-skin>
<![CDATA[
/* ADMIN PANEL Layout CSS */
#layout ul,body#layout div.section h4,#layout div.section h4,body#layout ul,body#layout .top-tab-widget-menu ul {display:none;}
#layout,#layout .widget-content,#layout .add_widget {border:none;}
#layout .add_widget a {color:#444;}
#layout a.editlink{background-color:#f86e7d;padding:4px 10px;color:#FFF!important}
#layout a.editlink:hover{background-color:#4285f4;text-decoration:none;padding:4px 10px;color:#FFF!important}
body#layout a:hover{background-color:#4285f4;text-decoration:none;padding:3px 6px;color:#FFF!important}
#layout:before {content:'Theme Verge';text-transform:uppercase;font-size:20px;color:#999;margin:0 0 20px 0;display:inline-block;font-weight:700;font-family:sans-serif;}
#layout #header-wrapper{min-height:0px;width:100%;margin:10px 0 0 0;}
#layout #header-wrapper #vheader1{background-color:#666;width:98%;margin:5px 10px;padding:5px 0px;}
body#layout #header-wrapper #vheader1:before{content:'';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:400;font-family:sans-serif}
#layout #header-wrapper #vheader1 #navigation1{background-color:#666;width:60%;padding-top:20px;float:left;}
body#layout #header-wrapper #vheader1 #navigation1:before{content:'Page List';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:400;font-family:sans-serif}
#layout #header-wrapper #vheader1 #social-nav{background-color:#666;width:40%;padding-top:20px;float:right;}
body#layout #header-wrapper #vheader1 #social-nav:before{content:'Social Links';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:400;font-family:sans-serif}
#layout #header-wrapper #header2{background-color:transparent;width:100%;margin:80px 0px 5px 0px;padding:5px 0px;}
body#layout #header-wrapper #header2:before{content:'';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:400;font-family:sans-serif}
#layout #header-wrapper #header3{background-color:#2FCDB4;width:98%;margin:90px 10px 0px 10px;padding:5px 0px;}
body#layout #header-wrapper #header3:before{content:'Navigation Menu';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:400;font-family:sans-serif}
#layout #header-wrapper #header4{background-color:#D49E99;width:98%;margin:5px 10px;padding:5px 0px;}
body#layout #header-wrapper #header4:before{content:'Latest News Ticker Widget';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #header-wrapper #header2 .header2-left{background-color:#4285f4;width:33%;float:left;margin:5px 0px 5px 10px;padding:10px 0px;}
body#layout #header-wrapper #header2 .header2-left:before{content:'Blog Title';font-size:15px;color:#fff;margin-bottom:5px;padding-bottom:0px;display:inline-block;font-weight:400;font-family:sans-serif}
#layout #header-wrapper #header2 .header2-right{background-color:#f86e7d;width:64%;float:right;margin:5px 5px 5px 0px;padding:10px 0px;}
body#layout #header-wrapper #header2 .header2-right:before{content:'Ad Slot 728 X 90';font-size:13px;color:#fff;margin-bottom:5px;padding-bottom:0px;display:inline-block;font-weight:400;font-family:sans-serif}
body#layout .header-wrapper {margin-top:0;}
body#layout #header-wrapper {min-height:0px;width:100%;}
#layout #content-wrapper{margin-top::20px;border-top:1px solid #ccc;}
#layout #content-wrapper:before {content:'Content Wrapper';text-transform:uppercase;font-size:16px;color:#aaa;margin:10px 0 10px 0;display:inline-block;font-weight:700;font-family:sans-serif;}
#layout #content-wrapper #adwr2{background-color:#f86e7d;width:98%;margin:5px 10px;padding:5px 0px;}
body#layout #content-wrapper #adwr2:before{content:'Ad Slot 970 X 90';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #content-wrapper #adwr3{background-color:#f86e7d;width:98%;margin:5px;padding:5px 0px;}
body#layout #content-wrapper #adwr3:before{content:'Above Post Area Ad Slot';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #content-wrapper #adwr4{background-color:#f86e7d;width:96%;margin:5px;padding:5px 0px;}
body#layout #content-wrapper #adwr4:before{content:'Sidebar Ad Slot';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #adwr5{background-color:#f86e7d;width:98%;margin:5px 10px;padding:5px 0px;}
body#layout #adwr5:before{content:'Ad Slot 970 X 90';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper{padding:20px 0;overflow:visible;background:#f9f9f9;border-top:1px solid #ccc;}
#layout #footer-wrapper .subfooter1{width:100%;margin:10px 5px;}
#layout #footer-wrapper .subfooter2{width:100%;margin:150px 5px;}
#layout #footer-wrapper .subfooter3{width:100%;margin:10px 5px;}
#layout #footer-wrapper .subfooter1 .subfooter-menu,#layout #footer-wrapper .subfooter2 .subfooter-menu,#layout #footer-wrapper .subfooter3 .subfooter-menu{width:30%;float:left;margin:5px 10px;}
#layout #footer-wrapper .subfooter1 .subfooter-menu .part1{background-color:#D49E99;width:100%;margin:5px;padding:5px;}
body#layout #footer-wrapper .subfooter1 .subfooter-menu .part1:before{content:'Featured Posts';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper .subfooter1 .subfooter-menu .part2{background-color:#D49E99;width:100%;margin:5px;padding:5px;}
body#layout #footer-wrapper .subfooter1 .subfooter-menu .part2:before{content:'Recent Posts';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper .subfooter1 .subfooter-menu .part3{background-color:#D49E99;width:100%;margin:5px;padding:5px;}
body#layout #footer-wrapper .subfooter1 .subfooter-menu .part3:before{content:'Random Posts';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper .subfooter2 .subfooter-menu .part4{background-color:#4285f4;width:100%;margin:5px;padding:5px;}
body#layout #footer-wrapper .subfooter2 .subfooter-menu .part4:before{content:'About US';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper .subfooter2 .subfooter-menu .part5{background-color:#4285f4;width:100%;margin:5px;padding:5px;}
body#layout #footer-wrapper .subfooter2 .subfooter-menu .part5:before{content:'Page Navigation';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper .subfooter2 .subfooter-menu .part6{background-color:#4285f4;width:100%;margin:5px;padding:5px;}
body#layout #footer-wrapper .subfooter2 .subfooter-menu .part6:before{content:'Subscribe Widget';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper .add_widget {background-color:#8b9898;border:none;}
#layout #footer-wrapper .add_widget a,#layout div#mag-wrapper .add_widget a,#layout div#mag-wrapper2 .add_widget a {color:#fff;}
#layout #footer-wrapper:before {content:'Footer Wrapper';text-transform:uppercase;font-size:16px;color:#aaa;margin:0 0 20px 0;display:inline-block;font-weight:700;font-family:sans-serif;}
#layout div#post-wrapper:before {content:'Post Wrapper';text-transform:uppercase;font-size:16px;color:#aaa;margin:0 0 20px 0;display:inline-block;font-weight:700;font-family:sans-serif;}
#layout #main-wrapper{width:70%;float:left}
#layout #sidebar-wrapper{width:30%;left:0;padding:0;float:right;margin-top:10px;}
#layout #sidebar-wrapper:before {content:'Sidebar Wrapper';text-transform:uppercase;font-size:16px;color:#aaa;margin:0 0 20px 0;display:inline-block;font-weight:700;font-family:sans-serif;}
#layout #sidebar-wrapper #sidebar1{background-color:#4285f4;width:96%;margin:15px 5px 5px 5px;padding:5px 0px;}
body#layout #sidebar-wrapper #sidebar1:before{content:'Sidebar 1';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #sidebar-wrapper #sidebar2{background-color:#4285f4;width:96%;margin:15px 5px 5px 5px;padding:5px 0px;}
body#layout #sidebar-wrapper #sidebar2:before{content:'Sidebar Tabbed Widget';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #sidebar-wrapper #sidebar3{background-color:#00d9ba;width:96%;margin:15px 5px 5px 5px;padding:5px 0px;}
body#layout #sidebar-wrapper #sidebar3:before{content:'Sidebar 2';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #sidebar-wrapper #sidebar4{background-color:#D49E99;width:96%;margin:15px 5px 5px 5px;padding:5px 0px;}
body#layout #sidebar-wrapper #sidebar4:before{content:'Sticky Sidebar Widget';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
iframe#editorframe,#editorframe {width:980px!important;;}
body#layout div#post-wrapper,body#layout #post-wrapper,#layout #post-wrapper {float:left;width:70%;}
body#layout div.section,#layout div.section{background-color:transparent;border:0;font-family:sans-serif;margin:0;overflow:visible;padding:0;position:relative}
body#layout #outer-wrapper, body#layout .post-inner, body#layout #wrapper, body#layout .post-inner {padding:0;}
body#layout #main{position:relative;background-color:#4285f4;padding:20px 10px!important;margin:15px 5px 15px;clear:both}
body#layout #main:before{content:'POST SECTION';font-size:16px;color:#fff;margin-bottom:10px;padding-bottom:5px;display:block;font-weight:700;font-family:sans-serif}
body#layout .add_widget {border:1px solid #ddd;}
body#layout #slider-wrapper {background-color:#31B573;padding:5px 0!important;margin:10px 5px 15px;}
body#layout #slider-wrapper:before{content:'Featured Post Widget';font-size:13px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:400;font-family:sans-serif}
]]>
</b:template-skin>

Wait for Some time, I will upload template structure with b:section.


#3

@Priyankeshu_Parihar

As i have promise, I am providing you the code of my theme that looks great in Layout Editor. I have developed it from scratch for my projects.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='3' class='v3' expr:dir='data:blog.languageDirection' lang='en' xml:lang='en' 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' xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'>
<head>
<title><data:blog.pageTitle/></title>
<!-- Important Meta Tags -->
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<b:template-skin>
<![CDATA[
/* ADMIN PANEL Layout CSS */
#layout ul,body#layout div.section h4,#layout div.section h4,body#layout ul,body#layout .top-tab-widget-menu ul {display:none;}
#layout,#layout .widget-content,#layout .add_widget {border:none;}
#layout .add_widget a {color:#444;}
#layout a.editlink{background-color:#f86e7d;padding:4px 10px;color:#FFF!important}
#layout a.editlink:hover{background-color:#4285f4;text-decoration:none;padding:4px 10px;color:#FFF!important}
body#layout a:hover{background-color:#4285f4;text-decoration:none;padding:3px 6px;color:#FFF!important}
#layout:before {content:'Demo Theme BY ROBIN SINGH';text-transform:uppercase;font-size:20px;color:#999;margin:0 0 20px 0;display:inline-block;font-weight:700;font-family:sans-serif;}
#layout #header-wrapper{min-height:0px;width:100%;margin:10px 0 0 0;}
#layout #header-wrapper #vheader1{background-color:#666;width:98%;margin:5px 10px;padding:5px 0px;}
body#layout #header-wrapper #vheader1:before{content:'';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:400;font-family:sans-serif}
#layout #header-wrapper #vheader1 #navigation1{background-color:#666;width:60%;padding-top:20px;float:left;}
body#layout #header-wrapper #vheader1 #navigation1:before{content:'Page List';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:400;font-family:sans-serif}
#layout #header-wrapper #vheader1 #social-nav{background-color:#666;width:40%;padding-top:20px;float:right;}
body#layout #header-wrapper #vheader1 #social-nav:before{content:'Social Links';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:400;font-family:sans-serif}
#layout #header-wrapper #header2{background-color:transparent;width:100%;margin:80px 0px 5px 0px;padding:5px 0px;}
body#layout #header-wrapper #header2:before{content:'';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:400;font-family:sans-serif}
#layout #header-wrapper #header3{background-color:#2FCDB4;width:98%;margin:90px 10px 0px 10px;padding:5px 0px;}
body#layout #header-wrapper #header3:before{content:'Navigation Menu';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:400;font-family:sans-serif}
#layout #header-wrapper #header4{background-color:#D49E99;width:98%;margin:5px 10px;padding:5px 0px;}
body#layout #header-wrapper #header4:before{content:'Latest News Ticker Widget';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #header-wrapper #header2 .header2-left{background-color:#4285f4;width:33%;float:left;margin:5px 0px 5px 10px;padding:10px 0px;}
body#layout #header-wrapper #header2 .header2-left:before{content:'Blog Title';font-size:15px;color:#fff;margin-bottom:5px;padding-bottom:0px;display:inline-block;font-weight:400;font-family:sans-serif}
#layout #header-wrapper #header2 .header2-right{background-color:#f86e7d;width:64%;float:right;margin:5px 5px 5px 0px;padding:10px 0px;}
body#layout #header-wrapper #header2 .header2-right:before{content:'Ad Slot 728 X 90';font-size:13px;color:#fff;margin-bottom:5px;padding-bottom:0px;display:inline-block;font-weight:400;font-family:sans-serif}
body#layout .header-wrapper {margin-top:0;}
body#layout #header-wrapper {min-height:0px;width:100%;}
#layout #content-wrapper{margin-top::20px;border-top:1px solid #ccc;}
#layout #content-wrapper:before {content:'Content Wrapper';text-transform:uppercase;font-size:16px;color:#aaa;margin:10px 0 10px 0;display:inline-block;font-weight:700;font-family:sans-serif;}
#layout #content-wrapper #adwr2{background-color:#f86e7d;width:98%;margin:5px 10px;padding:5px 0px;}
body#layout #content-wrapper #adwr2:before{content:'Ad Slot 970 X 90';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #content-wrapper #adwr3{background-color:#f86e7d;width:98%;margin:5px;padding:5px 0px;}
body#layout #content-wrapper #adwr3:before{content:'Above Post Area Ad Slot';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #content-wrapper #adwr4{background-color:#f86e7d;width:96%;margin:5px;padding:5px 0px;}
body#layout #content-wrapper #adwr4:before{content:'Sidebar Ad Slot';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #adwr5{background-color:#f86e7d;width:98%;margin:5px 10px;padding:5px 0px;}
body#layout #adwr5:before{content:'Ad Slot 970 X 90';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper{padding:20px 0;overflow:visible;background:#f9f9f9;border-top:1px solid #ccc;}
#layout #footer-wrapper .subfooter1{width:100%;margin:10px 5px;}
#layout #footer-wrapper .subfooter2{width:100%;margin:150px 5px;}
#layout #footer-wrapper .subfooter3{width:100%;margin:10px 5px;}
#layout #footer-wrapper .subfooter1 .subfooter-menu,#layout #footer-wrapper .subfooter2 .subfooter-menu,#layout #footer-wrapper .subfooter3 .subfooter-menu{width:30%;float:left;margin:5px 10px;}
#layout #footer-wrapper .subfooter1 .subfooter-menu .part1{background-color:#D49E99;width:100%;margin:5px;padding:5px;}
body#layout #footer-wrapper .subfooter1 .subfooter-menu .part1:before{content:'Featured Posts';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper .subfooter1 .subfooter-menu .part2{background-color:#D49E99;width:100%;margin:5px;padding:5px;}
body#layout #footer-wrapper .subfooter1 .subfooter-menu .part2:before{content:'Recent Posts';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper .subfooter1 .subfooter-menu .part3{background-color:#D49E99;width:100%;margin:5px;padding:5px;}
body#layout #footer-wrapper .subfooter1 .subfooter-menu .part3:before{content:'Random Posts';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper .subfooter2 .subfooter-menu .part4{background-color:#4285f4;width:100%;margin:5px;padding:5px;}
body#layout #footer-wrapper .subfooter2 .subfooter-menu .part4:before{content:'About US';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper .subfooter2 .subfooter-menu .part5{background-color:#4285f4;width:100%;margin:5px;padding:5px;}
body#layout #footer-wrapper .subfooter2 .subfooter-menu .part5:before{content:'Page Navigation';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper .subfooter2 .subfooter-menu .part6{background-color:#4285f4;width:100%;margin:5px;padding:5px;}
body#layout #footer-wrapper .subfooter2 .subfooter-menu .part6:before{content:'Subscribe Widget';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #footer-wrapper .add_widget {background-color:#8b9898;border:none;}
#layout #footer-wrapper .add_widget a,#layout div#mag-wrapper .add_widget a,#layout div#mag-wrapper2 .add_widget a {color:#fff;}
#layout #footer-wrapper:before {content:'Footer Wrapper';text-transform:uppercase;font-size:16px;color:#aaa;margin:0 0 20px 0;display:inline-block;font-weight:700;font-family:sans-serif;}
#layout div#post-wrapper:before {content:'Post Wrapper';text-transform:uppercase;font-size:16px;color:#aaa;margin:0 0 20px 0;display:inline-block;font-weight:700;font-family:sans-serif;}
#layout #main-wrapper{width:70%;float:left}
#layout #sidebar-wrapper{width:30%;left:0;padding:0;float:right;margin-top:10px;}
#layout #sidebar-wrapper:before {content:'Sidebar Wrapper';text-transform:uppercase;font-size:16px;color:#aaa;margin:0 0 20px 0;display:inline-block;font-weight:700;font-family:sans-serif;}
#layout #sidebar-wrapper #sidebar1{background-color:#4285f4;width:96%;margin:15px 5px 5px 5px;padding:5px 0px;}
body#layout #sidebar-wrapper #sidebar1:before{content:'Sidebar 1';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #sidebar-wrapper #sidebar2{background-color:#4285f4;width:96%;margin:15px 5px 5px 5px;padding:5px 0px;}
body#layout #sidebar-wrapper #sidebar2:before{content:'Sidebar Tabbed Widget';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #sidebar-wrapper #sidebar3{background-color:#00d9ba;width:96%;margin:15px 5px 5px 5px;padding:5px 0px;}
body#layout #sidebar-wrapper #sidebar3:before{content:'Sidebar 2';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
#layout #sidebar-wrapper #sidebar4{background-color:#D49E99;width:96%;margin:15px 5px 5px 5px;padding:5px 0px;}
body#layout #sidebar-wrapper #sidebar4:before{content:'Sticky Sidebar Widget';font-size:14px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:500;font-family:sans-serif}
iframe#editorframe,#editorframe {width:980px!important;;}
body#layout div#post-wrapper,body#layout #post-wrapper,#layout #post-wrapper {float:left;width:70%;}
body#layout div.section,#layout div.section{background-color:transparent;border:0;font-family:sans-serif;margin:0;overflow:visible;padding:0;position:relative}
body#layout #outer-wrapper, body#layout .post-inner, body#layout #wrapper, body#layout .post-inner {padding:0;}
body#layout #main{position:relative;background-color:#4285f4;padding:20px 10px!important;margin:15px 5px 15px;clear:both}
body#layout #main:before{content:'POST SECTION';font-size:16px;color:#fff;margin-bottom:10px;padding-bottom:5px;display:block;font-weight:700;font-family:sans-serif}
body#layout .add_widget {border:1px solid #ddd;}
body#layout #slider-wrapper {background-color:#31B573;padding:5px 0!important;margin:10px 5px 15px;}
body#layout #slider-wrapper:before{content:'Featured Post Widget';font-size:13px;color:#fff;margin-bottom:2px;padding-bottom:3px;display:inline-block;font-weight:400;font-family:sans-serif}
]]>
</b:template-skin>
<b:skin><![CDATA[/*
Version               -    1.0.0
Platform Supported    -    Blogger (BlogSpot)
Designer              -    Robin Singh
URL                   -    Syncboost
All rights are Strictly Reserved by Robin Singh
*/

/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

/* CSS HTML5 */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;display:block;}*{margin:0;padding:0;}html{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{background:transparent;}table{border-collapse:collapse;border-spacing:0;}
*/]]></b:skin>
<style type='text/css'>
/* General Style Goes Here */
</style>
</head>
<!-- <body> -->
<body itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<div id='outer-wrapper'>
<header id="header-wrapper" itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<div id="vheader1">
<nav id="navigation1" class="navigation1">
<b:section id='header1-section' maxwidgets='1' showaddelement='yes'>
</b:section>
</nav>
<div id="social-nav">
<b:section id='social-nav-section' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</div>
<div id='header2'>
<div class='header2-left'>
<b:section id='header2-section' maxwidgets='1' showaddelement='yes'>
  <b:widget id='Header1' locked='false' title='Demo Blog (Header)' type='Header'>
    <b:includable id='main'>

  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
        <div id='header-inner'>
          <div class='titlewrapper' style='background: transparent'>
            <h1 class='title' style='background: transparent; border-width: 0px'>
              <b:include name='title'/>
            </h1>
          </div>
          <b:include name='description'/>
        </div>
      <b:else/>
        <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height                      + &quot;_height: &quot; + data:height                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
          <div class='titlewrapper' style='background: transparent'>
            <h1 class='title' style='background: transparent; border-width: 0px'>
              <b:include name='title'/>
            </h1>
          </div>
          <b:include name='description'/>
        </div>
      </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
    <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
    <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
  </b:widget>
</b:section>
</div>
<div class='header2-right'>
<div id='adwr1'>
<b:section id='banner1' maxwidgets='1' showaddelement='yes'>
 </b:section>
</div>
</div>
</div>
<div id='header3'>
<nav id='navigation2' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<label id='toogle2'>&#8801; Menu</label>
<b:section id='header3-section' maxwidgets='1' showaddelement='yes'>
</b:section>
</nav>
</div>
<div id='header4'>      
<b:section id='header4-section' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</header>
<div class='clear'/>
<div id='content-wrapper'>
<div id='adwr2'>
<b:section id='banner2' maxwidgets='1' showaddelement='yes'>
  </b:section>
</div>
<div id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog'>
<b:if cond='data:blog.pageType == &quot;index&quot;'> 
<div id='slider-wrapper'>
<b:section id='slider-wrapper-s' maxwidgets='1' showaddelement='yes'/>
</div>
</b:if>
<div id='adwr3'>
<b:section id='banner3' maxwidgets='1' showaddelement='yes'>
  </b:section>
</div>
<b:section class='main' id='main' showaddelement='yes'>
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
  </b:widget>
</b:section>
</div>
<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
<div id='adwr4'>
<b:section id='banner4' maxwidgets='1' showaddelement='yes'>
  </b:section>
</div>
<div id="sidebar1">
<b:section id='sidebar1-section' showaddelement='yes'/>
</div>
<div id="sidebar2">
<div class='tabs tabs-1' id='sides'>
<b:section class='sides sides-1 section' id='sides-1' maxwidgets='1' showaddelement='yes'>
</b:section>
<b:section class='sides sides-2 section' id='sides-2' maxwidgets='1' showaddelement='yes'>
</b:section>
<b:section class='sides sides-3 section' id='sides-3' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</div>
<div id="sidebar3">
<b:section id='sidebar3-section' showaddelement='yes'/>
</div>
<div id="sidebar4">
<div id="sticky-widget">
<b:section id='sidebar4-section' maxwidgets='1' showaddelement='yes'/>
</div>
</div>
</aside>
<div class='clear'/>
</div>
<div class='clear'/>
<div id='adwr5'>
<b:section id='banner5' maxwidgets='1' showaddelement='yes'>
  </b:section>
</div>
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<div class="subfooter1">
<div class='subfooter-menu'>
<div class='part1'>
<b:section id='subfooter-menu1' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</div>
<div class='subfooter-menu'>
<div class='part2'>
<b:section id='subfooter-menu2' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</div>
<div class='subfooter-menu'>
<div class='part3'>
<b:section id='subfooter-menu3' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<div class="subfooter2">
<div class='subfooter-menu'>
<div class='part4'>
<b:section id='subfooter-menu4' maxwidgets='1' showaddelement='yes'>
</b:section>
<b:section id='subfooter-menu9' maxwidgets='1' showaddelement='yes'>
  </b:section>
</div>
</div>
<div class='subfooter-menu'>
<div class='part5'>
<b:section id='subfooter-menu5' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</div>
<div class='subfooter-menu' id='subfooter-subscribe'>
<div class='part6'>
<b:section id='subfooter-menu6' maxwidgets='1' showaddelement='yes'>
</b:section>
<b:section id='subfooter-menu7' maxwidgets='1' showaddelement='yes'>
</b:section>
<b:section id='subfooter-menu8' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<div class="subfooter3">
<div class='subfooter-credit'>
<div class='part7'>
</div>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>
</div>
</footer>
<div class='clear'/>
</div>
<div class='clear'/>
</body>
</html>

Now, Here is the answer of your questions.

  1. Define Layout in <b:template> tags. (Supported Upto HTML 4 plus version. Not Supported in HTML 5).
  2. Then Define <b:section> for each container in which you want add widgets, BLOG section.
  3. If you are developing in HTML5, then you can’t use background-color property (other limitations too). You can’t use <b:template> tags to define layout theme. You have to define layout without <b:template> tags.

Thanks