TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Prosty widżet ikon udostępniania społecznościowego dla Weebly

8

W dzisiejszych czasach udostępnianie społecznościowe jest istotną częścią każdej strony internetowej. Umożliwiają użytkownikom natychmiastowe rozpowszechnianie informacji za pomocą kilku kliknięć, udostępniając swój artykuł. Chociaż marketing w mediach społecznościowych jest popularnym tematem, twórcy witryn, tacy jak Weebly, nie oferują użytkownikom widżetu udostępniania społecznościowego. Niestety, nawet użytkownicy biznesplanów w Weebly nie będą mieli przyzwoitych ikon udostępniania w swojej witrynie po zapłaceniu prawie 25 USD miesięcznie. W tym artykule utworzymy niestandardowy widget udostępniania społecznościowego CSS dla witryny Weebly i wyjaśnimy, jak dodać go do witryny Weebly za pomocą linków do udostępniania społecznościowego.

Niestety należy to zrobić na każdej stronie, dodając adres URL strony. Zapoznaj się z naszym osobnym artykułem na temat dodawania domyślnych ikon społecznościowych oraz specjalnego widżetu obracających się ikon, który służy do dodawania profili społecznościowych w witrynie Weebly.

Niestandardowy widget ikon udostępniania społecznościowego CSS

Ponieważ celem tego artykułu nie jest omawianie aspektu projektowego, dostarczymy kompletny kod CSS, jak pokazano poniżej. Zasadniczo używamy niesamowitych ikon czcionek dla ikon społecznościowych o szerokości kontenera 300 pikseli, aby pomieścić pięć ikon społecznościowych – Facebook, Twitter, Google+, Pinterest i 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>

Widżet HTML dla ikon udostępniania społecznościowego

Poniżej znajduje się kod HTML wraz z udostępnionym adresem URL widżetu społecznościowego:

<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>

Widget będzie wyglądał jak poniżej na opublikowanej stronie:

Użyliśmy tego adresu URL witryny, upewnij się, że zastępujesz odpowiednią treść, jak wskazano poniżej, z kodu HTML:

  • Facebook, Twitter i Google+ – zastąp adres URL witryny swoim własnym.
  • Pinterest – zamień obraz i adres URL.
  • LinkedIn – zastąp adres URL i tytuł strony.

W przypadku, gdy chcesz użyć jako widżetu „obserwuj nas", po prostu zastąp adresy URL w części „href” własnymi linkami do profilu społecznościowego.

Dodawanie CSS i HTML do Weebly

  • Wklej kod CSS w sekcji „Kod nagłówka” strony, której potrzebujesz lub umieść go w sekcji „Ustawienia”, aby kod działał na poziomie witryny. Dowiedz się więcej o dodawaniu CSS w witrynie Weebly.

Prosty widżet ikon udostępniania społecznościowego dla Weebly

Dodaj kod nagłówka na stronie

  • Dodaj zawartość HTML do strony, na której chcesz umieścić ikony, używając elementu „ Kod osadzania “.
  • Opublikuj swoją witrynę, aby zobaczyć ikony udostępniania w akcji.

Dostosowywanie widżetu

  • Chociaż wyjaśniliśmy to za pomocą pięciu ikon, możesz dodać dowolną liczbę ikon. Zapoznaj się z kodami kolorów ikon społecznościowych, aby wybrać kolor swoich ikon.
  • Szerokość pełnego kontenera to 300px, aby automatycznie wyrównywać ikony na urządzeniach mobilnych. Jeśli dodajesz więcej ikon, upewnij się, że używasz zapytań @media, aby odpowiednio wyrównać ikony na telefonie komórkowym.
  • Szerokość poszczególnych ikon wynosi 17% w klasie CSS „.box”, którą możesz zmniejszyć lub zwiększyć zgodnie z potrzebami.
  • Rozmiar ikony to 26 pikseli z klasą CSS „.box .fa”, którą możesz zmienić zgodnie z potrzebami.
  • Jeśli dodasz więcej ikon, po prostu dodaj „+ .box” i zdefiniuj kolor tła ikon.

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów