О том и о сём -про блоги: Разделитель сообщений для блога .Йёжа Йежов

четверг, 18 октября 2012 г.

Разделитель сообщений для блога .Йёжа Йежов

Разделитель сообщений для блога .Йёжа Йежов

Иногда в некоторых шаблонах ,нет чёткого разделения между статьями .Пример-данный блог .Когда просматриваешь много сообщений данного раздела ,удобнее ,чтобы визуально они всё-таки делились .Да и эстетичнее смотрится намного лучше .и удобнее что-то отыскать .Хотя для удобства лучше

Карта блога ,она же Содержание

Но так или иначе решили поставить разделитель .В данном случае -это такая картинка ,с помощью которой будем отделять статьи.В интернете их много .На любой вкус и цвет ! Поскольку ,я человек ленивый ,то мы вставим картинку один раз в шаблон .Единственный недостаток нельзя будет к разным статьям -разные разделители.Вернее можно вставить и прямо в сообщение .но два разделителя будет громоздко .при условии .что один у вас в шаблоне уже есть.

Итак первое ,что делаем это

СОХРАНЯЕМ БЛОГ на комп , то есть делаем БЭКАП .

Чтобы не было потом мучительно больно за эксперименты.

Приступим Варианты взяты ЗДЕСЬ и ЗДЕСЬ

Идём в Шаблон -Изменить HTML-Приступить-ставим галочку Расширить шаблоны виджета

С помощью кнопок на клавиатуре Ctrl+F находим

.post {

У меня правда в чистом виде не нашлось ,чуть позже скажу что сделал я.

Возможно есть такой код

.post {

margin:.5em 0 1.5em;

border-bottom:1px dotted $bordercolor;

padding-bottom:1.5em;

}

После скобки { добавим

background: url(Адрес вашей картинки);

background-repeat: no-repeat;

background-position: bottom center;

margin:.5em 0 1.5em;

padding-bottom:1.5em;

получаем примерно следующее

.post {

background: url(Адрес вашей картинки);

background-repeat: no-repeat;

background-position: bottom center;

margin:.5em 0 1.5em;

padding-bottom:1.5em;

}

Вставляем вместо Адрес вашей картинки свою ссылку на картинку
Если картинка разделителя залазит на последнюю строчку вашей статьи то необходимо увеличить последнее значение (2.5) например на 3.5 и тд.
У меня эти варианты не получились , поскольку не нашёл .post {
Я сделал проще .
Шаблон -Изменить HTML-Приступить-ставим галочку Расширить шаблоны виджета

С помощью кнопок на клавиатуре Ctrl+F

Нашёл в шаблоне

/* Comments
----------------------------------------------- */

И вставил прямо перед ним наш код

.post {

background: url(Адрес вашей картинки);

background-repeat: no-repeat;

background-position: bottom center;

margin:.5em 0 1.5em;

padding-bottom:1.5em;

}

И как ни странно всё получилось!

Некоторые разделители для вставки в блог

URL-адрес:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGftDDpods7bcZzPER6IJa2Skv4N577_bkecnSRB2zKR8hl5ttcAhw33dHt2XKoiAhP5fgtw5hIzUEFwmiUQ6DY0hv9rSW_jU-E4lKF1pVebcR7NMyE96tjMTbMZerkPjg7vrwt5ZL_dYg/s1600/ribbon.gif

URL-адрес:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uy7jzRMkHYbGF5_N7INmMNz9u9xdIoimlkRlKyx9FlGmEZu-teSrkCl1E9MzxPY3CCOPSJR__a01SAH0uZhafUhadKZwRhaGWbZ4WOlirtmx-cWbg_C6z1KIHXbOuilfDZAioWwsYzsT/s1600/bar1.gif

URL-адрес:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZlF5DnpCXrlzIjLfR_tNN6qu2_2rnTCCwYOxtBwLKUsOpYIfVXVvOKQKcMt2hQWzsoFIbKIheMmpHzMv36acVkhEk5duJfo7N3rVcpeRQoGjli_upW31vprMxqfK_GVjrh2Rc0utKNON7/s1600/bar47.gif

URL-адрес:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihtNHUAD0t_osQTj3p5Gd-PzY8tbxP4BnyvhxU4j18sWHB8MVVd3mQWuKt9EOqKRxDhyphenhyphen5GC9eoYzwZHloZZ2yboZOhGVFvc-qpw83hlLaP9BhofldXw4Ci6YyudHH1D3luE1bfO8PFFplt/s1600/barsnake.gif

URL-адрес:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd02UearWs4yO__L7c6s_ANoqrCd6lTvSCX90Utfiq7Em7w94f0PpA82lpdu8aiNxJWYGC6ibyzWHtVZq_PNNrMR1asTRd6hXTlWRUuyX8RNxAb9JdV1wUvtZNSUJAfm6cpC_qMAghbGRL/s1600/bar48.gif

URL-адрес:

URL-адрес:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj545uQGdlhgCt3IC2tMqcskfJDJoOR1f4is3C0b1BsqVq7rZBvZ6YMolE0qS_chGkt_ZusDf-CzT61DapnJQjqQThKD-A4k_B2A97dJ0aLeYgreB2NXIvSvB1Y9BDzV9bgMCwQLvdMQ4XS/s1600/resfileszcp.gif