Как сделать свою кнопку «Загрузить еще» в новостных блоках Тильда
С помощью этой модификации можно добавить свою кнопку «Загрузить ещё» для блоков новостей на Tilda. При нажатии будут подгружаться новости без перезагрузки страницы. Поддерживаются блоки FD101, FD201, FD301 и FD302
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD105--><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 с кнопкой автоматически скрывается. Не размещайте внутри этого блока другой важный контент, чтобы он тоже не исчез.