Алина, веб-дизайнер | Taplinkteletype.inhttps://img2.teletype.in/files/9d/1a/9d1a6dcf-b0fa-4994-b709-cee3552e23b9.pngАлина, веб-дизайнер | Taplinkhttps://teletype.in/@caassperhttps://teletype.in/@caassper?utm_source=teletype&utm_medium=feed_rss&utm_campaign=caassperTue, 16 Jun 2026 03:47:03 GMTTue, 16 Jun 2026 03:47:03 GMThttps://teletype.in/@caassper/ZswOm4OH1EWhttps://teletype.in/@caassper/ZswOm4OH1EW?utm_source=teletype&utm_medium=feed_rss&utm_campaign=caassperhttps://teletype.in/@caassper/ZswOm4OH1EW?utm_source=teletype&utm_medium=feed_rss&utm_campaign=caassper#commentscaassperБИБЛИОТЕКА HTML-КОДОВTue, 22 Aug 2023 10:20:01 GMTЯ рада, что тебя заинтересовала данная статья, в ней я тебе расскажу про HTML-коды и дам парочку кодов для твоих проектов♥]]>Я рада, что тебя заинтересовала данная статья, в ней я тебе расскажу про HTML-коды и дам парочку кодов для твоих проектов♥

Для чего нужен HTML-код?

Мы будем разбираться с этим на основе платформы Taplink.

Блок HTML-кода служит для добавления нестандартных объектов, которых нет среди стандартных блоков Taplink. Для использования этого инструмента крайне желательно понимать что такое HTML и иметь базовые знания в этой области.

Применение этого инструмента может быть самое разное. Например, для добавления текста с нестандартным форматированием, таблицы и т.д. Также через HTML-код можно интегрировать формы со сторонних сайтов, виджеты и прочее.

Проверять совместимость интегрируемого кода с Taplink нужно экспериментально, в этом вопросе есть нюансы, зависящие от особенностей вставляемого кода. И для того чтобы с этим не мучиться, есть 100% подходящие коды, именно для этой платформы.

Код раскрываек (при нажатии выдает информацию)

Этот код вставляем в Настройки - Общие - HTML :

<style>

:focus {outline-width: 0px;}

details summary::-webkit-details-marker {display: none}

details > summary {list-style: none;}

summary {cursor: pointer;}

details[open] summary ~ * {animation: open .5s ease-in-out;}

@keyframes open { 0% {opacity: 0; }100% {opacity: 1; }}

:focus {outline: 0;}

</style>

А это код одной раскрывашки

Вставляем на страницу в блок HTML. И дублируем необходимое количество раз:

<details>

<summary>

<img src="ССЫЛКА_НА_КАРТИНКУ_КНОПКИ">

</summary>

<img src="ССЫЛКА_НА_ВНУТРЕННЮЮ_КАРТИНКУ">

</details>

Если вылазят дополнительные отступы и едет выравнивание -

перед кодом раскрывашек или в любом месте добавляем

<style>

.block-html {

margin: auto -14px!important;

}

</style>

Для того, чтобы вставить ссылку на картинку - используем хостинг (например этот https://ru.imgbb.com/)

Убираем надпись "разработано на Таплинк" (в тарифе pro)

*Этот код вставляем в Настройки - Общие - HTML*

<style>

.footer-link {

display: none;

}

</style>

Карусель в раскрывашке

Используем код раскрывашки (он находится выше), в него добавляем нашу карусель по инструкции в этой ссылке https://www.instagram.com/tv/CUUDNtUA4Ty/

Обратите внимание, что в строку ССЫЛКА_НА_ВНТУРЕННЮЮ_КАРТИНКУ можно добавить баннер с маленьким куском вашего фона - это нужно, чтобы работал код, на самом деле вместо этого у вас будет карусель, которую вы ставите в коде ниже.

Скачать видео с инсты можно через этот сервис
https://instagrabber.ru

Всем спасибо за прочтение этой статьи, жду обратной связи 🤝🏻

]]>