Красочное выделение цитат в комментариях

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

Что ж, мир не стоит на месте, и на смену старым решениям приходят новые. Вот и сейчас я хочу представить свое новое творение, позволяющее уже при иерархическом формате публикации комментариев оформлять текст в виде выделенных цитат!

Хотите вот так?

sunctorus писал(а)

Сегодня я хочу предложить вам свой собственный скрипт.

Чем он примечателен?

Или вот так?

Цитата

Сегодня я хочу предложить вам свой собственный скрипт.

Чем он интересен?

Цитата

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

Ждем с нетерпением!

А, может, вот так?

sunctorus писал(а)

Цитата Ну-ка, ну-ка... Интересно... Этот скрипт позволяет цитировать нужный отрывок комментария.

Хмм... Неплохо!

Или, вообще, вот так?

Цитата

Цитата Цитата Цитата Сегодня я хочу предложить вам свой собственный скрипт. Какой такой скрипт? Скрипт, позволяющий цитировать нужный отрывок комментария. Круто!

А то :-)

Хотелось бы обратить внимание тех, кто раньше использовал аналогичный виджет для линейного формата комментариев, на тот факт, что виджет, описываемый в этой статье, сохранит работоспособность всех цитат, которые были созданы вами ранее, и их дизайн не рассыплется!

Ну что ж, если идея подобного расширения функционала комментариев платформы Blogger (Blogspot) показалась вам интересной, приступим к ее воплощению в жизнь! Откройте редактор шаблона (Дизайн->Изменить HTML) и добавьте перед закрывающим тэгом </head> следующую строку:

<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'/>
</head>

* Если перед тэгом </head> уже имеется ссылка на скрипт jquery.min.js, то дублировать ее не стоит. Достаточно одного указания на библиотеку jQuery.

Теперь подключим основной скрипт. Перед закрывающим тэгом </body> добавляем следующую строку:

<script src='https://drive.google.com/uc?export=download&amp;id=0B3_dGXEjBVdPeXE2Smw5X2NZX0k' type='text/javascript'/>
</body>

Задействуем таблицу стилей. Под строкой "/* Comments" и вставляем следующий код:

/* Comments
----------------------------------------------- */
.comment-quote {
  margin-top: -10px;
  margin-bottom: 5px;
  padding: 7px;
  border: 1px solid #C3DEF4;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  text-align:justify;
  width: 100%;
}

.comment-quote-name {
  margin-left: 10px;
  padding: 0 3px;
  background-color: #fff;
  font-weight: bold;
  position: relative;
}

.name-color {
  color: #138FD8;
}

И, наконец, о том, как задействовать возможности данного виджета! Увы, "варианта для ленивых", как это было организовано в виджете, о котором я упоминал в начале статьи, в текущей модификации нет. Тут все необходимо делать вручную. Хотите оформить простую цитату? Скопируйте цитируемый текст в форму добавления комментария и окружите его псевдотэгами по этой схеме: [q]цитируемый текст[/q]. Хотите лицезреть более сложный вариант, с указанием имени человека, которого вы цитируете? Тогда схема немного меняется: [q="имя"]цитируемый текст[/q]. Как видите, ничего сложного. И вы, и ваши читатели без труда освоите этот механизм, многим уже привычный по форумам.

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