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

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

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

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

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

  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;
}

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

* * *

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

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

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

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

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

  2. 5
    Руфина

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

    • 6
      #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;
      }