четверг, 20 сентября 2012 г.

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

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

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


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

 
Далее жмём Select photos from your computer, в открывшемся окне выбираем свою картинку. Нажимаем ОК. Картинка добавилась :)
3) Теперь нам нужно получить ссылку на изображение. Для этого жмём правой кнопкой мыши по только что добавленной картинке. В открывшемся контекстном меню выбираем Свойства.
Нам нужен Aдрес (URL). Он будет длинным, поэтому внимательно выделяем его полностью и куда-нить себе копируем (например, в блокнот).
У меня адрес получился вот такой:
 
 
 
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
 
Вот, собственно говоря, и вся наука :) Удачных вам свершений!
 

12 комментариев:

  1. полезная инфа, особенно для тех кто начинает. а я закончила дизайн своего блога уже на начальной стадии)))

    ОтветитьУдалить
    Ответы
    1. это что за намёк на самоиронию ))) у тя всё чин по чину ни прибавить ни убавить

      Удалить
  2. Насть, респект! Самоучкой никогда бы не додумалась - хорошо, что эксперты блоговедения встречаются )))

    ОтветитьУдалить
    Ответы
    1. да какой уж я эксперт, я только когда озадачилась с твоим блогом, только тогда и начала изучение вопроса :)))) там погуглил, тут попробовал, что-то да получилось :)))

      Удалить
  3. Насть, молодец!!!! Я конечно попробую, но обязательно накосячу))))

    ОтветитьУдалить
    Ответы
    1. Оля, не боись. Если что - спрашивай. Если очень боязно,но оч. хочется, дашь мне явки и пароли. я тебе добавлю.

      Удалить
  4. Не прошло и года, как я все-таки вставила этот разделитель :)

    ОтветитьУдалить
    Ответы
    1. Совсем и не год :) тем более у тебя есть уважительная причина - ты в отпуске была! Вроде хорошо смотрится, сама как думаешь?

      Удалить
    2. Смотрится сногсшибательно :) а год почти прошел с моего коммента о том, что я собиралась вставлять разделитель :)))))))

      Удалить
    3. не внимательная я однако :)))))

      Удалить
  5. А для меня это пока потёмки )), ну надеюсь когда-нибудь сяду и СДЕЛАЮ!

    ОтветитьУдалить

Если у вас нет блога или своей страницы, но вы не хотите быть анонимным, выберите в списке «Название/URL» и напишите своё имя, можно и без URL.

Related Posts Plugin for WordPress, Blogger...