Алина, веб-дизайнер | Taplinkpro дизайн & лайфстайл
→ создаю сайты, которые приносят клиентов и увеличивают продажи в x5
→ сайт с информацией об услугах нижеАлина, веб-дизайнер | Taplinkhttps://teletype.in/atom/caassper2026-06-16T03:46:14.446Zcaassper:ZswOm4OH1EWБИБЛИОТЕКА HTML-КОДОВ2023-08-22T10:20:01.086Z2023-08-22T10:20:01.086Z<img src="https://img3.teletype.in/files/65/c8/65c8275e-3aa4-42e0-b1ea-a5db6ff6466b.jpeg">Я рада, что тебя заинтересовала данная статья, в ней я тебе расскажу про HTML-коды и дам парочку кодов для твоих проектов♥
<p id="8vrX">Я рада, что тебя заинтересовала данная статья, в ней я тебе расскажу про HTML-коды и дам парочку кодов для твоих проектов♥</p>
<figure id="Bu6c" class="m_column">
<img src="https://img3.teletype.in/files/65/c8/65c8275e-3aa4-42e0-b1ea-a5db6ff6466b.jpeg" width="1200" />
</figure>
<h2 id="457v">Для чего нужен HTML-код?</h2>
<p id="P19o">Мы будем разбираться с этим на основе платформы Taplink.</p>
<p id="9zgD">Блок HTML-кода служит для добавления нестандартных объектов, которых нет среди стандартных блоков Taplink. Для использования этого инструмента крайне желательно понимать что такое HTML и иметь базовые знания в этой области.</p>
<p id="iJEQ">Применение этого инструмента может быть самое разное. Например, для добавления текста с нестандартным форматированием, таблицы и т.д. Также через HTML-код можно интегрировать формы со сторонних сайтов, виджеты и прочее.</p>
<p id="Q3Se">Проверять совместимость интегрируемого кода с Taplink нужно экспериментально, в этом вопросе есть нюансы, зависящие от особенностей вставляемого кода. И для того чтобы с этим не мучиться, есть 100% подходящие коды, именно для этой платформы.</p>
<h2 id="sowm">Код раскрываек (при нажатии выдает информацию)</h2>
<p id="NjZW"><strong>Этот код вставляем в Настройки - Общие - HTML :</strong></p>
<section style="background-color:hsl(hsl(24, 24%, var(--autocolor-background-lightness, 95%)), 85%, 85%);">
<p id="xHPd"><style></p>
<p id="oL9L">:focus {outline-width: 0px;}</p>
<p id="1Lwo">details summary::-webkit-details-marker {display: none}</p>
<p id="95Z1">details > summary {list-style: none;}</p>
<p id="mZBk">summary {cursor: pointer;}</p>
<p id="OcaP">details[open] summary ~ * {animation: open .5s ease-in-out;}</p>
<p id="WcqX">@keyframes open { 0% {opacity: 0; }100% {opacity: 1; }}</p>
<p id="Mnev">:focus {outline: 0;}</p>
<p id="Sm4w"></style></p>
</section>
<p id="lQTo"><strong>А это код одной раскрывашки</strong></p>
<p id="YPfX">Вставляем на страницу в блок HTML. И дублируем необходимое количество раз:</p>
<section style="background-color:hsl(hsl(24, 24%, var(--autocolor-background-lightness, 95%)), 85%, 85%);">
<p id="45oM"><details></p>
<p id="pIaJ"><summary></p>
<p id="mdpF"><img src="ССЫЛКА_НА_КАРТИНКУ_КНОПКИ"></p>
<p id="aA71"></summary></p>
<p id="xviz"><img src="ССЫЛКА_НА_ВНУТРЕННЮЮ_КАРТИНКУ"></p>
<p id="RpYY"></details></p>
</section>
<p id="XrDh"><strong>Если вылазят дополнительные отступы и едет выравнивание -</strong></p>
<p id="v88t"><strong>перед кодом раскрывашек или в любом месте добавляем </strong></p>
<section style="background-color:hsl(hsl(24, 24%, var(--autocolor-background-lightness, 95%)), 85%, 85%);">
<p id="3Gjh"><style></p>
<p id="GXK9">.block-html {</p>
<p id="EbB7">margin: auto -14px!important;</p>
<p id="7UwE">}</p>
<p id="btfL"></style></p>
</section>
<p id="nuOd"></p>
<section style="background-color:hsl(hsl(24, 24%, var(--autocolor-background-lightness, 95%)), 85%, 85%);">
<p id="LJkR">Для того, чтобы вставить ссылку на картинку - используем хостинг (например этот <a href="https://ru.imgbb.com/" target="_blank">https://ru.imgbb.com/</a>)</p>
</section>
<h2 id="SeCS">Убираем надпись "разработано на Таплинк" (в тарифе pro)</h2>
<p id="aXtv"><strong>*Этот код вставляем в Настройки - Общие - HTML*</strong></p>
<section style="background-color:hsl(hsl(24, 24%, var(--autocolor-background-lightness, 95%)), 85%, 85%);">
<p id="Qdwv"><style></p>
<p id="xLik">.footer-link {</p>
<p id="NFbR">display: none;</p>
<p id="mi0A">}</p>
<p id="OXXO"></style></p>
</section>
<h2 id="aWG5">Карусель в раскрывашке</h2>
<p id="I69b">Используем код раскрывашки (он находится выше), в него добавляем нашу карусель по инструкции в этой ссылке <a href="https://www.instagram.com/tv/CUUDNtUA4Ty/" target="_blank">https://www.instagram.com/tv/CUUDNtUA4Ty/</a></p>
<p id="8J8H">Обратите внимание, что в строку ССЫЛКА_НА_ВНТУРЕННЮЮ_КАРТИНКУ можно добавить баннер с маленьким куском вашего фона - это нужно, чтобы работал код, на самом деле вместо этого у вас будет карусель, которую вы ставите в коде ниже.</p>
<p id="MsT3">Скачать видео с инсты можно через этот сервис<br /><a href="https://instagrabber.ru" target="_blank">https://instagrabber.ru</a></p>
<p id="hsC3"><strong><u>Всем спасибо за прочтение этой статьи, жду обратной связи 🤝🏻</u></strong></p>