Как разделить виджеты Blogger с помощью линий или изображений.

В предыдущем посте мы увидели, как мы можем разделить посты Blogger с добавлением линий или изображений и как и обещали мы увидим, как точно так же настроить виджеты боковой панели. Аналогично тому, что вы делаете для публикаций, вы можете добавлять строки с тегом border или изображения с background тегом после публикации их в Веб-альбомах Google Фото.

Разделить виджеты с помощью линий или изображений

Виджеты могут быть размещены на боковой панели слева или справа от основной области или области публикации . Прежде чем продолжить, вы должны найти уникальный селектор рассматриваемой боковой панели с помощью инструментов Inspect Chrome Element или Analyze Firefox Element. В официальных моделях Blogger эти селекторы имеют вид .column-right-external для правого и .column-left-external для левого.

Как добавить строку разделяющая виджеты

После сохранения шаблона перейдите в Тема> Изменить HTML и нажмите на стрелку слева от раздела <b:skin>, который находится вокруг 10-20-й строки . Вы увидите весь код в разделе. Помогите нам с помощью Ctrl+F для поиска строки ]]></b:skin> и сразу же вставьте код, подобный следующему

.column-right-outer .widget, .column-left-outer .widget { border-bottom:4px double #940F04; padding-bottom:20px; }

в котором были вставлены селекторы обеих боковых панелей, разделенных запятой. Цветовые коды и стиль границы, настраиваемы и были вставлены только внизу с тегом border-bottom. Вы также можете установить расстояние до края от остальной части макета с помощью тега padding-bottom. После сохранения шаблона боковая панель изменит внешний вид таким образом

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

В тесте я сделал виджет имеет идентификатор BlogArchive1, но это может быть HTML12 или Label1 и т. Д. Идентификатор является последней частью URL-адреса после строки widgetid =. Чтобы вставить разделительные линии сверху и снизу, над строкой ]]></b:skin> вставьте этот код

#CustomSearch1 {border-top:4px double #940F04;border-bottom:4px double #940F04;padding-top:20px;padding-bottom:20px; }

где идентификатор  и ID функции виджета иыделены в фиолетовый цвет. Линии выделены желтым цветом, используются, чтобы вставить разделительную линию в верхней части, помеченные зеленым цветом, чтобы вставить в нижней части.

Как добавить изображение разделяющая виджеты

Вместо границы вы можете вставить разделяющее изображение, как показано ниже

Оно использует тот же механизм , и тот же код как и для строк . Её должна быть заменена только строка с тегом border-bottom. Так например, первый код получается

.column-right-outer .widget, .column-left-outer .widget { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGFi2FZ6JuoineXDT0aLGuWviWx_8N3_aY72wiZN4vgL1FEt0zNLBJliMJ7P9cJ9PycXOSuhBmnv39AyVQ6XxJB8mNe0W1wC3vZIcCAtYGZz1P5Dm3zDbvNJXDGpuqDJSWXlDod1BkyvQ/s575-Ic42/bar48.gif)no-repeat 50% 100%; padding-bottom:30px; border:0; }

с URL изображения, которое будет выбрано по желанию. Результат выглядит следующим образом

Кроме того, можно настроить с разделением изображением  на один виджет, определив ID. В этом случае второй код получается таким

#BlogList1 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNo924zaM1LsSXAnaLN191zX0e87t02mTS7R4N1XBWPMeQVRK19gUkWoJJjHThciswcV51khWAWOg_TIe74za8lJGFKf3vDVpufbEJhbuvQ2tFGiF48EVspT1e6gUPB2Su5pnKiMuIEOo/s580-Ic42/bar47.gif)no-repeat 50% 100%; background-position: top center; padding-top:20px; }

с идентификатором фиолетового цвета, и URL изображения окрашены в красный цвет, чтобы их настроить.

Если вы хотите добавить изображение внизу виджета, вы заменяете две верхние строки на нижнюю . Вы также можете установить расстояние сверху и / или снизу . Если вы хотите добавить разделяющие изображения сверху и снизу, лучше добавить два блока.