Дизайн блога *Вставляем разделитель *

Решила я сегодня попробовать добавить в свой блог разделитель между записями :) Делаю и конспектирую.

1) Выбираем картинку, которая будет служить вам разделителем. Я буду вставлять вот такую:

2) Сперва  *для получения ссылки на картинку* нужно загрузить её в Picasa Web Albums.
Для этого заходи в настройки своего аккуранта. Выбираем ПРОДУКТЫ > Вэб-альбомы Picasa.
Открываем, какой ни то из своих альбомов и нажимаем Add Photos:

 

Далее жмём Select photos from your computer, в открывшемся окне выбираем свою картинку. Нажимаем ОК. Картинка добавилась :)

3) Теперь нам нужно получить ссылку на изображение. Для этого жмём правой кнопкой мыши по только что добавленной картинке. В открывшемся контекстном меню выбираем Свойства.

Нам нужен Aдрес (URL). Он будет длинным, поэтому внимательно выделяем его полностью и куда-нить себе копируем (например, в блокнот).

У меня адрес получился вот такой:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb7b5Z4cP__XZufDiiV1YwuS1V5xueJhs6g4tET7T3kyCCdAtEZXcRhFidq-awnEUgclqJVfA6nbwt_NuMEu3adu-KI7X0G8WM9ruGsyTX-4AbcgOFYwJPuxBkka9b9JxYjcja2aenyVw/h120/%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9-1.gif

 

 

 

4)  Теперь самое интересное - добавим, наконец - таки разделитель в свой блог :)

Лезем в настройки блога, нас интересует вкладка Шаблон.

 

Обязательно делаем Резервную копию! Как её сделать рассказывала здесь в пункте 1.

 

 Сделав резервную копию,  жмем кнопочку Изменить HTML. В окне предупреждения - Пропустить.

Ставим галочку Расширить шаблоны виджета (1) и ищем  при помощи поиска (2) код    .post . По тексту он будет встречаться несколько раз, нам нужно место, где после будет идти  что-то вроде (3)

{
  margin: 0 0 $(post.margin.bottom) 0;
}

 

 

 

 

 

Теперь перед последней фигурной скобкой } вставляем код:

background: url(Адрес вашей картинки);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;

 

У меня получилось вот так:

 

 



Сохраняем Шаблон и смотрим.

Если у вас, как у меня - разделитель залез на параметры сообщения :

 

вам необходимо увеличить значение параметра padding-bottom, подберите его в соответствии с размерами вашей картинки.
Мне пришлось увеличить значение до 11.5

 

Вот, собственно говоря, и вся наука :) Удачных вам свершений!