2 novembre 2019

Come creare un bottone su Blogger

Chi vuole personalizzare il proprio blog sulla piattaforma Blogger si trova spesso nella necessità di dover creare un bottone che rimandi a una pagina interna o esterna.

Sapete come fare?

In realtà ci sono varie opzioni e oggi voglio suggerirvi una rapida soluzione che può essere utilizzata da tutti, anche da chi non è proprio esperto di codici html.

come creare un bottone con collegamento sul blog


Come creare un bottone con link su Blogger


Come ho scritto ci sono varie opzioni per creare un bottone sul quale gli utenti possano cliccare ed essere reindirizzati a una pagina interna del sito oppure a una esterna, tipo i social collegati al blog.
Chi utilizza la piattaforma Blogger non ha plugin già pronti per ogni esigenza ma deve smanettare un po' coi codici html, questo può essere considerato uno svantaggio ma alla fine si può rivelare un grande vantaggio perché si possono modificare gli stili e i colori a nostro piacimento.

Creare un bottone con un link è molto semplice.
Si parte da un codice html predefinito, che indico più sotto, e poi si può personalizzare ogni parte per adattare il bottone al proprio blog, sia per quanto riguarda le dimensioni sia per quanto riguarda i colori.

Sappiamo quanto sia importante mantenere una palette di colori che renda distinguibile il nostro sito, sia omogenea, e che sia piacevole da vedere.

Questo codice html si può inserire nel layout del blog nella posizione che preferiamo, ma anche nelle pagine o nei singoli post.

Se vogliamo, ad esempio, inserirlo nella sidebar del blog da layout possiamo creare un nuovo widget e inserire il codice. Se vogliamo che il widget sia visibile anche nella versione mobile del sito dobbiamo aggiungerlo andando su tema-widget scriverò in dettaglio in un altro post come fare.

Volendo inserire un bottone in una pagina o in post dobbiamo andare nella versione html e fare il copia/incolla, andando prima naturalmente a modificare il link, la grandezza e i colori.

Quale collegamento mettere in un bottone su Blogger


Il bottone che si può inserire nella sidebar del blog o in una pagina può rimandare all'iscrizione ala newsletter oppure al nostro account sui social o a qualsiasi pagina.

Questo è l'esempio di un bottone, inserito su questo blog, che rimanda al mio account Instagram e che può essere usato assieme al widget che mostra le immagini.

esempio bottone su blogger collegato a instagram

L'importante è scrivere il codice in maniera corretta.

Per questo è bene fare un copia/incolla su un documento word e poi lì fare le modifiche, solo in un secondo momento, quando si verifica che funzioni e sia come vogliamo, si può inserirlo sul blog.

<style>
.centrare {
  text-align: center;
}
</style>
<div class="centrare">

<a href="https://www.instagram.com/girovagandoconstefania" target="_blank"><button style="
width: 12em;
padding: .5em;
color: #404040;
text-shadow: 1px 1px 1px #000000;
border: solid thin #cfe2f3;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
-webkit-box-shadow: 2px 2px 3px #cfe2f3;
box-shadow: 2px 2px 2px #cfe2f3;
background-color: #9fc5e8;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#cfe2f3), to(#9fc5e8),color-stop(0.4, #9fc5e8));">INSTAGRAM >>></button></a></div>

Ecco la spiegazione di ogni singola parte del codice, per chi non avesse dimestichezza col linguaggio html.

La prima parte del codice, che ho scritto in rosso,serve per mettere il bottone centrato.
Dopo href c'è l'url della pagina alla quale vogliamo rimandi il bottone quando si clicca.
width è la larghezza del bottone.
padding è la distanza tra il bottone e il testo che contiene.
color è il colore del testo.
text-shadow rappresenta l'ombreggiatura del testo nelle varie direzioni e il colore dell'ombreggiatura.
border indica il bordo che con la denominazione "solid thin" significa continuo, dopo c'è il suo colore, che può essere uguale a quello del testo.
radius indica l'arrotondamento del bordo, mettendo il valore a 0 apparirà un box squadrato.
box-shadow è l'ombreggiatura del bottone che possiamo anche decidere di mettere a 0.
background-color è il colore del bottone.
Quelli dopo sono i valori del gradiente di colore del bottone dal più scuro al più chiaro, anche qui possiamo lasciare solo un valore per rendere il bottone tinta unita.

La parte in blu nel codice indica il testo che vogliamo far apparire sul bottone.

Sotto alcuni esempi di come, cambiando il codice, si possano creare bottoni diversi.

esempio bottone per collegamento su blogger

bottone collegamento su blogger
Esempio di due bottoni di colore e ombreggiatura differente

Per creare un bottone con gli stessi colori che abbiamo sul blog possiamo vedere nel tema i codici che abbiamo usato, in alternativa possiamo sbizzarrirci con altri colori trovando i codici online.

Per chi volesse fare delle prove della riuscita del bottone, prima di inserirlo sul blog può utilizzare un editor html che si usa online, come HTML Code Editor.
Consiglio di farlo sicuramente per rendersi conto se tutto funziona bene e per creare il bottone che più si adatta al nostro blog.

3 commenti:

  1. Grazie mille per la spiegazione. Molto utile per chi non è avvezzo al linguaggio HTML

    RispondiElimina
  2. buongiorno,
    come posso allineare il pulsante a sinistra allontanandolo di poco dal margine? Come posso aggiungere un immagine in esso? Ed, infine, come posso cambiare il carattere e la dimensione del testo?

    grazie mille, articolo utilissimo

    RispondiElimina
    Risposte
    1. Devi aggiungere dei codici. Per testo corsivo ad esempio font-style:italic; oppure altro tipo: georgia ecc.. per ingrandire aggiungi codice font-size: 35px; ma diventa di conseguenza anche più grande il bottone. Se non lo vuoi centrato elimini tutta la prima parte del codice.

      Elimina

Prima di commentare ti invito a leggere la Privacy Policy del blog per l'accettazione.