How To Prepare body Section in blogger using bootstrap

December 06, 2020

How To Prepare `<body>` Section

There are 2 things we need to know before we start to re-style <body> section. First, <body> section must have at least one <b:section> and <macro:includable id='sections' var='col'>. If we delete the entire contents of the <body> section or the section does not contain any <b:section> and/or <macro:includable id='sections' var='col'>, our theme will not function. The blogger engine will inform us about the mistake and it will not allow us to save the changes we make to the <body> section.

Second, a ready-made blogger theme contains pre-setting core template <div> tags in the <body> section, which we need to delete. These pre-setting core template <div> tags will create additional spaces to widgets on our template, which we are not able to modify or change unless we delete the entire html elements of the pre-setting core template <div> tags from the <body> section.

<body>
   ...
   <!-- Example of Pre-setting Core Template <div> Tags -->
   <div class='fauxcolumns-left header-fauxborder-left'>
   <div class='fauxcolumns-right header-fauxborder-right/'>
      <div class='region-inner header-inners'>
   <!-- End of Pre-setting Core Template <div> Tags Example -->
         <!-- Example of Collapsed </b:section> -->
            <b:section class='main' id='main' name='Main' showaddelement='no'>.....</b:section>
         <!-- End of Collapsed </b:section> Example -->         
      </div>
   </div>
      <!-- Example of Pre-setting Core Template <div> Tags -->
      <div class='header-cap-bottom cap-bottom'>
         <div class='cap-left/'>
         <div class='cap-right/'>
      </div>
   </div>
      <!-- End of Pre-setting Core Template <div> Tag Examples -->
         ...
<body>

How to remove pre-setting core template `<div>` tags

The process to remove pre-setting core template <div> tags can be tricky and confusing if you go through the entire html elements within <body> section to identify and remove these tags and their </div> end tags. We suggest that you use the following method to simplify this process.

Identify the required <b:section>s and <macro:includable id='sections' var='col'> in the <body> tag.
Collapse or minimize the required <b:section>s in order to avoid from deleting the contents of these <b:section>s.
Example: <b:section class='main' id='main' name='Main' >.....</b:section>
Any <div>: tags and the closing </div>: tags outside the required <b:section>s should be deleted accordingly.

List of The Required `<b:section>`s

The <b:section>s listed below are meant for a basic reference to design Blogger with Bootstrap 4. You can insert or remove <b:section>s to meet your design preferences.

HTML
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2'...>
   <head.>...</head>
   <body expr:class='"loading" + data:blog.mobileClass'>
      <b:if cond='data:blog.pageType == "index"'>
         <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>...</div>
      </b:if>
      <b:section class='main' id='main' name='Main' showaddelement='no'>
         <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>...</b:widget>
      </b:section>
      <b:section class='sidebar' id='sidebar' preferred='yes' style=''>
         <b:widget id='HTML1' locked='false' title=''>...</b:widget>
         <b:widget id='HTML2' locked='false' title=''>...</b:widget>   
         <b:widget id='HTML3' locked='false' title=''>...</b:widget>
      </b:section>
      <footer id='footer'>
         <macro:include id='footer-sections' name='sections'>...</macro:include>
            ...
      </footer>
      <macro:includable id='sections' var='col'>...</macro:includable>
      <b:section-contents id='footer-1'>...</b:section-contents>
   </body>
</html>

Please be informed that the above <b:section>s do not have any content. Hence you should not copy and paste these <b:section>s to your template.

Search This Blog

Blogger Codes