Спойлер и кнопка для комментариев в блоге на Blogger (Blogspot)

Кнопка Показать/Скрыть комментарии в Blogger Комментарии в блоге, вещь безусловно полезная, но не всегда пользователь хочет видеть "простыню", возможно, не совсем нужных ему отзывов. В таких случаях и чтобы сделать блог более компактным, можно скрыть опубликованные комментарии под спойлер, а посетитель сам решит: читать ему их или нет.
  В этой статье, представлен простой скрипт jQuery спойлера и пример реализации кнопки, чтобы показать или скрыть по клику блок комментариев в Blogger-блоге. Причем, не имеет значения тип комментариев: древовидные или обычные(линейные), данный вариант скрипта подойдет в обеих случах. При желании, его также можно использовать и для сокрытия любого другого блока на сайте или в блоге.
  В общем, сделал я два варианта, в обеих используется один и тот же код сценария, но первый, в качестве кнопки для спойлера, использует стилизованный стандартный заголовок расположенный в блоке (См. Рис. 1), а во втором, кнопка добавляется вручную в HTML код шаблона. Изначально, при загрузке страницы, блок с уже опубликованными комментариями скрыт, видна только форма отправки и кнопка, по нажатию которой будут показаны оставленные ранее отзывы.
Скриншот спойлера для комментариев блога
Рис. 1
  Итак, начнем и не забываем, что для работы скриптов, нужно подключить фреймворк jQuery к сайту, если этого еще не сделано.
  Первый вариант.
DEMO
  В стандартных шаблонах Blogger, в блоке комментариев есть заголовок четвертого порядка(h4) с количеством оставленных отзывов, для него можно добавить CSS и с помощью скрипта использовать в качестве кнопки, как это сделано в примере.
  CSS может быть любым, в данном случаи это стилизация под кнопку Windows, а код выглядит так:
.comment-thread > ol:first-child {
 display:none; /*скрываем блок опубликованных комментариев*/
}
.comments > h4 {
 display:inline-block;
 background: #f7f7f7;
 background: -moz-linear-gradient(top, #f7f7f7 10%, #cecece 100%);
 background: -webkit-linear-gradient(top, #f7f7f7 10%,#cecece 100%);
 background: -o-linear-gradient(top, #f7f7f7 10%,#cecece 100%);
 background: -ms-linear-gradient(top, #f7f7f7 10%,#cecece 100%);
 background: linear-gradient(to bottom, #f7f7f7 10%,#cecece 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#cecece',GradientType=0 );
 border: 1px solid #666;
 border-radius: 3px;
 font: normal normal 13px/20px Arial, sans-serif;
 color: #1c1c1c;
 text-align: center;
 cursor: pointer; /*вид курсора*/
 padding: 0 5px;
 margin: 5px;
 width: auto; /*ширина, можно указать любое подходящие значение*/
}
.comments > h4:hover {
 background: #f7fbff;
 background: -moz-linear-gradient(top, #f7fbff 10%, #99dbff 100%);
 background: -webkit-linear-gradient(top, #f7fbff 10%,#99dbff 100%);
 background: -o-linear-gradient(top, #f7fbff 10%,#99dbff 100%);
 background: -ms-linear-gradient(top, #f7fbff 10%,#99dbff 100%);
 background: linear-gradient(to bottom, #f7fbff 10%,#99dbff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbff', endColorstr='#99dbff',GradientType=0 );
 border: 1px solid #449ed6;
 color: #000;
}
.comments > h4:active {
 background: #eff3f7;
 background: -moz-linear-gradient(top, #eff3f7 0%, #70bfef 100%);
 background: -webkit-linear-gradient(top, #eff3f7 0%,#70bfef 100%);
 background: -o-linear-gradient(top, #eff3f7 0%,#70bfef 100%);
 background: -ms-linear-gradient(top, #eff3f7 0%,#70bfef 100%);
 background: linear-gradient(to bottom, #eff3f7 0%,#70bfef 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff3f7', endColorstr='#70bfef',GradientType=0 );
 border: 1px solid #3989B5;
 box-shadow: inset 0 0 0.1em 1px #666;
}
Строка:
.comment-thread > ol:first-child {
 display:none;
}
добавлена чтобы блок был скрыт сразу, не дожидаясь обработки скриптом, но если вы переживаете что уникальные посетители с отключенным в браузере JS вообще не увидят комментариев, то ее можно убрать.
  Теперь можно добавить в блог скрипт jQuery, ведь именно он выполняет основной функционал: добавляет и изменяет надписи "Показать"/"Скрыть" в заголовке, скрывает, открывает и сворачивает по клику необходимый блок. Код его такой:
$(function(){
$('div.comment-thread > ol:first').hide(); //скрываем блок комментариев
 $('div.comments > h4').prepend('<span>Показать</span> ').click(function(){ //добавляем в заголовок блок с нужным словом и действия по клику
  var chText = $(this).children('span');
  if(chText.text() === "Показать"){
    chText.text("Скрыть");
  }else{
    chText.text("Показать");
  }
  $('div.comment-thread > ol:first').stop().slideToggle('slow');
 });
});
  В данном случаи никаких дополнительных действий в шаблоне не требуется.

  Второй вариант
DEMO
  Для реализации этой версии нужно добавить в шаблон дополнительный элемент, который и будет кнопкой. В примере для этого используется <button>, но можно и любой другой.
  В админке открываем Шаблон - Изменить HTML, ставим галочку на "Расширить шаблоны виджета" и находим строку:
<div class='comments-content'>
и прямо перед ней, добавляем необходимый блок, например:
...
<h4><data:post.commentLabelFull/>:</h4>

<button class='hidecomm'>Показать комментарии</button>
 <div class='comments-content'>
  <b:if cond='data:post.embedCommentForm'>
...

Добавленный класс упрощает выбор элемента, также его возможно использовать для дополнительного оформления элемента.
  Так используется соответствующий тег, который в любом случае будет отображен брузерами как кнопка, то можно особо не усердствовать с CSS, но при желании, его можно стилизовать в соответствии с дизайном блога.
.comment-thread > ol:first-child {
 display:none;
}
.hidecomm {
 font: normal normal 13px Arial, sans-serif;
 margin: 5px 15px;
 width: 250px;
}
  Скрипт будет тоже немного другим:
$(function(){
$('div.comment-thread > ol:first').hide();
 $('button.hidecomm').click(function(){
  if($(this).text() === "Показать комментарии"){
    $(this).text("Скрыть комментарии");
  }else{
    $(this).text("Показать комментарии");
  }
  $('div.comment-thread > ol:first').stop().slideToggle('slow');
 });
});

Спойлер для обычных линейных комментариев Blogger

  Код блока и элементы линейных комментариев отличаются от древовидных, но для того чтобы сделать спойлер в блоге с такой структурой, ничего особенного вытворять с шаблоном не нужно. Необходимо лишь знать и использовать идентификатор блока с опубликованными отзывами в этой версии, а он такой: #Blog1_comments-block-wrapper. Следовательно, селектор .comment-thread > ol необходимо везде, и в стилях и в скрипте, заменить на #Blog1_comments-block-wrapper.
  Например:
$(function(){
$('#Blog1_comments-block-wrapper').hide();
 $('div.comments > h4').prepend('<span>Показать</span> ').click(function(){
  var chText = $(this).children('span');
  if(chText.text() === "Показать"){
    chText.text("Скрыть");
  }else{
    chText.text("Показать");
  }
  $('#Blog1_comments-block-wrapper').stop().slideToggle('slow');
 });
});

  На этом все.
©http://magentawave.com

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

  1. Хм, интересно. Вот только какой смысл их скрывать?

    ОтветитьУдалить
    Ответы
    1. Ну мало ли, к примеру 1 - 2 может и нет смысла, а если их 50 или 100, а может и больше, и скажем, в "подвале" блога есть полезная информация (там же тоже можно размещать рекламу, гаджеты соц сетей и т.д.). Так чтобы посетитель не прокручивал "простыню", возможно, не интересных ему комментариев - их можно скрыть. Но, как говориться, каждый сам определит степень надобности.

      Удалить
    2. Отличная статья, спасибо!!! Как-то увидела в каком-то блоге и не могла понять даже как это называется (сама новичок в блоговедении), т.ч., обнаружив вашу статью, очень рада.

      Удалить
  2. Здравствуйте! Я использовал первый вариант кнопки комментариев - у меня заработало, однако не совсем так, как описано:
    Все комментарии скрылись, однако "кнопки" как таковой нет, есть фраза "Показать 2 комментария:" при нажатии которой комментарии раскрываются, однако курсор не меняет своего вида.

    Как это исправить?

    ОтветитьУдалить
    Ответы
    1. Возможно у вас где-то допущена ошибка, проверьте свойство cursor, для элемента кнопки в CSS

      Удалить
  3. Проблему я решил - случайно забыл добавить CSS стиль. Все заработало. Большое спасибо :3
    Правда теперь встал вопрос - как изменить дизайн кнопки =)

    ОтветитьУдалить
    Ответы
    1. Ну дизайн кнопок это уже дело индивидуальное, пример есть и в этой статье, можно и в других нарыть так тут уж кто на что горазд )))

      Удалить
  4. Ставила второй скрипт... Не пошло. При нажатии на кнопку ответ комментарии не сворачиваются. Имею в виду древовидные комментарии...
    Кнопка работает (2 вариант), но в комментариях, есть кнопочка ответ, при нажатии на которую открываются ответы к комментарию написанному выше. Так вот, кнопочка эта не скрывает написанные ниже комментарии. Лишь стрелочка меняет свой вид.
    Использовала ваш стиль - http://www.magentawave.com/2012/02/change-comment-form-on-blogger.html .

    Может я что-то не туда установила? О.о

    ОтветитьУдалить
    Ответы
    1. Поправил скрипты и стиль, обновите у себя и должно все работать. Беда была не в оформлении, просто скрипт выбирал все элементы набора, а нужно было брать только первый. Теперь все в порядке, обновления в коде выделены черным.

      Удалить
  5. Как убрать ненужную кнопку "Ответы"?

    Скриншот: http://s1.radikale.ru/uploads/2015/11/13/36c501db23fe0c4a35055ebeea5f4e2b-full.png

    P.S. Простите. В прошлый раз некорректно поставила вопрос. =)

    ОтветитьУдалить
    Ответы
    1. Найдите и измените или добавьте в стилях :
      .comments .thread-toggle {
      display: none !important;
      }

      За прошлый коммент отдельное спасибо, а то как-то не обращал на этот баг внимания.

      Удалить
    2. Простите, сразу два комментария написала ибо уж подумала если так задумано, то наверное надо как-то удалить кнопочку "Ответы".
      Я уж думала я что-то не так сделала. Сама я новичок... Вот внимательно обычно читаю и все получается.
      Спасибо большое за ваш урок и ответы. Блог приобрел совершенно другой вид. Похорошел!
      Ох... Даже не знаю, может правда стоит удалить эту кнопку "Ответы", ибо с кнопочкой скрытия от нее толку мало.
      Где-то тут на вашем блоге видела статью об изменении вида кнопочек. Интересно, можно ли кнопочку "Сокрытия комментариев" сделать иной, изменить стиль.

      К примеру что-то похожее на: http://s1.radikale.ru/uploads/2015/11/13/d0cede23fe665c46cd4e28133455fd7d-full.png

      В любом случае спасибо вам еще раз! Пошла дальше читать ваши интересные уроки! =)))

      Удалить
    3. Для селектороа .comments .thread-toggle можно установить любой стиль, если такой же как на картинке, просто скопируйте код для этой кнопки и вставьте его к данному селектору.

      Удалить
  6. Здравствуйте! Подскажите, пожалуйста, как на примере данного кода сделать обычный спойлер?
    В вашем варианте мне нравится скольжение, чего нет в других спойлерах.

    ОтветитьУдалить

Следующее Предыдущее

BestProject