TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Yksinkertainen sosiaalisen jakamisen kuvakkeiden widget Weeblylle

4

Nykyään sosiaalinen jakaminen on olennainen osa mitä tahansa verkkosivustoa. Niiden avulla käyttäjät voivat levittää sanaa heti muutamalla napsautuksella jakamalla artikkelisi. Vaikka sosiaalinen media markkinointi on suosittu aihe, sivuston rakentajat kuten Weebly ei tarjoa sosiaalinen jakaminen widget käyttäjille. Valitettavasti edes Weeblyn liiketoimintasuunnitelman käyttäjillä ei ole kunnollisia sosiaalisen jakamisen kuvakkeita sivustollaan maksettuaan lähes 25 dollaria kuukaudessa. Tässä artikkelissa luomme mukautetun CSS -sosiaalisen jakamisen widgetin Weebly -sivustolle ja selitämme, kuinka voit lisätä sen Weebly -sivustoosi sosiaalisten jakamislinkkien avulla.

Valitettavasti tämä on tehtävä jokaisella sivulla lisäämällä sivun URL -osoite. Katso erillinen artikkelimme siitä, miten oletusarvoiset sosiaaliset kuvakkeet ja erityinen pyörivät kuvakkeet -widget lisätään lähinnä sosiaalisten profiilien lisäämiseen Weebly -sivustoosi.

Muokatut CSS -yhteiskäytön jakamisen kuvakkeet -widget

Koska tämän artikkelin tarkoituksena ei ole keskustella suunnittelun näkökulmasta, annamme täydellisen CSS -koodin alla esitetyllä tavalla. Käytämme periaatteessa mahtavia kirjasinkuvakkeita sosiaalisiin kuvakkeisiin, joiden säiliön leveys on 300 pikseliä, jotta niihin mahtuu viisi sosiaalista kuvaketta – Facebook, Twitter, Google+, Pinterest ja 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 sosiaalisen jakamisen kuvakkeiden widgetille

Alla on sosiaalisen widgetin HTML -koodi ja jako -URL -osoite:

<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 näyttää alla julkaistulta sivustolta:

Käytimme tätä sivuston URL -osoitetta. Muista korvata asiaankuuluva sisältö alla olevan HTML -koodin mukaisesti:

  • Facebook, Twitter ja Google+ – korvaa sivuston URL -osoite omalla.
  • Pinterest – korvaa kuva ja URL -osoite.
  • LinkedIn – korvaa sivuston URL -osoite ja otsikko.

Jos haluat käyttää "seuraa meitä" -widgettiä, korvaa vain "href" -osan URL -osoitteet omilla sosiaalisen profiilin linkeilläsi.

CSS: n ja HTML: n lisääminen Weeblyyn

Yksinkertainen sosiaalisen jakamisen kuvakkeiden widget Weeblylle

Lisää otsikkokoodi sivulle

  • Lisää HTML -sisältö sivulle, jolle haluat sijoittaa kuvakkeet, käyttämällä Upota koodi -elementtiä.
  • Julkaise sivustosi nähdäksesi jakokuvakkeet toiminnassa.

Widgetin mukauttaminen

  • Vaikka selitimme viidellä kuvakkeella, voit lisätä minkä tahansa määrän kuvakkeita. Katso sosiaalisten kuvakkeiden värikoodit saadaksesi kuvakkeiden värin.
  • Täyden säiliön leveys on 300 kuvapistettä, jotta kuvakkeet voidaan kohdistaa automaattisesti mobiililaitteissa. Jos lisäät kuvakkeita, varmista, että käytät @media -kyselyjä mobiililaitteiden kuvakkeiden kohdistamiseen oikein.
  • Yksittäisen kuvakkeen leveys on 17% .box -CSS -luokassa, jota voit pienentää tai lisätä tarpeen mukaan.
  • Kuvakkeen koko on 26 pikseliä CSS -luokan ".box .fa" kanssa, jota voit muuttaa tarpeen mukaan.
  • Jos lisäät kuvakkeita, lisää vain "+ .box" ja määritä kuvakkeiden taustaväri.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja