В предыдущем посте мы увидели, как мы можем разделить посты 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(/wp-content/uploads/https://lh3.googleusercontent.com/-oc1TIduyvF4/Vw5WHH2bjoI/AAAAAAAA1K0/e_62npO_mOQb8WLCVewhJKYZWeMbFD__gCCo/s575-Ic42/bar48.gifpadding-bottom:30px; border:0; }
с URL изображения, которое будет выбрано по желанию. Результат выглядит следующим образом
Кроме того, можно настроить с разделением изображением на один виджет, определив ID. В этом случае второй код получается таким
#BlogList1 {background: url(/wp-content/uploads/https://lh3.googleusercontent.com/-xxzZ3sh6PcI/Vw5WEzh67eI/AAAAAAAA1K0/G6_mQHNd-3Y6H3Qlz5ZuNrt5jaKTz5BYgCCo/s580-Ic42/bar47.gifbackground-position: top center; padding-top:20px; }
с идентификатором фиолетового цвета, и URL изображения окрашены в красный цвет, чтобы их настроить.
Если вы хотите добавить изображение внизу виджета, вы заменяете две верхние строки на нижнюю . Вы также можете установить расстояние сверху и / или снизу . Если вы хотите добавить разделяющие изображения сверху и снизу, лучше добавить два блока.
