TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Enkel widget for sosiale ikoner for Weebly

8

I dag er sosial deling en viktig del av ethvert nettsted. De lar brukerne spre ordet umiddelbart med få klikk ved å dele artikkelen din. Selv om markedsføring av sosiale medier er et populært tema, tilbyr nettstedbyggere som Weebly ikke widget for sosial deling for brukere. Dessverre vil ikke forretningsplanbrukerne på Weebly ha anstendige sosiale delingsikoner på nettstedet etter å ha betalt nesten $ 25 per måned. I denne artikkelen vil vi lage en tilpasset CSS -widget for sosial deling for Weebly -nettstedet og forklare hvordan du legger den til på Weebly -nettstedet ditt med koblinger for sosial deling.

Dessverre skal dette gjøres på hver side ved å legge til sidens URL. Sjekk ut vår egen artikkel om hvordan du legger til standard sosiale ikoner og en spesiell spinnende ikon -widget for å legge til sosiale profiler på ditt Weebly -nettsted.

Tilpasset CSS -widget for sosiale delingsikoner

Siden formålet med denne artikkelen ikke er å diskutere designaspektet, gir vi den komplette CSS -koden som vist nedenfor. I utgangspunktet bruker vi fantastiske ikoner for sosiale ikoner med beholderbredde på 300 piksler for å imøtekomme fem sosiale ikoner – Facebook, Twitter, Google+, Pinterest og 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 for sosial delingsikon -widget

Nedenfor er HTML -koden sammen med delings -URL for den sosiale 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 vil se ut som nedenfor på det publiserte nettstedet:

Vi brukte denne nettadressen. Sørg for å erstatte det relevante innholdet som angitt nedenfor fra HTML -koden:

  • Facebook, Twitter og Google+ – erstatt nettstedets URL med din egen.
  • Pinterest – erstatt bildet og nettadressen.
  • LinkedIn – erstatt nettstedets URL og tittel.

Hvis du vil bruke som en "følg oss" -modul, bare erstatt nettadressene i "href" -delen med dine egne sosiale profilkoblinger.

Legger til CSS og HTML på Weebly

Enkel widget for sosiale ikoner for Weebly

Legg til topptekst på siden

  • Legg til HTML -innholdet på en side der du vil plassere ikonene, ved hjelp av " Embed Code " -elementet.
  • Publiser nettstedet ditt for å se delingsikonene i bruk.

Tilpasse widgeten

  • Selv om vi forklarte med fem ikoner, kan du legge til et hvilket som helst antall ikoner. Se fargekodene for sosiale ikoner for å hente fargen for ikonene dine.
  • Bredden på hele beholderen er 300 piksler for å justere ikonene automatisk på mobile enheter. Hvis du legger til flere ikoner, må du sørge for å bruke @mediaspørringer for å justere ikonene på mobilen på riktig måte.
  • Det individuelle ikonets bredde er 17% i ".box" CSS -klassen, som du kan redusere eller øke etter behov.
  • Ikonstørrelsen er 26px med CSS -klassen ".box .fa" som du kan endre etter behov.
  • Hvis du legger til flere ikoner, kan du bare legge til “+ .boks" og definere bakgrunnsfargen til ikonene.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon