Главная›Веб-мастеринг

Добавляем практичные правила комментирования

55 комментариев

Посетители блога, которые в первые новогодние дни успели что-то откомментировать на этом блоге, наверняка уже заметили, что на нем появились правила комментирования.

Я уже задумывался над этим некоторое время назад, но реализовал только после того, как увидел правила комментирования на блоге Максима. Взял пример с него, т.к. во-первых, нигде ранее такого не встречал, во-вторых, прочитав правила у Максима, я понял, каким образом я сделаю то же самое у себя.

В отличие о Макса я решил не создавать для правил отдельную страницу, а вставил их прямо перед кнопкой “Отправить комментарий”. По умолчанию правила спрятаны, но они появляются при клике на соответствующую ссылку. Реализовано это с помощью небольшого ява-скрипта.

Денис Стреха попросил написать, как реализовать такую штуку, поэтому рассказываю, авось и кому-то еще пригодится.

  1. Для начала к теме блога необходимо подключить следующий ява-скрипт (либо вставить его прямо в тему, либо подключить через отдельный файл): 
    <script type="text/javascript">
	function view(n) {
		style = document.getElementById(n).style;
		style.display = (style.display == 'block') ? 'none' : 'block';
}
</script>
  2. В нужно месте пишем какой-то текст, который будет содержать ссылку на правила. Код ссылки должен выглядеть следующим образом: 
    <a href="#t1" onclick="view('t1'); return false">правила комментирования</a>

    Здесь t1 – это идентификатор, который мы применим для блока с комментариями, который по умолчанию будет скрыт.

  3. Создаем блок с правилами и назначаем ему идентификатор, в моем примере t1: 
    <div id="t1">
Здесь правила комментирования
</div>
  4. Для идентификатора t1 необходимо назначить CSS-правило display:none, чтобы по умолчанию блок с правилами был скрыт.

Все. Останется только добавить стили для оформления правил, если это потребуется.

Наглядный пример можете наблюдать прямо на моем блоге перед кнопкой “Отправить комментарий“.

Еще хочется добавить следующее. Чтобы обозначить, что ссылка на правила – это не обычная ссылка, которая открывает новую страницу, лучше сделать у нее подчеркивание пунктиром, убрав стандартное подчеркивание:

a {
	text-decoration: none;
	border-bottom: 1px dashed #F70;
}

В результате мы имеем правила комментирования, которые при клике на определенную ссылку появляются на той же самой странице.

* * *

Украинская торговая фирма “Страж” изготавливает и устанавливает стальные входные двери, обладающие красивым дизайном и надежной защитой. Вы можете выбрать как готовую дверь, так и сделать индивидуальный заказ.

Смотрите также

Невидимый спам в комментариях - ссылки на пробелах

72 комментария

Когда закрываешь перед спамером дверь, он лезет в форточку. В переводе на язык блога это означает следующее – стоит в комментариях убрать поле для указания сайта, либо каким-то иным образом ...

Минимизация CSS- и JS-файлов и HTML-кода на сайте

19 комментариев

Одним из пунктов оптимизации сайта является минимизация кода, который передается браузеру посетителя в момент открытия сайта. Сюда относится как содержимое CSS-файлов и JS-файлов, так и HTML-код страниц. Данные меры позволяют ...

BlogoArt.ru - дизайн и верстка для блогов на WordPress и Drupal

18 комментариев

Хочу познакомить вас со студией “Блогоарт”, которая занимается разработкой дизайнов для блогов и версткой под WordPress и Drupal. Почему я это делаю? Потому что имею прямое отношение к данной студии ...

Создаем удобные, практичные вкладки с помощью jQuery

50 комментариев

Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью “Универсальный jQuery-скрипт для блоков с вкладками (табами)“. * * * Примерно последние месяц-два на англоязычных блогах мне стали ...

Комментарии (55)

  1. Neutrino
    6 января 2008 г. в 14:24

    Дим, ты невнимателен :) Href не сработает, так как у тебя в js написано явно – return false. Href сработает только если отключен js. Кроме этого, поисковикам будет понятно куда ведет ссылка.

  2. Dimox
    6 января 2008 г. в 14:50

    Дэн, я не невнимателен, дело всего лишь в том, что я в этом ничегошеньки не пендрю =) (ява-скриптинг имею в виду).

    Спасибо за советы! Отредактировал пост по твоему примеру и поменял у себя в шаблоне.

  3. Neutrino
    6 января 2008 г. в 14:59

    Кстати не знаешь, то что при сабмите комментария часто вылезает диалог сохранения php-файла, это баг движка или ФФ?

  4. Уникальный Человек
    6 января 2008 г. в 17:03

    Отличная идея – правила комментирования! У себя обязательно тоже сделаю.
    Как только закончу другую штуку с комментариями =)

    Dimox, у тебя правила не так суровы, как у Макса и их не так много, поэтому они помещаются на эту же страницу.

  5. Dimox
    7 января 2008 г. в 15:28

    Кстати не знаешь, то что при сабмите комментария часто вылезает диалог сохранения php-файла, это баг движка или ФФ?

    Ты имешь в виду мой блог или вообще WP-блоги в целом?

    Уникальный Человек, я так и предполагал, что тебе эта идея понравится :)

    Dimox, у тебя правила не так суровы, как у Макса и их не так много, поэтому они помещаются на эту же страницу.

    Хм… если бы у меня правила были такие же большие, как у Макса, я бы все равно их интергировал точно так же, как сейчас. Размер тут значения не имеет =)

  6. Neutrino
    7 января 2008 г. в 16:35

    Имею в виду твой блог.

  7. Dimox
    7 января 2008 г. в 17:23

    Хм.. тогда не знаю, что тому виной. У WP такого бага нет, да и у ФФ не должно быть. Возможно, причина в моем хостере.

  8. Skop
    7 января 2008 г. в 17:48

    Это скорее всего хостер + FF, у меня иногда бывает такое даже напр. на SE форуме ( когда его отключают ночью на профилактику, так за несколько секунд до этого такое вылетает). Но тут ещё такого не замечал. Иногда бывает другая странность, которую больше нигде не видел – при загрузки страницы ничего не отображается, просто белый лист, но при этом фавикон сверху подгружается. Для себя ссылаю это на то, что забываю иногда почистить кеш у браузера, или какой-то косяк хоста

  9. Янис
    13 января 2008 г. в 17:01

    Вот только я не понимаю – зачем эти правила – и так все понятно, это прописные истины.
    А вот пример реализации чего-то веб2.0-го интересный.

  10. Dimox
    13 января 2008 г. в 22:11

    Янис, в том и дело, что для некоторых комментаторов данных истин, видимо, не существует, посему специально для них и написаны правила.

  11. Анастасия
    15 июля 2008 г. в 15:50

    Подтверждаю, полуспамные комментарии замучили. Даже закрытие в nofollow/noindex не останавливает. Пойду и себе правила для комментаторов делать.

  12. Олег
    22 июля 2008 г. в 10:55

    Привет.
    не совсем понял – “Для начала к теме блога необходимо подключить следующий ява-скрипт (либо вставить его прямо в тему, либо подключить через отдельный файл)” – где именно и как в теме надо “подключать”? (я чайник :) )
    спасибо.

  13. Dimox
    22 июля 2008 г. в 13:03

    не совсем понял – “Для начала к теме блога необходимо подключить следующий ява-скрипт (либо вставить его прямо в тему, либо подключить через отдельный файл)” – где именно и как в теме надо “подключать”? (я чайник :) )

    Вставить этот скрипт в файл header.php, который находится в папке с темой, перед </head>.

  14. SeoNizator
    28 мая 2009 г. в 20:28

    Я правила не увидел. Скролит под форму (Макстон2 на ИЕ6). Пришлось код страницы смотреть.

    Возникла идея. Сделать скрытой не правила, а саму форму. Пока не согласишься с правилами (типа кнопер “Прочитал -согласен”).
    Однако хорошо бы постоянным комментаторам сразу её показывать.
    Мож через куку как-то можно сделать.

    Как мысль? Жизнеспособная?

    1. Dimox
      29 мая 2009 г. в 09:11 / ответ на коммент SeoNizator

      Я думаю, это излишне и может оттолкнуть. Комментирующий не любит совершать лишних действий при добавлении коммента.

  15. SeoNizator
    29 мая 2009 г. в 22:58

    Я имею ввиду без перезагрузки. Так же как у тебя сейчас правила и помощь.

    Комментирующий не любит совершать лишних действий при добавлении коммента.

    Ну на многих блогаг капчу вводить не лень, а тут ссылочку кликнуть… ;)
    Ведь читать правила желающих ещё меньше найдется, чем комментить. А у кого возникнет желание прокомментить, тот и линк нажмёт. Заодно слабенький фильтр от тупых юзеров и бессмысленных коментов получится ;).

    Я наверное на каком-нить из своих блогов такое сделаю.
    Спасибо за идею. ;)

    1. Dimox
      30 мая 2009 г. в 09:24 / ответ на коммент SeoNizator

      Я понимаю, что без перезагрузки. Идея интересная, но на данном блоге не вижу смысла этого делать.

  16. Карабат
    7 июля 2009 г. в 20:26

    Отличная идея – правила комментирования!

  17. Чеснок
    22 марта 2010 г. в 21:37

    Для идентификатора t1 необходимо назначить CSS-правило display:none, чтобы по умолчанию блок с правилами был скрыт.

    Как это реализовать не могу понять. В CSS не силён, напишите что в стиль добавить. И если можно то как в код php корректно выводите? у меня не получается, приходиться картинками((

    1. Dimox
      23 марта 2010 г. в 09:51 / ответ на коммент Чеснок
      #t1 {display: none}

      И если можно то как в код php корректно выводите?

      Не понял вопроса.

      1. Master
        27 мая 2010 г. в 21:41 / ответ на коммент Dimox

        Дима, я прошу прощения за прямоту , но!

        Эти прибамбасы не работают корректно (как здесь написано). Приведите пожалуйста рабочий код с начала до конца, если Вас не затруднит, тогда и лишнего “базара” не будет. Некоторые ребятки не понимают, что такое

        Для идентификатора t1 необходимо назначить CSS-правило display:none, чтобы по умолчанию блок с правилами был скрыт.

        Что назначить? Куда “впендюрить”? Урок нужно “разжевать”, чтобы ВСЕМ было ясно что и куда вставлять! Ведь, если я правильно понимаю, Вы пишите не только и в основном не для поннимающих в PHP?!

        1. Dimox
          28 мая 2010 г. в 08:00 / ответ на коммент Master

          Советую почитать мануалы по CSS, тогда таких вопросов не будет возникать.

          1. Master
            28 мая 2010 г. в 19:45 / ответ на коммент Dimox

            Здравствуйте, Дмитрий.

            Да не обижайтесь Вы на критику – она добрая!
            Вот обратите пожалуйста на простой пример, простите, Вашей ошибки – Олег пишет:

            …….не совсем понял – “Для начала к теме блога необходимо подключить следующий ява-скрипт (либо вставить его прямо в тему, либо подключить через отдельный файл)” – где именно и как в теме надо “подключать”? (я чайник :) )………
            Вставить этот скрипт в файл header.php, который находится в папке с темой, перед .

            А разве нельзя было в своем уроке сразу расписать места установки Ваших скриптиков? Я думаю – можно и нужно, тогда и лишней полемики не будет – вот я о чем. А отмахиваться советами почитать это или то… не дело это настоящего блоггера, каковым Вас считают некоторые поклонники. Вот моя (да и не только…) точка зрения на вопрос написания постов по просьбам читателей.
            Ценность подобных уроков в том, чтобы даже “самый древний чайник” понял то, что Вы делаете, независимо от подготовленности в той или иной сфере сайтостроительства…
            Не обижайтесь пожалуйста на мои замечания, но, честно говоря… впрочем, не буду продолжать, дабы у Вас не отнимать время для написания, надеюсь, подробных постов. Спасибо за то, что не удалили мой коммент, поверьте – я не со зла, сам когда-то сделал пару-тройку подобных ошибок, пока не “вразумили добрые учителя”, коим безмерно благодарен”

            1. Dimox
              29 мая 2010 г. в 10:02 / ответ на коммент Master

              А тут и не на что обижаться.

              Ценность подобных уроков в том, чтобы даже “самый древний чайник” понял то, что Вы делаете, независимо от подготовленности в той или иной сфере сайтостроительства…

              Я не ставлю цель донести информацию до “самых древних чайников”. Мне неинтересно описывать самые азы.

  18. Allpa
    27 июля 2010 г. в 04:53

    Димокс! Да Ваш блог просто кладезь полезняшек! Браво!
    Видите, я добралась наконец и до правил :)
    Мало того, я сделала их и своими правилами – более сжатой и более ёмкой, тем не менее, формулировки трудно придумать!
    А теперь думаю: а вдруг Вы против?.. о.О
    Разумеется, триста раз разумеется, что я буду, захлёбываясь от восторга, писать о Вашем блоге :) Я буквально в шаге от поста на тему “Как я пилила дизайн и кто мне помогал” ;)
    СПАСИБО!!!

    1. Dimox
      27 июля 2010 г. в 15:16 / ответ на коммент Allpa

      Не против. Пожалуйста.

  19. Allpa
    27 июля 2010 г. в 05:08

    Одно только забыла уточнить: вот эта премодерация самого первого комментария – это в админке задаётся?
    Вот это:

    Перед появлением комментария –
    Перед появлением комментария Администратор должен проверить комментарий
    Автор должен иметь ранее одобренные комментарии

    оно?
    Я так понимаю, что да (никогда раньше не модерировала каменты, поэтому и в затруднении).. думается мне, что нужно отметить эти две галочки: одна для самого первого камента, другая – для тех, чьи каменты были ранее одобрены.
    Или я всё путаю?

    1. Dimox
      27 июля 2010 г. в 15:20 / ответ на коммент Allpa

      Немного не так.

      Нужно отметить только “Автор должен иметь ранее одобренные комментарии”. Если Вы отметите “Администратор должен проверить комментарий”, тогда каждый комментарий будет попадать в модерацию, независимо от того, первый он или десятый.

      1. Allpa
        27 июля 2010 г. в 17:21 / ответ на коммент Dimox

        Точно, сейчас в этом убедилась..
        Димокс, имхо, Вы – лучший блогер рунета. Даже не спорьте :)
        Огромное Вам спасибо за Ваш великолепный блог!

        1. Dimox
          27 июля 2010 г. в 18:22 / ответ на коммент Allpa

          Большое спасибо за отзыв, очень приятно! =)

  20. Руфина
    25 декабря 2011 г. в 00:41

    Не могли бы Вы мне написать свой код стиля кнопки “Отправить комменатрий”? Мне понравилась у Вас эта кнопка. Сама я пробовала что-то изменить у своей кнопки, но не все получается, а которая идет стандартная в шаблоне мне не очень нравится.

    1. Dimox
      25 декабря 2011 г. в 10:49 / ответ на коммент Руфина
      #submit {
  border: 1px solid #D2A146;
  border-top: 1px solid #EAB551;
  border-bottom: 1px solid #AF8234;
	border-radius: 3px;
	width: 210px;
	height: 32px;
	padding: 0 0 1px;
	margin: 8px 0;
	position: relative;
	cursor: pointer;
  text-align: center;
  font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
	color: #704A25;
	text-shadow: 1px 1px #FEDFA0;
	box-shadow:
		inset 0 1px #FEE9AA,
		inset 1px 0 #FED67F,
		inset -1px 0 #FEDA85,
		inset 0 -1px #FECA6F,
		0 2px #B98A37,
		0 3px #9F7630,
		0 4px 2px #999
	;
	background: -moz-linear-gradient(top, #feda71 0%, #febe4d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feda71), color-stop(100%,#febe4d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #feda71 0%,#febe4d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #feda71 0%,#febe4d 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #feda71 0%,#febe4d 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feda71', endColorstr='#febe4d',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #feda71 0%,#febe4d 100%); /* W3C */
	background-color: #FED166;
}
#submit::-moz-focus-inner{border:0}
#submit:hover {
  border-top: 1px solid #E6A93D;
	box-shadow:
		inset 0 1px #FEDB98,
		inset 1px 0 #FED67F,
		inset -1px 0 #FEDA85,
		inset 0 -1px #FED781,
		0 2px #B98A37,
		0 3px #9F7630,
		0 4px 2px #999
	;
	background: -moz-linear-gradient(top, #fec455 0%, #fecd61 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fec455), color-stop(100%,#fecd61)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fec455 0%,#fecd61 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fec455 0%,#fecd61 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #fec455 0%,#fecd61 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec455', endColorstr='#fecd61',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #fec455 0%,#fecd61 100%); /* W3C */
	background-color: #FED166;
}
#submit:active {
	top: 3px;
	padding: 0 0 2px;
  border: 1px solid #CF9D42;
  border-top: 1px solid #A77F35;
  border-bottom: 1px solid #E2AC48;
	background: #FEC151;
	box-shadow: inset 0 1px 2px #C49846;
}
      1. Руфина
        25 декабря 2011 г. в 21:42 / ответ на коммент Dimox

        Спасибо.

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2024 Dimox.name. Все права защищены. Перепечатка запрещена.