Google Blogger / Blogspot and creating custom containers for adding a gadget widget to a layout page

I am new to Blogger.com and customizing templates with this platform. Blogger is encoded using XML that is familiar, but I cannot figure out the correct encoding on Blogger to host the customized container available on the Blogger's Layout page. I want to make it as user friendly as possible.

Everything I tried gives errors when trying to save the template. I just need a generalized push in the right direction.

+4
source share
1 answer

Put this code under "body" in the section where you want to place the container:

<b:section class='type-of-widget-here-main-sidebar-etc' id='custom-id-for-styling' preferred='yes'/> 

Then above the location "/ b: skin":

  #custom-id-for-styling { width: 100%; margin-left: auto; margin-right: auto; padding:0px; } 

Place 2 containers next to each other:

  <b:section class='new-sidebar' id='magazine-left' showaddelement='yes'/> <b:section class='new-sidebar' id='magazine-right' showaddelement='yes'/> <div style='clear: both;'/> 

CSS

  #magazine-left { width: 45%; float: left; } #magazine-right { width: 45%; float: right; } 

Place 3 containers next to each other:

  <b:section class='main' id='container-left' showaddelement='yes'/> <b:section class='main' id='container-middle' showaddelement='yes'/> <b:section class='main' id='container-right' showaddelement='yes'/> <div style='clear: both;'/> 

CSS

  #container-left { width: 31.3%; float: left; margin-left: auto; margin-right: auto; padding:0px; } #container-middle { width: 31.3%; float: left; margin-left: auto; margin-right: auto; padding:0px; left:0px; right:0px; } #container-right { width: 31.3%; float: right; margin-left: auto; margin-right: auto; padding:0px; } 
+5
source

Source: https://habr.com/ru/post/1490555/


All Articles