Разделитель статей для блоггер

воскресенье, 14 марта 2010 г.

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

1. Зайдите в настройки вашего блога, а именно Изменить HTML. На всякий случай сохраните резервную копию вашего шаблона нажав Загрузить весь шаблон. Далее найдите в теле шаблона следующий скрипт (используя комбинацию ctrl+f):

.post
после него должно идти похожее содержание:
.post {
margin: 0 0 40px 0;
width: 90%
}
Этот css код задает параметры ваших статей. Что бы добавить разделитель необходимо добавить в него следующий код:

background: url(Адрес вашей картинки разделителя);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
2. В скобках необходимо указать адрес к картинке которую вы хотите видеть разделителем.
3.Если картинка разделителя залазит на последнюю строчку вашей статьи то необходимо увеличить последнее значение (2.5) например на 3.5 и тд.
4. Конечный вид кода должен выглядеть примерно так:
.post{
margin: 0 0 40px 0;
width: 90%;
background: url(http://www.imagehost.com/separator.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}
Бесплатные разделители статей:
разделитель статей
http://4.bp.blogspot.com/_JwD5r652h00/SuttjmoES2I/AAAAAAAAANw/bidxxyqfxwg/s1600/barsnake.gif
bar48
http://4.bp.blogspot.com/_JwD5r652h00/SuttjFcWXkI/AAAAAAAAANg/Ex99MFx60sY/s1600/bar48.gif
bar47
http://1.bp.blogspot.com/_JwD5r652h00/Sutti1AMlHI/AAAAAAAAANY/n-pJyLWbbhE/s1600/bar47.gif
astarl7s
http://4.bp.blogspot.com/_JwD5r652h00/SuttiqsszII/AAAAAAAAANQ/raAoX-EHDUY/s1600/astarl7s.gif
dividers_129
http://1.bp.blogspot.com/_JwD5r652h00/Sutu7XMmvBI/AAAAAAAAAOY/8XQyk53329Y/s1600/dividers_129.gif
dividers_96
http://2.bp.blogspot.com/_JwD5r652h00/Sutu7TjXFHI/AAAAAAAAAOQ/IQlWtZrB5SI/s1600/dividers_96.gif
chain
http://3.bp.blogspot.com/_JwD5r652h00/Sutu65IKnaI/AAAAAAAAAOA/UJuKQP29vtg/s1600/chain.gif
bloodrose
http://1.bp.blogspot.com/_JwD5r652h00/Sutu6mRBnpI/AAAAAAAAAN4/82pbOVmnl1Y/s1600/bloodrose.gif
stonebar
http://2.bp.blogspot.com/_JwD5r652h00/Sutwt4UlPXI/AAAAAAAAAPw/tZ9RY7m1tKA/s1600/stonebar.gif
resfiles_sdfp
http://1.bp.blogspot.com/_JwD5r652h00/SutwFSJ2_LI/AAAAAAAAAPo/WMkQ9bAcVn0/s1600/resfiles_sdfp.gif
resfileszcp
http://1.bp.blogspot.com/_JwD5r652h00/SutwFArTx_I/AAAAAAAAAPg/RlKs6tTx_Mw/s1600/resfileszcp.gif
resfiles_output.php
http://2.bp.blogspot.com/_JwD5r652h00/SutwEnMKk3I/AAAAAAAAAPY/pz3dI5GhTGY/s1600/resfiles_output.php.gif
pumpkin-border-hth
http://2.bp.blogspot.com/_JwD5r652h00/SutwEayD8dI/AAAAAAAAAPQ/9k10wIhaHjU/s1600/pumpkin-border-hth.gif
irish-border4
http://3.bp.blogspot.com/_JwD5r652h00/SutwEO1pNLI/AAAAAAAAAPI/FAmwFnDEASw/s1600/irish-border4.gif
irish-border1
http://1.bp.blogspot.com/_JwD5r652h00/Sutv3EVHqdI/AAAAAAAAAO4/jKfcf3u4IJ4/s1600/irish-border1.gif
flowerbar
http://4.bp.blogspot.com/_JwD5r652h00/Sutv28LLgLI/AAAAAAAAAOo/3ykBTaQOofw/s1600/flowerbar.gif
Надеюсь разделители статей придутся вам по вкусу. Хочу напомнить, что каждый из вас может сделать свой разделитель с помощью программы paint.net, о которой я писал в статьей “Уникальная шапка шаблона для блоггер” , там же ее можно и скачать.
Если не хотите делать свои разделители можете посетить следующие сайты:
 leehansen.com
clipartandcrafts.com

Похожие статьи

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

Mark.S. F. комментирует...

Здравствуйте.У меня нет .post { , есть:
/Group description="Post Background" selector=".column-center-inner"/
/Variable name="post.background.color" description="Background Color" type="color"
default="transparent" value="transparent"//
/Variable name="post.background.url" description="Post Background URL" type="url" default="none" value="none"//
//Group/
Что делать? Спасибо
P.s. >,< заменил на /

Отправить комментарий

Оставляйте ваши комментарии

 
 
 

Читать блог на другом языке

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified
 
Copyright ©Lagunof.com
Блога автора книги "Недвижимость: классическая, виртуальная, интеллектуальная" При перепечатке материалов с блога обратная ссылка обязательна
e4a11e6f00df223bf058f2795454739b