13.11.13

Blog design: creare i 'blog buttons' con il css

13.11.13

Volete realizzare dei semplici blog buttons per il vostro blog, ma non avete un programma di grafica?
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>

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;}


Vi è piaciuto questo tutorial?
Spero di sì :)

Hai bisogno di un aiutino?




17 commenti:

  1. ma è bellissimo questo tutorial, lo metto subito tra i preferiti!
    Se 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!

    RispondiElimina
    Risposte
    1. Grazie Simona, arrivio subito a vedere :)!!!

      Elimina
  2. Bellissima la palette e utilissimo il tutorial||

    RispondiElimina
  3. Moltissimo!!!!!!
    Addentrandoci così, in questo campo per me è aramaico.

    Grazie!
    Mary

    RispondiElimina
    Risposte
    1. Cerco sempre di semplificarvi il 'lavoraccio' :D

      Elimina
  4. jnteressanti ed utilissime le dpiegazioni ma bisogna applicarsi........
    comunque complimenti
    simonetta

    RispondiElimina
    Risposte
    1. grazie simonetta, ma credimi è più semplice di quanto sembri ;)

      Elimina
  5. Ciao Simona! Intanto vorrei farti i complimenti per il tuo blog così curato e pieno di argomenti interessanti e consigli utili :-)
    In 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

    RispondiElimina
    Risposte
    1. Ciao Virginia! Grazie per i tuoi complimenti, mi fanno davvero felice :) e non preoccuparti per il commento lungo, aiuta a capire meglio :)
      Per 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 :)

      Elimina
    2. 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!
      Buona serata
      V

      Elimina
    3. 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)...

      Elimina
  6. ciao 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ò

    RispondiElimina
    Risposte
    1. Ciao Giofanny! All'interno degli stili dei bottoni (.button 1, .button 2, ecc...) ti basta aggiungere:
      font-family: NOME FONT !important;

      Elimina
  7. Ciao 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?
    Grazie mille per l'ascolto.
    Emanuela

    RispondiElimina
    Risposte
    1. Ciao Emanuela!
      Sì, 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

      Elimina

I tuoi commenti sono un vero toccasana per il mio blog! Grazie per il tuo contributo :*