Google Blogger / Blogspot и создание пользовательских контейнеров для добавления виджета гаджета на страницу макета

Я новичок в Blogger.com интерфейс и настройка шаблонов с помощью этой платформы. Blogger кодируется с помощью XML, который мне знаком, но я не могу понять, как правильно кодировать в Blogger, чтобы разместить настраиваемый контейнер, который доступен на странице макета Blogger. Я хочу создать его максимально удобным для пользователя.

Все, что я пробовал, дает ошибки, когда я пытаюсь сохранить шаблон. Мне просто нужен общий толчок в правильном направлении.

1 4
blogger blogspot windows-desktop-gadgets

1 ответ:

Поместите этот код под "телом" в разделе, где вы хотите разместить контейнер: 

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

Затем над "/ b:skin " поместите: 

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

Чтобы разместить 2 контейнера рядом друг с другом: 

    <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;
}

Чтобы разместить 3 контейнера рядом с каждым: 

    <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