TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Widget semplici icone di condivisione social per Weebly

10

Oggigiorno la condivisione sui social è una parte essenziale di qualsiasi sito web. Consentono agli utenti di spargere la voce istantaneamente con pochi clic condividendo il tuo articolo. Mentre il social media marketing è un argomento popolare, i costruttori di siti come Weebly non offrono widget di condivisione social per gli utenti. Purtroppo anche gli utenti del piano aziendale su Weebly non avranno icone di condivisione social decenti sul loro sito dopo aver pagato quasi $ 25 al mese. In questo articolo creeremo un widget di condivisione social CSS personalizzato per il sito Weebly e spiegheremo come aggiungerlo al tuo sito Weebly con i link di condivisione social.

Sfortunatamente questo deve essere fatto su ogni pagina aggiungendo l’URL della pagina. Dai un’occhiata al nostro articolo separato su come aggiungere icone social predefinite e uno speciale widget di icone rotanti fondamentalmente per l’aggiunta di profili social sul tuo sito Weebly.

Widget icone di condivisione social CSS personalizzato

Poiché l’obiettivo di questo articolo non è discutere l’aspetto del design, forniremo il codice CSS completo come mostrato di seguito. Fondamentalmente utilizziamo icone fantastiche per i caratteri per le icone social con la larghezza del contenitore di 300 px per ospitare cinque icone social: Facebook, Twitter, Google+, Pinterest e 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>

Widget HTML per le icone di condivisione social

Di seguito è riportato il codice HTML insieme all’URL di condivisione per il widget social:

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

Il widget apparirà come di seguito sul sito pubblicato:

Abbiamo utilizzato l’URL di questo sito, assicurati di sostituire il contenuto pertinente come indicato di seguito dall’HTML:

  • Facebook, Twitter e Google+: sostituisci l’URL del sito con il tuo.
  • Pinterest: sostituisci l’immagine e l’URL.
  • LinkedIn: sostituisci l’URL e il titolo del sito.

Nel caso in cui si desideri utilizzare come widget "seguici", è sufficiente sostituire gli URL all’interno della parte "href" con i collegamenti del proprio profilo social.

Aggiunta di CSS e HTML su Weebly

  • Incolla il CSS nella sezione "Codice intestazione" della pagina che ti serve o posizionalo sotto "Impostazioni" affinché il codice sia efficace a livello di sito. Scopri di più su come aggiungere CSS nel sito Weebly.

Widget semplici icone di condivisione social per Weebly

Aggiungi codice intestazione nella pagina

  • Aggiungi il contenuto HTML su una pagina in cui desideri posizionare le icone, utilizzando l’ elemento " Embed Code ".
  • Pubblica il tuo sito per vedere le icone di condivisione in azione.

Personalizzazione del widget

  • Sebbene abbiamo spiegato con cinque icone, puoi aggiungere un numero qualsiasi di icone. Fai riferimento ai codici colore delle icone social per scegliere il colore delle tue icone.
  • La larghezza del contenitore completo è di 300 px per allineare automaticamente le icone sui dispositivi mobili. Se stai aggiungendo più icone, assicurati di utilizzare le query @media per allineare le icone sul cellulare in modo appropriato.
  • La larghezza della singola icona è del 17% nella classe CSS ".box" che puoi ridurre o aumentare secondo le tue necessità.
  • La dimensione dell’icona è 26px con la classe CSS ".box .fa" che puoi modificare secondo le tue necessità.
  • Se aggiungi più icone, aggiungi semplicemente "+ .box" e definisci il colore di sfondo delle icone.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More