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

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

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

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

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

Для этого нам понадобиться зайти во вкладку шаблон, обязательно сделать резервное копирование и нажать на кнопку изменить 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 ...: