No problem!!!
Con un pizzico di HTML e una spruzzatina di CSS tutto (o quasi) è possibile.
Innanzitutto vi serve una palette color, che trovate qui o qui.
Io ho usato questa palette.
Poi vi serve quel pizzico di HTML per racchiudere le informazioni in un piccolo box colorato:
<div class="buttons"><a href="URL">ABOUT ME</a></div>
<div class="buttons1"><a href="URL">MY SHOP</a></div>
<div class="buttons2"><a href="URL">PINTEREST</a></div>
<div class="buttons3"><a href="URL">INSTAGRAM</a></div>
<div class="buttons4"><a href="URL">FACEBOOK</a></div>
<div class="buttons5"><a href="URL">CONTACT</a></div>
<div class="buttons1"><a href="URL">MY SHOP</a></div>
<div class="buttons2"><a href="URL">PINTEREST</a></div>
<div class="buttons3"><a href="URL">INSTAGRAM</a></div>
<div class="buttons4"><a href="URL">FACEBOOK</a></div>
<div class="buttons5"><a href="URL">CONTACT</a></div>
Poi passiamo agli stili, CSS, che diranno esattamente ai 'div' come comportarsi all'interno della pagina web.
.buttons {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px; padding:5px 10px; background:#EDE9E6;line-height:25px;}
.buttons1 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px; padding:6px 10px;line-height:25px; background:#E6DBD6;}
.buttons2 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:20px; padding:6px 10px;line-height:25px; background:#B4AAB5;}
.buttons3 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px; padding:6px 10px;line-height:25px; background:#545257;}
.buttons4 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px;line-height:25px; padding:6px 10px; background:#F2B885;}
.buttons5 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px;line-height:25px; padding:6px 10px; background:#DEE6B5;}
.buttons a, .buttons1 a, .buttons2 a, .buttons3 a, .buttons4 a, .buttons5 a {color:#fff !important; text-decoration: none !important;}
.buttons1 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px; padding:6px 10px;line-height:25px; background:#E6DBD6;}
.buttons2 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:20px; padding:6px 10px;line-height:25px; background:#B4AAB5;}
.buttons3 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px; padding:6px 10px;line-height:25px; background:#545257;}
.buttons4 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px;line-height:25px; padding:6px 10px; background:#F2B885;}
.buttons5 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px;line-height:25px; padding:6px 10px; background:#DEE6B5;}
.buttons a, .buttons1 a, .buttons2 a, .buttons3 a, .buttons4 a, .buttons5 a {color:#fff !important; text-decoration: none !important;}
Vi è piaciuto questo tutorial?
Spero di sì :)
.jpg)
ma è bellissimo questo tutorial, lo metto subito tra i preferiti!
RispondiEliminaSe vuoi fare un salto da me c'è un premio che ti aspetta!
http://hobbyssimo.blogspot.it/2013/11/mi-hanno-assegnato-il-premio-conoceme.html
A presto!
Grazie Simona, arrivio subito a vedere :)!!!
EliminaBellissima la palette e utilissimo il tutorial||
RispondiEliminaGrazie Vale :D
EliminaMoltissimo!!!!!!
RispondiEliminaAddentrandoci così, in questo campo per me è aramaico.
Grazie!
Mary
Cerco sempre di semplificarvi il 'lavoraccio' :D
Eliminajnteressanti ed utilissime le dpiegazioni ma bisogna applicarsi........
RispondiEliminacomunque complimenti
simonetta
grazie simonetta, ma credimi è più semplice di quanto sembri ;)
EliminaCiao Simona! Intanto vorrei farti i complimenti per il tuo blog così curato e pieno di argomenti interessanti e consigli utili :-)
RispondiEliminaIn questi giorni sto apportando piccole modifice al layout del mio blog e vorrei dare un tocco di personalità ai bottoni delle pagine, inserendo magari delle immagini fatte da me. Il problema è che quando inserisco le mie immagini (con relativi link) attorno all'immagine si vede un alone grigetto inguardabile... Hai una soluzione al mio problema o mi devo rassegnare? Ah, le immagini sono prese dal mio flickr, non sono caricate direttamente su blogger.
Grazie e scusa per il commento lunghissimo!
Virginia
Ciao Virginia! Grazie per i tuoi complimenti, mi fanno davvero felice :) e non preoccuparti per il commento lungo, aiuta a capire meglio :)
EliminaPer eliminare il contorno ti consiglio di seguire questo mio tutorial:
http://sketchyourblog.blogspot.it/2013/03/eliminare-sfondo-immagini-dai-template.html
E inoltre per eliminarlo a tutte le immagini 'linkabili' ti consiglio di aggiungere subito prima dell'apertura della parentesi graffa questo(copia e incolla direttamente):
, img, a img
Se hai problemi chiedi pure :)
Quello sfondo ero già riuscita ad eliminarlo (anche io lo trovo antiestetico). L'alone di cui parlo penso che sia una lettura errata delle trasparenze e ad esempio lo vedo attorno alle mie icone social. Resterà un mistero! Comunque grazie mille per la risposta :-) Sto studiando i tuoi tutorial e devo dire che mi hai insegnato un bel po' di cose!
EliminaBuona serata
V
Guarda allora io ti consiglio di modificare le immagini e di dargli uno sfondo bianco, anziché trasparente (visto che il tuo blog ha uno sfodno bianco)...
Eliminaciao Simona! Ho scoperto da pochi giorni il tuo blog e sono piantata qui da ore!!! Mi piace un sacco e ci sono tantissimi tutorial utilissimi! Sto applicando i tuoi insegnamenti nel mio blog, anche se sono abbastanza imbranata!! Volevo cambiare il carattere di scrittura all'interno dei quadrati ma non c'è stato verso! E' possibile? Grazie ancora per il tuo prezioso aiuto! baci Giò
RispondiEliminaCiao Giofanny! All'interno degli stili dei bottoni (.button 1, .button 2, ecc...) ti basta aggiungere:
Eliminafont-family: NOME FONT !important;
fatto <3 grazie!!!!
EliminaCiao Simona, grazie mille per questo tutorial e per tutti gli altri sempre molto interessanti. Sono digiuna in materia per cui volevo chiederti dove vanno incollati i codici HTLM e CSS e poi dove c'è scritto "URL" devo incollare l'indirizzo della pagina che dovrà aprirsi?
RispondiEliminaGrazie mille per l'ascolto.
Emanuela
Ciao Emanuela!
EliminaSì, dove trovi scritto URLdevi incollare il link alla pagina, o al social. Poi hai ragione, non ho specificato bene dove inserirlo...rimedio subito...
Dunque l'HTML inseriscilo in un gadget HTML/Javascript, mentre gli stili (CSS) puoi dare un'occhiata qui: inserire i codici CSS