Vite Digitali

Dopo che mi è stato chiesto via mail come inserire quei bottoni che vedete in alto a questa pagina (Hot Posts, Legalese, Contatti, ecc...) ho deciso di scrivere questa breve guida per tutti coloro che utilizzano la piattaforma Blogger e vogliono personalizzare il template del proprio blog aggiungendo dei semplici bottoni che linkano una qualsiasi pagina web.
Prima di tutto voglio sottolineare il fatto che non sono un esperto di template, infatti quello che utilizzo è stato scaricato dal sito Blogcrowds e già conteneva quei bottoni. Leggendo il codice del template però ho capito come inserire i bottoni praticamente in qualsiasi altro template recente di Blogger. Il risultato della guida può variare molto in base al template del vostro blog: su alcuni template i bottoni calzano a pennello mentre su altri non stanno molto bene. Voi provate e vedete se vi piacciono.

Entrate nel pannello di controllo del vostro blog, cliccate il bottone "Modello" e poi "Modifica HTML". Spuntate il bottone "Espandi i modelli widget" e copiate tutto il codice del template in un file di testo che salverete sul vostro computer. Facciamo questo per sicurezza, così se commettete qualche errore avrete sempre a disposizione il codice completo del vostro vecchio template. Ora che avete salvato il codice del template seguite questi semplici passi:

1) copiate il codice in rosso riportato qui sotto

#navigation {
background: transparent;
margin: 20px auto 0;
overflow: hidden;
width: 760px;
position: relative;
text-align: left;
font-family:Tahoma, Verdana, Arial, Serif;
}
html #navigation {
height: 1%;
}
#navigation ul li {
float: left;
margin: 0 5px 0 0;
list-style-type: none;
}
#navigation ul li a {
border: #ddd 1px solid;
border-bottom:none;
padding: 0 10px 2px 10px;
display: block;
background: #ededed;
text-decoration: none;
}
#navigation ul li a:hover, #navigation ul li a:active, #navigation ul li.current_page_item a {
background: #fff;
color: #333;
border: #ccc 1px solid;
border-bottom:none;
}

2) ora dobbiamo incollare questo codice all' interno dell' intestazione del nostro template. Personalmente nel mio template il codice rosso qui sopra è posto subito prima del seguente blocco

#header {
clear: both;
float: left;
margin: 10px 5px;
width: 450px;
}

O comunque potrete inserire il codice rosso del passo 1 subito prima di qualsiasi riga che inizi con il simbolo del cancelletto #.

3) ora copiate il codice che vedete nell' immagine qui sotto. (non ho potuto scrivere direttamente il codice nel post perchè non veniva visualizzato correttamente)