Безусловно, что показ контента вашего на сайте очень важен, но однако на веб-странице так много контента и очень мало места. И прежде чем гость или пользователь перестанет прокручивать страницу, и не найдет, то что ему нужно. И для этого был создан элемент функций для посетителей веб-сайта, где можно внедрить этот метод методы для отображения контента наиболее интуитивно понятным способом.
Теперь эту функцию, назовем ее «Загрузить больше» может быть реализован с помощью CSS, где не нужно применять JavaScript, JQuery или библиотеки. Также вы можете расположить изначально скрытым любой функционал или материал, но так, что изначально будет понятно, что при клике далее будет находиться. Но думаю вы поняли смысл этого материала, который самостоятельно можете создать.
Изначально при открытие сайта так наблюдаем:
Как сделать кнопку в html | Уроки HTML, CSS
При клике с дальнейшим просмотром открывается остальная информация:
Установочный процесс:
.zagruska-proizvod-container <
background: #fff;
width: 500px;
min-height: 500px;
margin: 20px auto;
position: relative;
>
.zagruska-proizvod-container ul <
list-style-type: none;
padding: 0;
>
.zagruska-proizvod-container ul:after <
content: «»;
display: table;
clear: both;
>
.zagruska-proizvod-container ul li <
width: calc(25% — 10px);
margin: 10px 5px 0;
height: 100px;
background: #1D95F8;
color: #fff;
float: left;
border-radius: 2px;
>
.zagruska-proizvod-container ul li:nth-child(1n + 5) <
max-height: 0;
opacity: 0;
transition: 0.1s ease-in;
>
.zagruska-proizvod-container .zagruska-proizvod-btn <
width: 264px;
line-height: 42px;
border-radius: 5px;
margin: 0 auto;
display: block;
background: #3d3c50;
color: #f5f2f2;
cursor: pointer;
text-align: center;
>
.zagruska-proizvod-container .zagruska-proizvod-btn:hover <
background: #211e1e;
>
.zagruska-proizvod-container .zagruska-proizvod-btn .loaded <
display: none;
>
.zagruska-proizvod-container #zagruska-proizvod <
display: none;
>
.zagruska-proizvod-container #zagruska-proizvod:checked ~ ul li:nth-child(1n + 5) <
max-height: 999px;
opacity: 1;
transition: 0.2s ease-in;
>
.zagruska-proizvod-container #zagruska-proizvod:checked ~ .zagruska-proizvod-btn .loaded <
display: block;
>
.zagruska-proizvod-container #zagruska-proizvod:checked ~ .zagruska-proizvod-btn .unloaded <
display: none;
>
Но, где при всем этом, предоставляя, объем контента, который может потребоваться посетителям, а просто нажать кнопку, где откроется остальном материал или изображение, что по умолчанию он был скрыт, и только вверх можно было рассмотреть.
Это функция довольно актуальна, которую вы должны использовать на своем сайте, или для тех веб разработчиков, где считают, что на сайте мало место, и здесь будет отличным решение применить это метод.
Видео обзор:
Источник: zornet.ru
Как добавить cоциальные кнопки на свой сайт
Эта статья является юбилейной, трехсотой на моем блоге. И в ней я хочу рассказать как добавить cоциальные кнопки на свой сайт и отслеживать по ним события. Статья хоть и юбилейная, но получилась не очень большой.
Чтобы помочь вашему блогу получить больше читателей, вы можете использовать социальные кнопки, которые позволяют вашим текущим читателям делиться интересными сообщениями на своих учетных записях в социальных сетях. Но как вы должны их реализовать? В этом посте я объясню, как это сделать и дам вам несколько указаний о том, как начать работу.
Что такое социальные кнопки?
Для тех, кто не знает, что такое социальные кнопки: это кнопки, которые вы видели в интернете, которые обычно размещаются где-то ниже сообщения в блоге, что позволяет читателям делиться статьями на различных платформах социальных сетей. Это отлично подходит для получения дополнительной экспозиции и, следовательно, также увеличения трафика на ваш сайт.
Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет.
На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
На моем сайте социальные кнопки выглядят следующим образом:
Как реализовать эти социальные кнопки в WordPress?
Теперь вам может быть интересно, как эти кнопки были реализованы. Ваша первоначальная мысль может заключаться в том, что за этим стоит какой-то плагин. Однако я решил добавить кнопки непосредственно в свою тему. Это дает мне дополнительный контроль над тем, как стилизовать и отображать эти вещи. Конечно, я мог бы добавить эти кнопки и плагином, но дополнительное преимущество было бы минимальным для меня.
Я решил поместить код для социальных кнопок в отдельный файл шаблона. Таким образом, мы можем легко внедрить его на веб-сайт без необходимости резкого изменения файлов шаблонов или необходимости вставлять кнопки вручную для каждой публикации.
Вот основной пример того, как я реализовал социальную кнопку для Facebook. Обратите внимание, что не весь код является фактическим производственным кодом и был заменен на псевдо-код, чтобы упростить реализацию.
Вышеприведенный код может использоваться аналогичным образом для других платформ социальных сетей, но он может сильно различаться с точки зрения структуры URL. Я рекомендую вам ознакомиться с документацией на ваших необходимых платформах, чтобы обеспечить совместимость.
Чтобы включить эти социальные кнопки в сообщения своего блога, откройте файл single.php в папке своей темы и вставьте следующий фрагмент, в котором вы хотите, чтобы кнопки отображались:
Это оно! Если вы не хотите собирать данные взаимодействия с этих кнопок, тогда это все, что вам нужно. Если вы хотите, чтобы взаимодействия отслеживались, читайте дальше.
Отслеживание взаимодействия социальных кнопок
Наличие красиво оформленных социальных кнопок на вашем сайте — это одно, но отслеживание фактических взаимодействий с ними будет еще лучше.
Я использую JavaScript для обеспечения правильного отслеживания обмена социальными сетями, чтобы мог легко увидеть, какие социальные медиа-платформы популярны среди моих читателей.
Код для этого относительно прост и зависит от правильного внедрения Google Analytics Tracker на ваш сайт. Предполагая, что это так, следующий код будет очень полезен:
jQuery( document ).ready( function( $ ) < $( ‘.socialbox a’ ).click( function( e ) < e.preventDefault(); if ( typeof __gaTracker !== «undefined» ) < __gaTracker( ‘send’, ‘social’, $( this ).data( ‘name’ ), $( this ).data( ‘action’ ), document.querySelector( «link[rel=’canonical’]» ).getAttribute( «href» ) ); >>); >);
Вышеупомянутый фрагмент кода JavaScript передает некоторую дополнительную информацию, которую мы передали вместе с тегом привязки. Эта дополнительная информация может быть идентифицирована data-префиксом и извлекается при вызове $( this ).data( […] ). Этот метод позволяет нам легко расширять div для социальных долей и добавлять больше кнопок.
Вывод
Как вы можете видеть, добавить социальные кнопки в свой блог не так уж сложно. Даже отслеживание их в Google Analytics стало легким по сравнению с прошлыми реализациями.
Осталось только пойти и реализовать кнопки и позволить вашим читателям продвигать ваши сообщения. Удачи!
P.S. Хочу признаться: раньше кнопки стояли кодом, как и описано выше. Сейчас, когда я сделал новую тему для своего блога на Bootstrap, я решил не заморачиваться с кодом, а просто найти подходящий плагин. И такой нашелся очень быстро — плагин называется «UpToLike«. Можете поэкспериментировать с ним.
Мне очень понравился.
На этом все — до скорых встреч.
А какой плагин социальных сетей используете на своем сайте Вы? Ответы жду в комментариях.
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.
Источник: zacompom.ru