Добавление разделителей в блоге на Blogger (Blogspot)

Автор Damir-Tote. Опубликовано в Блог, Все о Блогспот

Сегодня я покажу вам, как можно добавить в  блог Blogger (Blogspot) простой разделитель. Возможно, это ни кому не нужно, но вдруг у кого желание появиться использовать, то Welcome!!!
 
Этот прием очень простой и возможен у любого blogger шаблона. Нужно только несколько простых изменений в вашем шаблоне Blogger в CSS разделе.
 
В качестве примера я буду использовать делитель, что я скачал из интернета бесплатно. Вот некоторые разделители, которые вы можете использовать, чтобы начать:
 
URL-адрес:
http://1.bp.blogspot.com/-KHe7PUP7IcI/Te9PkknH-lI/AAAAAAAAA6w/V0enSivClfs/s1600/ribbon.gif
 
 
URL-адрес:
http://3.bp.blogspot.com/-0xPuU-ikpMo/Te9PjCPjCvI/AAAAAAAAA6k/0HujRtBvKk0/s1600/bar1.gif
 
 
URL-адрес:
http://3.bp.blogspot.com/-ahDC1Ittmv4/Te9Pkd4z_kI/AAAAAAAAA6s/smm_1_BCsdM/s1600/barbsmpl.jpg
 
URL-адрес:
http://2.bp.blogspot.com/-EPURWaOrbNI/Te9PjtWT3_I/AAAAAAAAA6o/ibNexWJ1114/s1600/bar47.gif
 
 
            Для их добавления вам нужно сделать следующее:
 
1. Дизайн > Изменить HTML
 
2. Делаем резервное копирование Blogger шаблона в качестве меры предосторожности, загрузив его на свой компьютер.
 
3. Найдите следующую строку кода шаблона:
 
.post {
 
вероятно, есть что-то подобное в вашем шаблоне уже:
 
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
 
4. Вставьте следующие строки кода для этого блока и убедитесь, что вы копируете их перед закрытием фигурной скобки:
 
background: url(http://1.bp.blogspot.com/-KHe7PUP7IcI/Te9PkknH-lI/AAAAAAAAA6w/V0enSivClfs/s1600/ribbon.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
 
5. Если какие-то строки дублируются, удалите их.
 
Удалите все строки, начинающиеся например,
 
border-bottom:1px dotted $bordercolor;
 
6. Теперь у вас есть блок кода, который выглядит следующим образом:
 
.post {
background: url(http://1.bp.blogspot.com/-KHe7PUP7IcI/Te9PkknH-lI/AAAAAAAAA6w/V0enSivClfs/s1600/ribbon.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}
 
7. Нажмите на Сохранить Шаблон, чтобы сохранились ваши изменения.
 
8. Нажмите на один из постов блога и посмотрите, что получилось.
 
Если не хотите из моих предложенных изображений, то можете использовать собственный делитель изображения, загружая из вашего компьютера или из интернета. Заменить разделитель URL-адрес (в красном) на URL-адреса вашего нового изображения.
 
Для увеличения обивки вокруг делителя, измените следующие строки кода:
 
padding-bottom:1.5em;
 
на
 
padding-bottom:2.5em;
 
Сегодня вы узнали, как вставить разделитель между вашим сообщениями, для улучшения внешнего вида вашего шаблона на Blogger (Blogspot). Вы можете сделать ваш собственный разделитель с помощью фотошоп или обычного Word. А также загрузить изображение из сети интернета.
 
До новых статей!!!

Трекбэк с Вашего сайта.

  • Sineoka

    Cпасибо, очень полезная информация!)

.