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

разделителиДоброго времени суток, дорогие мои читатели и гости . А не поговорить ли нам  о дизайне? О красивостях, которыми можно  разнообразить наши блоги. Уж что только мы не делаем для этого. Особенно, когда только начинаем блог обустраивать. И разговор сегодня пойдёт о разделителях. 

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




Не так давно я писала это сообщение, где была дана ссылка на сторонний сайт. Однако, совсем не сложно с помощью некоторых дополнений в шаблоне блога сделать разделительные линии. Без помощи посторонних сервисов. Чем сейчас и займёмся.

Сделать разделители между сообщениями. Пример.

разделители

Для этого нам понадобиться зайти во вкладку шаблон, обязательно сделать резервное копирование и нажать на кнопку изменить HTML. Найти в кодах вот такую строчку post {. Чтобы для начинающих не было затруднительно это сделать, предложу прочитать этот пост. Сразу после фигурной скобки вставляем следующий код.

background: url( http://s014.radikal.ru/i326/1409/bd/b15e3e002a9a.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}

В некоторых шаблонах строки post { можно не быть. В этом случае нам необходима строка ]]></b:skin>. Сразу над ней установить следующее.

div.date-outer {
background: url(адрес изображения);
background-repeat: no-repeat;
background-position: bottom center;
margin: .5em 0 1.5em;
padding-bottom: 2.5em;
}

В кодах синим цветом я выделили адрес изображения разделителя. Их в интернете достаточно много. Так что вставляйте какие нравятся..

Разделители между гаджетами. Пример.

разделители в блоге


Находим ту же строку ]]></b:skin> и вставляем вот такой код.

.sidebar .widget {
margin:0 0 1.5em;
padding:0 0 50px;
background-image: url(адрес вашего изображения );
background-position: bottom;
background-repeat: no-repeat; 
}

Разделители между комментариями. Пример.

разделители


Сейчас обращу ваше внимание на то, что кодов будет два. Один для линейных комментариев (в виде списка), другой для древовидных (с функцией ответить).

Для простых линейных. Код.

#comments-block .comment-footer {
background-image:url(адрес изображения);
background-repeat:no-repeat;
background-position:center bottom;
height: 50px;
}

Для древовидных. Код.

.comment-block {
background-image:url( адрес изображения);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
}
.comments .continue {
border-top: 0px solid #000;
}

Тот или другой код также устанавливаем выше ]]></b:skin>.

Могу предложить вам несколько своих разделителей. Вставляйте их в скобки в кодах. Думаю, что не стоит из блога делать Новогоднюю ёлку и везде устанавливать такие штучки. Но уж если очень хочется, то лучше уж одно и то же изображение разделительной линии.


http://s020.radikal.ru/i706/1409/60/4ccdc40e3563.gif


http://s014.radikal.ru/i326/1409/bd/b15e3e002a9a.gif


http://s010.radikal.ru/i312/1409/7e/338d5875dfae.gif

Вот и всё сегодня. Мне осталось пожелать вам всего хорошего и расстаться на некоторое время. Спасибо, что читаете мои шпаргалки.
Удачи всем нам.

Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

Введите Ваш email ...:


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

  1. Я когда блог создавала пользовалась такими красивыми разделителями и забыла про них совсем )))

    ОтветитьУдалить
    Ответы
    1. Аксинья, вот я и освежила твою девичью память.

      Удалить
  2. Пожалуй лучший разделитель, это кнопки соц. сетей)

    ОтветитьУдалить
  3. А зачем у тебя в конце каждого сообщения?

    ОтветитьУдалить
  4. Олеся, речь-то о разделителях между постами на главной, в комментах, а не в конце сообщения. Ты можешь представить даже в этом списке комментариев после каждого кнопки соц. сетей. или между каждым гаджетом.

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

Пользовательский поиск