В этой статье, представлен простой скрипт jQuery спойлера и пример реализации кнопки, чтобы показать или скрыть по клику блок комментариев в Blogger-блоге. Причем, не имеет значения тип комментариев: древовидные или обычные(линейные), данный вариант скрипта подойдет в обеих случах. При желании, его также можно использовать и для сокрытия любого другого блока на сайте или в блоге.
В общем, сделал я два варианта, в обеих используется один и тот же код сценария, но первый, в качестве кнопки для спойлера, использует стилизованный стандартный заголовок расположенный в блоке (См. Рис. 1), а во втором, кнопка добавляется вручную в HTML код шаблона. Изначально, при загрузке страницы, блок с уже опубликованными комментариями скрыт, видна только форма отправки и кнопка, по нажатию которой будут показаны оставленные ранее отзывы.
Рис. 1
Первый вариант.
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;
}
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;
}
Строка:
Теперь можно добавить в блог скрипт jQuery, ведь именно он выполняет основной функционал: добавляет и изменяет надписи "Показать"/"Скрыть" в заголовке, скрывает, открывает и сворачивает по клику необходимый блок. Код его такой:.comment-thread > ol:first-child {
display:none;
}
добавлена чтобы блок был скрыт сразу, не дожидаясь обработки скриптом, но если вы переживаете что уникальные посетители с отключенным в браузере JS вообще не увидят комментариев, то ее можно убрать.display:none;
}
$(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');
});
});
В данном случаи никаких дополнительных действий в шаблоне не требуется.$('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'>
...
<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;
}
Скрипт будет тоже немного другим: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');
});
});
$('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');
});
});
$('#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
Хм, интересно. Вот только какой смысл их скрывать?
ОтветитьУдалитьНу мало ли, к примеру 1 - 2 может и нет смысла, а если их 50 или 100, а может и больше, и скажем, в "подвале" блога есть полезная информация (там же тоже можно размещать рекламу, гаджеты соц сетей и т.д.). Так чтобы посетитель не прокручивал "простыню", возможно, не интересных ему комментариев - их можно скрыть. Но, как говориться, каждый сам определит степень надобности.
УдалитьОтличная статья, спасибо!!! Как-то увидела в каком-то блоге и не могла понять даже как это называется (сама новичок в блоговедении), т.ч., обнаружив вашу статью, очень рада.
УдалитьНорм идея.
УдалитьЗдравствуйте! Я использовал первый вариант кнопки комментариев - у меня заработало, однако не совсем так, как описано:
ОтветитьУдалитьВсе комментарии скрылись, однако "кнопки" как таковой нет, есть фраза "Показать 2 комментария:" при нажатии которой комментарии раскрываются, однако курсор не меняет своего вида.
Как это исправить?
Возможно у вас где-то допущена ошибка, проверьте свойство cursor, для элемента кнопки в CSS
УдалитьПроблему я решил - случайно забыл добавить CSS стиль. Все заработало. Большое спасибо :3
ОтветитьУдалитьПравда теперь встал вопрос - как изменить дизайн кнопки =)
Ну дизайн кнопок это уже дело индивидуальное, пример есть и в этой статье, можно и в других нарыть так тут уж кто на что горазд )))
УдалитьСтавила второй скрипт... Не пошло. При нажатии на кнопку ответ комментарии не сворачиваются. Имею в виду древовидные комментарии...
ОтветитьУдалитьКнопка работает (2 вариант), но в комментариях, есть кнопочка ответ, при нажатии на которую открываются ответы к комментарию написанному выше. Так вот, кнопочка эта не скрывает написанные ниже комментарии. Лишь стрелочка меняет свой вид.
Использовала ваш стиль - http://www.magentawave.com/2012/02/change-comment-form-on-blogger.html .
Может я что-то не туда установила? О.о
Поправил скрипты и стиль, обновите у себя и должно все работать. Беда была не в оформлении, просто скрипт выбирал все элементы набора, а нужно было брать только первый. Теперь все в порядке, обновления в коде выделены черным.
УдалитьКак убрать ненужную кнопку "Ответы"?
ОтветитьУдалитьСкриншот: http://s1.radikale.ru/uploads/2015/11/13/36c501db23fe0c4a35055ebeea5f4e2b-full.png
P.S. Простите. В прошлый раз некорректно поставила вопрос. =)
Найдите и измените или добавьте в стилях :
Удалить.comments .thread-toggle {
display: none !important;
}
За прошлый коммент отдельное спасибо, а то как-то не обращал на этот баг внимания.
Простите, сразу два комментария написала ибо уж подумала если так задумано, то наверное надо как-то удалить кнопочку "Ответы".
УдалитьЯ уж думала я что-то не так сделала. Сама я новичок... Вот внимательно обычно читаю и все получается.
Спасибо большое за ваш урок и ответы. Блог приобрел совершенно другой вид. Похорошел!
Ох... Даже не знаю, может правда стоит удалить эту кнопку "Ответы", ибо с кнопочкой скрытия от нее толку мало.
Где-то тут на вашем блоге видела статью об изменении вида кнопочек. Интересно, можно ли кнопочку "Сокрытия комментариев" сделать иной, изменить стиль.
К примеру что-то похожее на: http://s1.radikale.ru/uploads/2015/11/13/d0cede23fe665c46cd4e28133455fd7d-full.png
В любом случае спасибо вам еще раз! Пошла дальше читать ваши интересные уроки! =)))
Для селектороа .comments .thread-toggle можно установить любой стиль, если такой же как на картинке, просто скопируйте код для этой кнопки и вставьте его к данному селектору.
УдалитьЗдравствуйте! Подскажите, пожалуйста, как на примере данного кода сделать обычный спойлер?
ОтветитьУдалитьВ вашем варианте мне нравится скольжение, чего нет в других спойлерах.
Подскажи как сделать чтоб на стартовой странице (главной), не заходя ни в какие статьи и сообщения, чтоб сразу внизу страницы можно было писать встроенные комментарии
ОтветитьУдалить