Найти в Дзене
Поддержите автораПеревод на любую сумму
Автора можно поддержать разовым переводом
Как ускорить загрузку страницы Taplink: оптимизация изображений и кода
Скорость загрузки страницы — один из ключевых факторов, влияющих на удобство пользователей и эффективность продвижения вашего Taplink. Медленная загрузка отпугивает посетителей и снижает конверсию. Рассмотрим основные способы ускорить загрузку страницы Taplink. Изображения часто являются самой «тяжёлой» частью страницы и сильно влияют на скорость загрузки. Чтобы минимизировать их вес, используйте специальные сервисы для сжатия без потери качества: Перед загрузкой в Taplink обязательно оптимизируйте...
3 дня назад
Секреты SEO для Taplink: как сделать страницу видимой в поисковиках
Taplink — удобный сервис для создания мини-сайтов и мультиссылок, но для успешного продвижения в поисковых системах нужно правильно настроить SEO. Рассмотрим основные шаги, которые помогут вашей странице на Taplink лучше индексироваться и привлекать трафик из Яндекса и Google. Метатеги — это важные элементы HTML, которые поисковики используют для понимания содержания страницы и отображения в выдаче. Заполнить эти поля можно в настройках Taplink: раздел «Настройки» → вкладка «Общие» → поля для SEO...
3 дня назад
Автоматически появляющийся HTML-баннер
Эта статья позволит разместить баннер с текстом и изображением, который появится на экране с установленной вами задержкой 1. Вставьте в HTML-блок на странице код: <div class="auto-popup-inner"> <div class="auto-popup"> <div class="text-container relative"> <div class="close-popup"> <span></span> <span></span> </div> <div class="text-container"><div class="block-text has-rtl is-heading"> Telegram-канал<br/> Besttaplink </div></div> <div class="text-container"><div class="block-text...
3 недели назад
Парный анимированный блок
Инструкция: <script src="https://unpkg.com/@phosphor-icons/web">try {} catch (e) { console.log('ERROR:', e); }</script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet"> <div class="cdmsu-double-block"> <div class="cdmsu-tab-block"> <label for="cdmsu-tab-block-first">Блок № 1</label> <input id="cdmsu-tab-block-first"...
3 недели назад
Cвой фоновый цвет блока
По умолчанию в Таплинке, для блока «Текст» нет возможности добавить свой фоновый цвет блока и нужно использовать «секции», но многие их не любят по разным причинам. Исправляем ситуацию с помощью кода и избавляемся от необходимости использовать...
3 недели назад
СНЕЖОК ДЛЯ ТАПЛИНКА
Нашел в интернете 2 классных варианта снега для таплинка Посмотреть первый: https://tap.one-way.dev/p/f0f631/ Посмотреть второй: https://tap.one-way.dev/p/f0f613/ Чтобы включить снежок, достаточно добавить html-блок с содержимым одного из двух кодов снега из инструкции: ПЕРВАЯ ВЕРСИЯ; Код: <script> /** @license * DHTML Snowstorm! JavaScript-based snow for web pages * Making it snow on the internets since 2003. You're welcome. * ----------------------------------------------------------- * Version 1.44.20131208 (Previous rev: 1.44.20131125) * Copyright (c) 2007, Scott Schiller. All rights reserved...
4 месяца назад
Адаптивное меню для таплинка (html-код)
Привет мой дорогой читатель, сегодня для тебя представлю html-код адаптивного меню для таплинка. Пиши вопросы в комментариях если возникнут по коду. Ниже представлен html-код данного меню, после кода написано дополнительное описание <header class="main-header"> <div class="menu-wrap"> <a href="#" target="_blank" class="logo-wrap"><!-- в место # вставляете свою ссылку для логотипа --> <img class="logo" src="http://ipic.su/img/img7/fs/adobe-logo-inteligencia-artificial-no-design-grafico-designe1.1650731586...
1639 читали · 2 года назад
Дополнения к коду "Блок вопрос-ответ"
А именно, как сделать скругление в данном коде вкладок Делаем скругление вкладок в блоке "ответ": Необходимо добавить значение border-radius: 10px; в следующей части кода: .acor-container .acor-body { width: calc(100% - 40px); margin: 0 auto; height: 0; color: rgba(0, 0, 0, 0); background-color: #BFE2FF; line-height: 18px; padding: 0 30px; box-sizing: border-box; transition: color 0.5s, padding 0.5s; overflow: hidden; font-family: Verdana, sans-serif; font-size: 16px; box-shadow: 0 4px 8px rgba(0,0,0,0...
434 читали · 2 года назад
Как выглядели бы города России в человеческом обличии
333 читали · 2 года назад
Не придумал название для кода, но думаю разберетесь
Данный код думаю подойдет для размещения какой либо информации. Сам код: <table class="grid"> <tbody> <tr> <td> <div class="item">Здесь можно <br>поставить текст</div> </td> <td> <div class="item"><div class="tapchips_donat_modwind"> <details> <summary> <img src="http://ipic.su/img/img7/fs/Frame14(1).1659528714.png" width="30"> </summary> <div class="tapchips_donat_modwind_overblock"> <div class="tapchips_donat_modwind_overblock_text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...
170 читали · 2 года назад
Интересные карточки для описания и картинки
При наведении курсора появляется настоящий цветовой эффект картинки, на фото видно. Как добавить карточку Сам код: <div class="stcard-container"> <div class="stcard"> <img alt="image" src="http://ipic.su/img/img7/fs/19072.1668169519.jpg"/> <div class="stcard-title">Название карточки</div> <p>Описание карточки</p> </div> <div class="stcard"> <img alt="image" src="http://ipic.su/img/img7/fs/19072.1668169519.jpg"/> <div class="stcard-title">Название...
159 читали · 2 года назад