Как сделать свою кнопку «Загрузить еще» в новостных блоках Тильда

С помощью этой модификации можно добавить свою кнопку «Загрузить ещё» для блоков новостей на Tilda. При нажатии будут подгружаться новости без перезагрузки страницы. Поддерживаются блоки FD101, FD201, FD301 и FD302

Модификация работает с включенным Autoscale в блоках

Модификация работает только со стандартными блоками

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

Id блока новостей

Класс кнопки

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

<style> #rec699637362 .t-feed__showmore-btn, .t-feed__buttons-wrapper { height: 0px !important; visibility: hidden; margin-top: 10px !important; } .ti-loadbtn-news { cursor: pointer; } </style> <script> function TCDmorebtnnews() { const TCDshowMoreBtn = document.querySelector('#rec699637362 .t-feed__showmore-btn'); if (TCDshowMoreBtn) { TCDshowMoreBtn.click(); setTimeout(function () { const TCDisHidden = getComputedStyle(TCDshowMoreBtn).display === 'none'; if (TCDisHidden) { const TCDloadBtn = document.querySelector('.ti-loadbtn-news'); if (TCDloadBtn) { const record = TCDloadBtn.closest('.r'); if (record) { record.style.display = 'none'; } } } }, 500); } } document.addEventListener('DOMContentLoaded', function () { const tiLoadBtnns = document.querySelector('.ti-loadbtn-news'); if (tiLoadBtnns) { tiLoadBtnns.addEventListener('click', TCDmorebtnnews); } }); </script> <script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>

КОПИРОВАТЬ КОД

1. Создаем блок потоков (FD101, FD201, FD301 или FD302), копируем id блока и вставляем в генератор кода.

2. В настройках блока (во вкладке "основные настройки") указываем количество видимых новостей до кнопки "загрузить еще", а в контенте блока (во вкладке "дополнительно") указываем любой текст для кнопки "загрузить еще". Текс не важен так как оригинлаьная кнопка будет скрыта.

2. Добавляем Zero Block и создаем кнопку (можно также использовать текст, шейп или картинку). Кнопке присваиваем класс ti-loadbtn-news
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

3. Копируем готовый код и вставляем в HTML блок Т123. Блок кода размещаем под зеро блоком с кнопкой.

Примечание! Если все новости уже загружены - Zero Block с кнопкой автоматически скрывается. Не размещайте внутри этого блока другой важный контент, чтобы он тоже не исчез.

Загрузить еще сервисы