К основному контенту

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

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


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;
}
Бесплатные разделители статей:
разделитель статей
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDvuBKFFfzDiqU-hrywBPmlzcjcb-crxAi3opFpzq_xthjG4H1W0BbbYyVi_ldFINi5MeFA7kcdI5jKrAsadsVX0ItJUyNzxHt6ngvL2hbFmK2XgdovecPqonK2zNQWQGN6QTgZFcPbw83/s1600/barsnake.gif
bar48
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDvcZXfqnA_5Jr6drLhcr2R-apndeEnqCm9kOC7Ioay2KINzwuOi4NwSYinFCCYHU7xkJxPIk-TdpylDwXEeRD3REUWTJkwVdcNN2BejQ3nm1EKxvazWUnMTakDYlnC7fkyPlcrdF7A2U-/s1600/bar48.gif
bar47
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglcqBQ8Jm9vNFo3eurcqxQ7xPjT5nZ1azSQGNoklB-Q1u_6vsv41C1GzW_ZHZ-d-aAfkk_L8nBGcYALqpFcvIePPH051z3dA-RgizHNhSakz2hsWBO1psUXPuFlEGEaSd9dW1e_vv8Hson/s1600/bar47.gif
astarl7s
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKZm0wVYPAGOIedw3sPavp75rhEmxNTtd-8Qt5LZx3_Wge9fxQ1g89sBKIwSrXiBKsU1zd5q04ADBx7QDVHScFrM1Ur9mXmUtAlbiud1jFH5sZeBHkxb_lToE32nGQ8s52AhAeSvl4-xzM/s1600/astarl7s.gif
dividers_129
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqkSkk1l_QwJKdeY7ZhrSgJJoxILsXM5Tmx-SNBy4HKH4PGzIAMuJx9NoTIDWxKkIvoGa-kQFtCV9MR2TD6uDyQW_SiMNy2RJj_eH1bg-9UAF_Ob5vqpwiQMt0FeX_trXZT3wXebSNirEA/s1600/dividers_129.gif
dividers_96
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkgGLWykcEu6aIaPs8b3e8p4N5vL_gLwsc52t3o_c2fwYjGeJusO0KXepQxIWVORoVWFcLyzVrOMICj73AEGs1-h__20sHzt8slKEKYf39MpHtfCCrJbOdrT2BCTtsCi8Sn4smgs_houWY/s1600/dividers_96.gif
chain
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeuvxBVCy7DZ0Xb55yDGD9kjuBre17Xqd1U7freDYRF68r4GWyB7oGOO8fCNJ9J-_rbOg2qLv4WrT-GMhNOgL7pF5BKKjyq-vh7sQ5fZmXziWXmUNmn6obbA0VwZZkJBZsZE00KY0mUuZe/s1600/chain.gif
bloodrose
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN1Kzg9lvenaqgU2Pj5dKEurIAvdHwvD5mbqzasyHeAgHMfmaE_jVQBn2d3Y8eyahJbW5AIHaSNfq36PYsBKf6ZqemnQy6rmrYXx5ldNMXaj0ZDVGFSJlLj_r000Y-37z_ybQ2Hurnee_9/s1600/bloodrose.gif
stonebar
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfFS8_ziQBYT4nAXUDSUqNpvLfQG1svRHpPP1HDJdISQGkfrOD6C0mNarOIrYgftaI3PrwL4G4lwgROb46YRKtfiuA-zQithLz7jsow_Pftp1n0Ytsg_SU0xeqzTkLO8MQPEaWBdJZg5az/s1600/stonebar.gif
resfiles_sdfp
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjul3x0t7hmhWEfSfmkV_aJ_VAlg1DroaoTn2sreKIu8UQf1tT4cf6af1yXJ-vs8AIfvvXi2ODJ82jKms0sfSoes_Kys1hlU2JpqJEPs5ZvCvoYlrsfKLzoUuN4ByqHjLZFGkUYZ8r2jxdg/s1600/resfiles_sdfp.gif
resfileszcp
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLltCP4LZVtWs7jD7KqrezRPmQwBlBSkH0jpnlMpZLuG0tlwsoCquKruPQ4iMqqNWIEShnW34oaDDVjHVdWXELKe3JVhGI-LOovADFqo0v3Knk9qLbojw6JjovZgjZaN4_IMCoe48XU4VJ/s1600/resfileszcp.gif
resfiles_output.php
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoY7_amKVaKwMV8vn2SOpFToqBotoGanSceu7t4l-o42cPfvk-VERs0oFGZZw_HWQltE7CLJAbJp34RMb24YHgMSZZplLvOuT9o7bhNBb1t9F6UT_krw194xXcFBvMtkYsmML4kr4nH4MY/s1600/resfiles_output.php.gif
pumpkin-border-hth
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5KSvKdtIceSQr3nrqCHpgMU172xsoKnRaSwqKPJdGJjMsFjJnssF0I1cRPAKaWZBkv_65dmH5mESh_2tQO_SE7jKYwHKDyRlzCtqw2DcL1sBMeRs15jDim7M4xq1-iKvwNbhxrYUlg3NM/s1600/pumpkin-border-hth.gif
irish-border4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKinJhQc4jja-KMWkXFIdjis3U622E1sjtuKLNguLFrrSR8YC3Qh_ALHtK_6jwck_ygVLtinLhO1MA4gGkC3ZhdrGb7fSNDR4dnuaRheq-RKABK0HzdRTbogT78xgu7sxy9cLIL68VZuPk/s1600/irish-border4.gif
irish-border1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSKzY8a90VMUcZ-WfXM1gyj6KbThO-2Tupb-5itx4gCyOtGsq34Grr-mNY1Q6FuBbpMIdDYG18EPKdyqmT-jiM3Li67W0rlz_bw0wUUuQiiyHysfLrQvor82thKV4I2-M3TFZUzt79y6kO/s1600/irish-border1.gif
flowerbar
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjblTYDo8iouFEN-QqLxXdobmUas2bb3a5esNglRD1M99-CsMBjcNoH4IgUM8D4lmqgP5n1vI1y-tLdXKh-R5VcsUF5-LT5sIwlg3YvgtckykNE7OM2yPO8wl4CgJgWV568WOADoDHl0Z82/s1600/flowerbar.gif
Надеюсь разделители статей придутся вам по вкусу. Хочу напомнить, что каждый из вас может сделать свой разделитель с помощью программы paint.net, о которой я писал в статьей “Уникальная шапка шаблона для блоггер” , там же ее можно и скачать.
Если не хотите делать свои разделители можете посетить следующие сайты:
leehansen.com
clipartandcrafts.com

Комментарии

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

Популярные сообщения из этого блога

Как сделать ссылку на определенную часть той же страницы.

Все блоггеры пользуются ссылками практически в каждой статье, помимо удобства это еще и очень полезно для индексации блога. Сегодня хотел бы описать как сделать ссылку на туже страницу на которой находится Ваш читатель, только ниже, либо Выше, допустим Ваша статья состоит из нескольких частей и читатель, хочет пропустить первую и перейти сразу ко второй. Сделать это достаточно просто! 1.Для начала нам необходимо присвоить определенной части текста “Якорь”, допустим Вы хотите ссылать на каую-либо часть статьи, перед началом необходимого участка текста вставьте в HTML коде статьи следующий тег : <a id=" yakor "></a> Начало текста или заголовка В качестве слова якорь выделенного красным вы можете использовать любое другое, подходящее по смыслу. 2. Теперь необходимо сделать ссылку на данный якорь. А именно в HTML коде страницы перед словом которое должно быть ссылкой ставим тэг вида: <a href="# yakor ">Слово</a> Покажу как это долж

Добавляем красивый гаджет Поделиться

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

Открыть несколько ссылок одним кликом мыши

Многие из Вас наверняка встречали сайты, на которых нажав на одну ссылку открывается сразу несколько сайтов. Так делают те кто хочет прорекламировать независимый интернет ресурс, в таком случае открывается ссылка по которой вы должны перейти и еще одна, так-же это делают для увеличения просмотров определенных страниц на сайте, либо если действительно необходимо открыть сразу две ссылки. Для обычного блоггера это может быть полезным так как заинтересовав человека одной ссылкой Вы как бы повышаете популярность Вашего ресурса, так как он посетит вместо одной страницы в Вашем блоге сразу несколько. Чтобы вставить такую ссылку необходимо к тексту добавить следующий код: <a href="http://www.ссылка1.com/" target="_blank" onmouseover="window.open(&quot;&quot;http://www.ссылка2.com&quot;&quot;);window.open(&quot;&quot;http://www.ссылка3.com&quot;&quot;);">Click Here Link Bucket</a>   Вставьте свои ссылки, увеличьт