Bottoni CSS Demo e Download per Blogger

Hai appena aperto il tuo blog su piattaforma Blogger e vuoi offrire ai tuoi lettori dei bottoni chiari e professionali per la demo o il download dei tuoi file? Ottima scelta: i pulsanti aumentano notevolmente il tasso di clic rispetto ai semplici link testuali.

Se su WordPress basterebbe un plug-in, su Blogger dobbiamo lavorare con un pizzico di codice personalizzato. Tranquillo, è un'operazione semplice che farà fare un salto di qualità al tuo blog. Prima di iniziare, ti consiglio di fare un backup del tema per evitare problemi.

Aggiungere bottoni su Blogger per demo, download o altro

Oggi vedremo come inserire nel modello (o dentro l'html della pagina usando i tag <style> </style>) un piccolo codice CSS e l'HTML necessario per mostrare questi bottoni con effetto hover.

1. Inserisci il CSS e salva le modifiche

Procedi così per incorporare lo stile nel blog:

Accedi al tuo account Blogger e vai su Tema > Modifica HTML.
Su uno spazio vuoto all'interno dell'editor digita la combinazione di tasti CTRL+F (o CMD+F su Mac).
Cerca il tag di chiusura ]]> </ b: skin> e incolla il codice qui sotto appena sopra di esso, poi salva.

Codice CSS

.boddbtn-container{text-align:center;margin:10px 0;display:block;clear:both}.boddbtn-item{display:inline-block!important;margin:5px!important;padding:0!important;vertical-align:middle}.demobtn,.downloadbtn{color:#fff!important;padding:10px 12px!important;font-size:13px;font-weight:700;text-transform:uppercase;text-decoration:none!important;border-radius:3px;border:0;letter-spacing:1px;transition:all .2s ease-out;display:inline-block}.demobtn{background-color:#3498db}.downloadbtn{background-color:#34d968}.demobtn:hover{background-color:#2980b9;color:#fff}.downloadbtn:hover{background-color:#2fbd5a;color:#fff}.demobtn:active,.downloadbtn:active{transform:translateY(2px)}@media(max-width:480px){.boddbtn-item{display:block!important;margin:10px 0!important}}

La parte del codice che definisce i colori (ad esempio il colore di sfondo #3498db) è facilmente personalizzabile. Se non ti piacciono quelli di default, puoi dare un'occhiata al mio tool per la generazione e conversione colori e scegliere quelli che preferisci.

2. Inserisci i bottoni nei Post

Vai alla pagina dove vuoi apporre i bottoni (o direttamente nel template), passa in modalità HTML e incolla questo codice:

Codice HTML

<div class="boddbtn-container">
  <div class="boddbtn-item">
    <a class="demobtn" href="LINK_DEMO" rel="nofollow" target="_blank" aria-label="Visualizza la demo">DEMO</a>
  </div>
  <div class="boddbtn-item">
    <a class="downloadbtn" href="LINK_DOWNLOAD" rel="nofollow" target="_blank" aria-label="Scarica il file">DOWNLOAD</a>
  </div>
</div>

I parametri rel="nofollow" e target="_blank" sono molto utili: il primo dice ai motori di ricerca di non seguire il link, mentre il secondo apre la pagina in una nuova scheda. Se non ti servono, puoi tranquillamente ometterli dal codice.

Ricordati di inserire correttamente i tuoi link su "LINK_DEMO" e "LINK_DOWNLOAD".

Anteprima pulsanti

DEMO

DOWNLOAD

Se vogliamo inserire delle icone all'interno dei pulsanti, dobbiamo prima caricare una libreria FontAwesome (l'ultima, quella hai già o quella che preferisci) inserendo il tag
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"/>
all'interno della sezione <head> del template di Blogger; una volta fatto, puoi aggiungere le icone usando i tag <i>, come nell'esempio seguente:

Codice HTML

<div class="boddbtn-container">
  <div class="boddbtn-item">
    <a class="demobtn" href="LINK_DEMO" rel="nofollow" target="_blank" aria-label="Visualizza la demo">
      <i class="fa-solid fa-eye"></i> DEMO
    </a>
  </div>
  <div class="boddbtn-item">
    <a class="downloadbtn" href="LINK_DOWNLOAD" rel="nofollow" target="_blank" aria-label="Scarica il file">
      <i class="fa-solid fa-download"></i> DOWNLOAD
    </a>
  </div>
</div>

Per oggi è tutto. Fammi sapere nei commenti se hai avuto difficoltà durante l'installazione o se hai scelto combinazioni di colori particolari per i tuoi bottoni.

Potrebbe interessarti anche:
Elfsight: Widget professionali su oltre 100 piattaforme
Come creare da zero temi Chrome personalizzati con JSON e Notepad
Image Downloader per Google Chrome fai da te
Creare un'estensione per Chrome da zero: bookmarks con PIN
Gestire smartphone Android direttamente dal PC con Python e ADB