floatright

[floatright]

Варианты структуры отдельных блоков на странице

Примеры структур блоков:

Одноколоночный блок: Простой и классический вариант, подходит для размещения текста, изображений или небольших форм.

Двухколоночный блок: Позволяет разместить два элемента рядом, например, текст и изображение.

Трехколоночный блок: Подходит для разделения информации на несколько частей или создания галереи.

Карточный блок: Используется для отображения списка элементов с изображениями и кратким описанием.

Слайдер: Позволяет прокручивать несколько элементов, например, фотографии или отзывы.

Видео: Встраивание видео в блок может быть эффективным способом привлечения внимания и удержания пользователей на странице.

Форма: Используется для сбора информации от пользователей, например, подписки на ра��сылку или оформления заказа.

[floatright]

Как выбрать последний элемент с определенным классом

Приведу сразу пример .faq-wrap:nth-last-child(1 of .faq-border) { border-bottom: none; }

Этот CSS-селектор выбирает последний элемент с классом wp-block-faq-block-for-gutenberg-faq среди всех элементов с этим классом.

Разберем:

.faq-wrap: Это класс, который, например, применяется к блокам вопросов-ответов (FAQ).

:nth-last-child(1 of .faq-border):

:nth-last-child() - этот псевдокласс выбирает элемент, который является определенным по счету, начиная с конца группы элементов.

1 - означает, что мы выбираем первый элемент с конца.

of .faq-border - уточняет, что мы считаем элементы только среди тех, у которых есть класс faq-wrap.

По сути, этот селектор позволяет применить стили только к последнему блоку FAQ на странице.

Пример использования:

CSS

.faq-wrap:nth-last-child(1 of .faq-border) { border-bottom: none; }

Этот код удалит нижнюю границу только у последнего блока FAQ, что может быть полезно для создания более чистого визуального оформления.

[floatright]

Ссылка onclick для блока

Ссылка в исходном коде будет иметь такой вид: div onclick="window.location.href='http://www.google.com'">anywhere</div

Функция принимает класс блока. Внутри каждого блока находит первую ссылку (). Получает href этой ссылки. Добавляет атрибут onclick к блоку с вызовом window.location.href = 'URL'

function addOnclickToBlock(blockClass) { // Находим все блоки с переданным классом $(blockClass).each(function() { // Находим первую ссылку внутри блока var link = $(this).find('a').first().attr('href'); // Проверяем, что ссылка существует if (link) { // Добавляем атрибут onclick к текущему блоку $(this).attr('onclick', 'window.location.href="' + link + '"'); } });

}

// Пример использования addOnclickToBlock('.block-class');

[floatright]

telegram как создать превью для сайта

Как Telegram генерирует превью:

Telegram извлекает информацию для превью из HTML-кода страницы. Основными факторами, влияющими на формирование превью, являются:

Теги Open Graph: Эти теги позволяют вебмастерам указывать, как должна выглядеть страница при совместном использовании в социальных сетях.

Заголовки и описания: Заголовок страницы (тег ) и мета-описание (тег <meta name="description">) также используются для создания превью.

Изображения: Изображение, указанное в теге , будет использоваться как превью.

Создание привлекательного превью:

Выберите подходящее изображение: Изображение должно быть ярким, четким и соответствовать тематике страницы. Рекомендуемый размер: 1200x630 пикселей.

Оптимизируйте изображение: Сохраните изображение в формате JPEG или PNG с оптимальным уровнем сжатия.

Напишите заголовок и описание: Заголовок должен быть кратким и информативным, а описание — дополнять заголовок и заинтересовать пользователя.

Используйте специальные сервисы: Существуют сервисы, которые позволяют создавать и предварительно просматривать превью для различных социальных сетей, включая Telegram.

Проверка и отладка превью:

Проверьте отображение превью в Telegram: Отправьте ссылку на свой канал или в личные сообщения и посмотрите, как выглядит превью.

Используйте инструменты для отладки: Существуют специальные инструменты, которые позволяют проверить, как браузеры интерпретируют теги Open Graph.

Исправьте ошибки: Если превью отображается неправильно, проверьте правильность написания тегов и наличие всех необходимых атрибутов.

Дополнительные советы:

Используйте ботов: Некоторые боты для Telegram позволяют автоматически генерировать превью для ваших ссылок.

Создавайте динамические превью: Используйте JavaScript для создания превью, которое будет меняться в зависимости от содержимого страницы.

Вдохновляйтесь примерами: Изучайте успешные превью других каналов и сайтов.

Пример кода для добавления тегов Open Graph:

<meta property="og:title" content="Заголовок для превью"/> <meta property="og:description" content="Описание для превью"/> <meta property="og:image" content="https://example.com/image.jpg"/>

Эта заметка будет полезна как для начинающих, так и для опытных пользователей, которые хотят улучшить внешний вид своих ссылок в мессенджере.

[floatright]

Плавная прокрутка к якорю с помощью CSS

Плавная прокрутка на веб-страницах — это не только удобно, но и улучшает пользовательский опыт, особенно на сайтах с длинным содержимым. Вместо того чтобы использовать громоздкие JavaScript-скрипты, можно задействовать всего одну строку CSS-кода.

Простой код CSS для плавной прокрутки: html { scroll-behavior: smooth; }

Почему стоит использовать этот подход?

Простота: В отличие от решений на JavaScript, CSS-реализация не требует дополнительных библиотек или написания функций.

Производительность: Нет необходимости загружать и выполнять JavaScript, что делает сайт быстрее.

Кроссбраузерность: Свойство scroll-behavior поддерживается большинством современных браузеров.

Для тех, кто раньше использовал JavaScript

Вместо громоздкого кода вроде:

$('.scrollto a').on('click', function() { let href = $(this).attr('href'); $('html, body').animate({ scrollTop: $(href).offset().top }, { duration: 370, easing: "linear" }); return false; });

Достаточно вспомнить о scroll-behavior и добавить его в стили.

На заметку

Я часто забываю о полезности этого свойства, особенно когда верстаю страницы с якорными ссылками. Поэтому решил написать эту заметку, чтобы напомнить себе и другим: используйте CSS для плавной прокрутки и забудьте о сложных скриптах!