Как настроить "загрузить больше" комментариев с помощью CSS

Друзья, доброго времени суток. Знаете ли вы, что если у вас есть более 200 комментариев в любом сообщении, будут видны только эти 200 комментариев. Задалась вопросом, когда обратила внимание, что в моём разделе меню "вопрос - ответ" цифра уже подходила к этому рубежу. Вот буквально недавно, одна из моих постоянных читательниц написала очередной вопрос. Я его в гаджете последние комментарии вижу, а в самой ленте найти не могу.



Создалось такое впечатление, что на этом (в моём случае 141) комментарии закончены и всё. Кто не успел, тот опоздал. И потом внизу увидела маленькую ссылку ЕЩЁ, при нажатии на которую подгружаются следующие комментарии. Я сама с трудом разглядела, что уж говорить о посетителях. Так было

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

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

Как было вы могли видеть на фото выше и посмотрите сейчас в моей рубрике вопрос - ответ   как выглядит эта ссылка сейчас (не поленитесь прокрутить ленту). Собственно это и побудило к написанию данного сообщения.

Нам нужен вот такой код CSS. Ниже я напишу, как его изменить под ваш дизайн, а сейчас

1. Скопируйте готовый код
2. Заходим во вкладку тема в админ - панели.
3. Изменить HTML.
4. Находим строку ]] >></b:skin>
5. Сразу над ней вставляем готовый код.

 .loadmore {margin-bottom:5px;float:center;}
.loadmore a{color:#F8F8F8;background:#677e3b;padding:8px 14px;display:inline-block;font-size:16px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.loadmore a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none}

Меняйте стили на ваш вкус

background:#677e3b; - цвет кнопки

size:16px; - размер шрифта

loadmore a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C; стили при наведении курсора на кнопку.

-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} - стили рамки и тени.


Надпись в этом случае изменить нельзя, но мы можем сделать ссылку - картинку со своим текстом , которая покажет следующие комментарии. У меня не всегда хватает терпения возиться с графикой, но для примера я сделала простую кнопку - получилось примерно так

А это код для ссылки - картинки

 .loadmore {padding:25px;background-image:url('https://1.bp.blogspot.com/-iamncxIn3PU/XRM3wS0u6eI/AAAAAAAAMXQ/svk2t6Alm4oezzaEkzAQzkRYosdBelRvwCLcBGAs/s1600/%25D0%25B2%25D0%25BE%25D0%25BF%25D1%2580%25D0%25BE%25D1%2581.png');background-repeat:no-repeat;background-position:center;}
.loadmore a{font-size:0px;}

Мы просто заменили фон на адрес картинки в формате png.

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

Получайте новые сообщения с блога прямо на почту

Введите Ваш email