TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Простий віджет значків соціального доступу для Weebly

107

Сьогодні соціальний обмін є невід’ємною частиною будь -якого веб -сайту. Вони дозволяють користувачам миттєво поширювати інформацію за кілька кліків, ділившись вашою статтею. Хоча маркетинг у соціальних мережах є популярною темою, конструктори сайтів, такі як Weebly, не пропонують користувачам віджет соціального доступу. На жаль, навіть користувачі бізнес -плану на Weebly не матимуть на своєму сайті гідних значків спільного доступу до соціальних мереж після сплати майже 25 доларів на місяць. У цій статті ми створимо власний віджет спільного доступу до соціальних мереж для веб -сайту Weebly та пояснимо, як додати його на свій веб -сайт із посиланнями на соціальний обмін.

На жаль, це потрібно зробити на кожній сторінці, додавши URL -адресу сторінки. Перегляньте нашу окрему статтю про те, як додати соціальні іконки за замовчуванням, а також спеціальний віджет спінінгових іконок для додавання соціальних профілів на ваш сайт Weebly.

Спеціальний віджет значків соціального доступу CSS

Оскільки мета цієї статті не обговорює аспект дизайну, ми надамо повний код CSS, як показано нижче. В основному ми використовуємо чудові шрифти для соціальних іконок шириною контейнера 300 пікселів для розміщення п’яти соціальних іконок – Facebook, Twitter, Google+, Pinterest та LinkedIn.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <style> /* Container */ .column { width: 300px; } /* Individual Icons with first Box for Facebook */ .box { background-color: #3b5998; color: rgba(251, 244, 217, 0.99); display: block; width: 17%; text-align: center; float: left; margin-right: 1px; border-radius: 50%; } /* Twitter */ .box:first-child + .box { background-color: #55acee; } /* Google+ */ .box:first-child + .box + .box { background-color: #dc4e41; } /* Pinterest */ .box:first-child + .box + .box + .box { background-color: #bd081c; } /* LinkedIn */ .box:first-child + .box + .box + .box +.box { background-color: #0077b5; } /* Link Effects */ .column a { text-decoration: none; color: #ffffff; outline: none; -webkit-transition: 0.5s ease; transition: 0.5s ease; } /*Font Awesome Icons Effects */ .box .fa { margin: 10px; display: block; font-size: 26px; } /* Box Hover Effects */ .box:hover { opacity: 0.7; } </style>

HTML для віджетів значків спільного доступу до соціальних мереж

Нижче наведено HTML -код разом із спільною URL -адресою для соціального віджета:

<div class="column"> <a href="https://www.facebook.com/sharer/sharer.php?u=www.webnots.com" class="box"> <div class="fa fa-facebook"></div> </a> <a href="https://twitter.com/home?status=www.webnots.com" class="box"> <div class="fa fa-twitter"></div> </a> <a href="https://plus.google.com/share?url=www.webnots.com" class="box"> <div class="fa fa-google-plus"></div> </a> <a href="https://pinterest.com/pin/create/button/?url=http%3A//img.webnots.com/2015/06/header_logo_home_2x.png&media=www.webnots.com&description=" class="box"> <div class="fa fa-pinterest"></div> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=www.webnots.com&title=YOUR%20TITLE%20HERE&summary=&source=" class="box"> <div class="fa fa-linkedin"></div> </a> </div>

На опублікованому веб -сайті віджет виглядатиме так:

Ми використовували цю URL -адресу сайту, замінивши відповідний вміст, як зазначено нижче, у HTML:

  • Facebook, Twitter та Google+ – замініть URL -адресу свого сайту.
  • Pinterest – замініть зображення та URL -адресу.
  • LinkedIn – замініть URL -адресу та назву сайту.

Якщо ви хочете використовувати як віджет "слідкуйте за нами", просто замініть URL -адреси в частині "href" своїми посиланнями на соціальний профіль.

Додавання CSS та HTML у Weebly

  • Вставте CSS у розділ “Код заголовка" потрібної сторінки або розмістіть його у “Налаштуваннях”, щоб код став ефективним на рівні сайту. Дізнайтеся більше про те, як додати CSS на веб -сайт Weebly.

Простий віджет значків соціального доступу для Weebly

Додайте код заголовка на сторінку

  • Додайте вміст HTML на сторінку, де потрібно розмістити значки, за допомогою елемента «Вставити код ».
  • Публікуйте свій сайт, щоб побачити дію піктограм спільного доступу.

Налаштування віджета

  • Хоча ми пояснили п’ятьма іконками, ви можете додати будь -яку кількість піктограм. Зверніться до кодів кольорів соціальних іконок, щоб підібрати колір для ваших піктограм.
  • Ширина повного контейнера становить 300 пікселів для автоматичного вирівнювання значків на мобільних пристроях. Якщо ви додаєте більше значків, обов’язково використовуйте запити @media для відповідного вирівнювання значків на мобільних пристроях.
  • Ширина окремої піктограми становить 17% у класі CSS ".box", яку можна зменшити або збільшити відповідно до ваших потреб.
  • Розмір піктограми 26px з класом CSS ".box .fa", який можна змінити відповідно до ваших потреб.
  • Якщо ви додаєте інші значки, просто додайте “+ .box” та визначте колір фону піктограм.

Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі