Персональные шаблоны Blogger имеют оригинальные макеты и по этой причине их часто предпочитают официальным шаблонам Blogger. С последним вы можете реализовать целый ряд настроек, чтобы сделать их не только оригинальными, но и уникальными. Фактически, когда вы устанавливаете шаблон из Интернета, вы как правило, не единственные кто выбрал этот шаблон, в то время как, если мы сами модифицируем шаблон Blogger, мы можем добавить индивидуальный подход,который будет отличать его от всех остальных.
Довольно простое и очень востребованное изменение заключается в добавлении разделительного изображения между публикациями для отображения на главной странице, на страницах ярлыков и на страницах архива. Другое столь же тривиальное изменение заключается в добавлении линии или разделительного изображения между виджетами на боковой панели.
Разделять посты строкой или изображением
Для этой операции после сохранения шаблона перейдите в Тема> Изменить HTML и найдите блок кода, который контролирует внешний вид статей и обычно имеет класс .post-body. Он расположен в разделе <b:skin>, нам нужно будет нажать на черную стрелку слева, чтобы отобразить весь код. Используя Ctrl + F в шаблоне, найденный код выглядит следующим образом
.post-body { font-size: 110%; line-height: 1.4; position: relative;}
В старых шаьлонах уникальным селектором может быть .post, тогда как для шаблонов, загружаемых из Интернета, вы должны найти его самостоятельно, используя инструменты Inspect Chrome Element или Analyze Firefox Element. Чтобы добавить строку между постоми, мы интегрируем этот код
.post-body { font-size: 110%; line-height: 1.4; position: relative; border-bottom:3px double #036; }
с добавлением выделенной желтой линии, которую можно настроить в цветовых кодах и стиле рамки . Результат будет похож на этот. Линия разделения также будет видна в отдельных сообщениях в конце статьи.
Если вместо этого мы не хотим отображать эту строку в сообщениях, мы оставим код блока без изменений и добавим другой код чуть выше строки </head>
<b:if cond=’data:blog.pageType != "item"’><style>.post-body {border-bottom:4px double #369; }</style></b:if>
где строка настройки выделяется желтым цветом.
Как добавить разделение с помощью картинки
Вместо строки, вставленной с тегом border-bottom, вы можете показать изображение, которое нужно будет разместить в Веб-альбомах Фото, и для которого вам нужно будет получить прямой URL-адрес . Мы делаем так же, как и в предыдущем разделе. Однако вместо выделенной желтой линией нам придется вставить код фонового изображения, поэтому вместо простой линии нам придется вставить блок таким же образом. Если мы решим показать изображение только на главной странице или на страницах ярлыков или архива, мы будем использовать второй код, который будет вставлен в </head>, но изменен
<b:if cond=’data:blog.pageType != "item"’><style>.post-body {background: url(/wp-content/uploads/http://1.bp.blogspot.com/_JwD5r652h00/Sutu6mRBnpI/AAAAAAAAAN4/82pbOVmnl1Y/s1600/bloodrose.gif);background-repeat: no-repeat;background-position: bottom center;padding:80px;}</style></b:if>
После сохранения шаблона результат будет следующим
Вы также можете использовать анимированные изображения в GIF, как я делал на этапе тестирования. Вставленные изображения хороши тем, что они широкие и узкие . В следующей статье мы узнаем, как вставить строку или изображения деления между виджетами в заданном месте боковой панели.
