Добавление и настройка значков социальных сетей на сайте Weebly

Добавить значки социальных сетей на сайт Weebly

Элемент Weebly «Социальные значки» включает социальные элементы на вашем сайте Weebly, чтобы помочь посетителям легко следить за вашим социальным содержанием в Facebook, Twitter или YouTube. Этот элемент позволяет добавить только следующую ссылку, но не ссылку для общего доступа. После перетаскивания в область содержимого пользователи могут щелкнуть опцию «Управление значками», чтобы включить или отключить одну из доступных социальных ссылок. Weebly предлагает следующие значки социальных сетей:

  • Facebook
  • Twitter
  • Google+
  • YouTube
  • LinkedIn
  • Flickr
  • Pinterest
  • Vimeo
  • Yahoo!
  • RSS
  • Почта

Добавление социальных иконок в Weebly

У вас есть много вариантов для добавления значков социальных сетей на сайт Weebly с использованием элемента социальных сетей по умолчанию или встроенного элемента кода:

  • В шапке сайта
  • В области содержания сайта
  • На боковой панели блога
  • Использование элемента встроенного кода

В дополнение к этому пользователи Weebly Pro также могут добавить элемент социальных иконок в нижний колонтитул сайта. Ниже приведен пример настраиваемых вращающихся значков социальных сетей для Weebly, читайте дальше, чтобы получить код.










Включить социальные элементы в заголовке сайта Weebly

В своей учетной записи Weebly выберите сайт, который хотите отредактировать. На вкладке «Дизайн» вы можете увидеть «Элементы дизайна», чтобы включить или отключить значки социальных сетей. Как только вы включите эту опцию, вы увидите четыре значка по умолчанию, видимые в заголовке вашего сайта. Выровняйте значки социальных сетей, перемещая их вверх или вниз, или удалите их, если они вам не нужны. Нажмите на опцию «Добавить еще», чтобы включить больше значков из раскрывающегося списка.

Включить социальные элементы в заголовке Weebly

Включить социальные элементы в заголовке Weebly

Включение социальных элементов в контенте сайта Weebly

У вас также есть возможность перетащить элемент социальных значков в область содержимого вашего сайта. Элемент социальных иконок доступен на вкладке «Дополнительные элементы».

Включение социальных элементов в контенте сайта Weebly

Включение социальных элементов в контенте сайта Weebly

Некоторые темы Weebly поддерживают только четыре основные социальные кнопки, такие как Facebook, Twitter, LinkedIn и RSS-канал, как показано ниже.

Частичные социальные элементы в Weebly

Частичные социальные элементы в Weebly

Измените тему своего сайта на последнюю, чтобы активировать полный список кнопок социальных сетей, включая Flickr, Pinterest, YouTube и многие другие. Вы можете добавлять только те значки, которые вам нужны, и менять их порядок по своему усмотрению.

Полные социальные элементы в Weebly

Полные социальные элементы в Weebly

Элементы боковой панели блога

Если вы добавляете страницу блога, у вас есть дополнительная возможность использовать значок Flicker и кнопку LinkedIn на боковой панели блога. Значок Twitter и элементы Delicious, доступные в старом интерфейсе, были удалены в новый интерфейс.

Социальные элементы на боковой панели блога

Социальные элементы на боковой панели блога

Пользовательские социальные иконки Spinning для сайта Weebly

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










Чтобы добавить настраиваемый набор значков социальных сетей, вам необходимо подготовить изображения для социальных ссылок приблизительного размера 60 x 60 пикселей. Загрузите изображения под «Дизайн> Редактировать HTML / CSS> Ресурсы> Загрузить файл (ы)«. URL-адрес загруженного изображения будет выглядеть следующим образом:

http://<Your Site Name>.weebly.com/files/theme/<Image Name>

Если вы хотите добавить значки, расположенные более чем на одной странице, добавьте следующий код CSS в «Дизайн> Редактировать HTML / CSS> Ресурсы> main_style.css«. Если вы хотите добавить его только на определенные страницы, добавьте его в раздел «Страницы> Выбрать страницу> Дополнительные настройки> Код заголовка«.

<style type="text/css">
p#socialicons img{ 
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>

Затем перетащите значок «Код для вставки”И добавьте приведенный ниже HTML-код, заменив URL-адреса изображений своими собственными.

<p id="socialicons">
<a href="https://facebook.com/WebNots">
<img border="0" src="https://img.webnots.com/2013/04/facebook_social.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://twitter.com/WebNots">
<img border="0" src="https://img.webnots.com/2013/04/twitter_social.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://pinterest.com/WebNots">
<img border="0" src="https://img.webnots.com/2013/04/pinterest_social.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://youtube.com/user/webnots">
<img border="0" src="https://img.webnots.com/2013/04/youtube_social.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://google.com/+WebNots">
<img border="0" src="https://img.webnots.com/2013/04/googleplus_social.png" /></a>
</p>

Помимо элемента социальных иконок, Weebly также позволяет добавлять в сообщения в блоге значки социальных сетей Facebook и Twitter.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *