Aggiungere facilmente bottoni su Blogger per demo e download
Hai appena avviato il tuo primo blog su piattaforma Blogger e vorresti dare l'opportunità ai tuoi lettori di visionare e scaricare file e quant'altro, inserendo dei bottoni per la demo e il download.
Peccato che questa semplice aggiunta può rivelarsi un po' complicata perché, come già sai, il CMS gratuito offerto da Google non supporta i plug-in del famosissimo WordPress, con il quale si ha un ottimo controllo per la gestione e la personalizzazione.
Tutto sommato, anche qui con un piccolo sforzo si può personalizzare al meglio un template aggiungendo del codice per migliorarlo in base alle proprie esigenze.
Oggi infatti andremo ad inserire nel nostro modello un piccolo codice css ed un codice html nella pagina/e dove vogliamo mostrare questi semplicissimi bottoni web con effetto hover.
Come prima cosa ti suggerisco di fare un backup del tema in uso per scongiurare possibili problemi.
Inserire il css e salvare le modifiche
Procedi così per incorporare i bottoni nel tuo blog:
1) Accedi al tuo account Blogger e vai su "Tema">"Modifica HTML". Fai click su di esso per aprire l'editor dei modelli di blogger.
2) Cerca questa riga: ]]> </ b: skin> Per trovarla velocemente premi contemporaneamente i tasti CTRL+F ed inserisci il testo da cercare all'interno dell'HTML.
3) Copia e incolla appena sopra la riga il seguente codice e salva le modifiche.
/* Demo Download Button By TantiLink - www.tantilink.net
---------- */
.boddbtn {text-align:center;color:#fff !important;list-style:none;margin:10px !important;padding:10px !important;font-size:14px;display:inline-block;text-decoration:none !important;clear:both;}
.boddbtn ul {padding:0;margin:0;}
.boddbtn li {list-style:none;display:inline;padding:0;margin:5px;}
.demobtn,.downloadbtn{color:#fff !important;padding:12px 15px !important;font-size:13px;font-weight:700;font-family:oswald;text-transform:uppercase;text-align:center;border-radius:3px;border:0;letter-spacing:1px;transition: all 0.2s ease-out;text-decoration:none !important;}
.demobtn {background-color: #3498db;}
.downloadbtn {background-color: #34d968}
.demobtn:hover {background-color: #2980b9;color: #fff;}
.downloadbtn:hover {background-color: #2fbd5a;color: #fff;}
La parte evidenziata in rosso è per la personalizzazione dei colori dei bottoni. Se non ti piacciono i colori originali dai un'occhiata alla mia tabella dei colori e modificali tu stesso.
4) Vai alla pagina dove intendi apporre i bottoni
5) Passa in HTML ed inserisci il seguente codice
<div style="text-align: center;"> <ul class="boddbtn"> <li><a class="demobtn" href="INSERISCI LINK DEMO" rel="nofollow" target="_blank">DEMO</a></li> <li><a class="downloadbtn" href="INSERISCI LINK DOWNLOAD" rel="nofollow" target="_blank">DOWNLOAD</a></li> </ul> </div>
Il rel="nofollow" ed il target="_blank" si possono omettere se non sono necessari.
6) Inserisci i links alle pagine e pubblica il tuo Post!
Questo è il risultato finale:
Leggi anche: Come ottenere il link diretto di immagini per un widget con Blogger
Nessun commento:
Posta un commento
Per commentare potete usare un account Google / Gmail. Si prega di non inserire link cliccabili nei vostri commenti. Il vostro intervento dovrà essere il più pertinente possibile all'articolo in questione. Seleziona "Inviami notifiche" per ricevere via email un avviso di risposta.