TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Enkel widget för sociala ikoner för Weebly

3

Numera är social delning en viktig del av alla webbplatser. De tillåter användare att sprida ordet direkt med några klick genom att dela din artikel. Medan marknadsföring på sociala medier är ett populärt ämne, erbjuder webbplatsbyggare som Weebly inte widget för social delning för användare. Tyvärr kommer även affärsplananvändarna på Weebly inte att ha anständiga ikoner för social delning på sin webbplats efter att ha betalat nästan $ 25 per månad. I den här artikeln kommer vi att skapa en anpassad CSS -widget för social delning för Weebly -webbplatsen och förklara hur du lägger till den på din Weebly -webbplats med länkar till social delning.

Tyvärr ska detta göras på varje sida genom att lägga till sidans URL. Kolla in vår separata artikel om hur du lägger till standard sociala ikoner och en speciell snurrande ikoner -widget för att lägga till sociala profiler på din Weebly -webbplats.

Anpassad CSS -widget för sociala ikoner

Eftersom syftet med denna artikel inte diskuterar designaspekten kommer vi att tillhandahålla den fullständiga CSS -koden enligt nedan. I grund och botten använder vi fantastiska teckensnittsikoner för sociala ikoner med behållarens bredd som 300 pixlar för att rymma fem sociala ikoner – Facebook, Twitter, Google+, Pinterest och 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 för widget för sociala ikoner

Nedan finns HTML -koden tillsammans med delnings -URL för den sociala widgeten:

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

Widgeten kommer att se ut nedan på den publicerade webbplatsen:

Vi använde denna webbadress, se till att ersätta relevant innehåll enligt nedanstående HTML:

  • Facebook, Twitter och Google+ – ersätt webbplatsens URL med din egen.
  • Pinterest – ersätt bilden och webbadressen.
  • LinkedIn – ersätt webbplatsens URL och titel.

Om du vill använda som en "följ oss" -widget, ersätt bara webbadresserna i "href" -delen med dina egna sociala profillänkar.

Lägger till CSS och HTML på Weebly

Enkel widget för sociala ikoner för Weebly

Lägg till rubrikkod på sidan

  • Lägg till HTML -innehållet på en sida där du vill placera ikonerna med hjälp av elementet " Bädda in kod ".
  • Publicera din webbplats för att se delningsikonerna i aktion.

Anpassa widgeten

  • Även om vi förklarade med fem ikoner kan du lägga till valfritt antal ikoner. Se de sociala ikonernas färgkoder för att hämta färgen för dina ikoner.
  • Bredden på hela behållaren är 300 pixlar för att automatiskt anpassa ikonerna på mobila enheter. Om du lägger till fler ikoner, se till att använda @media -frågor för att anpassa ikonerna på mobilen på rätt sätt.
  • Den individuella ikonens bredd är 17% i ".box" CSS -klassen som du kan minska eller öka efter behov.
  • Ikonstorleken är 26 pixlar med CSS -klassen “.box .fa" som du kan ändra efter dina behov.
  • Om du lägger till fler ikoner lägger du bara till "+ .box" och definierar bakgrundsfärgen på ikonerna.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer