Lavoriamo insieme ✨

Sei pronta a diventare la blogger che hai sempre sognato di essere?
Agire facendo il primo passo è un ottimo modo per cominciare ecco chi sono

Blogger in Azione

Blogger in Azione

Primi Passi

Primi Passi

F.A.Q.

F.A.Q.

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

13.11.13
Simona S.
17 commenti
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 in "Blog design: creare i 'blog buttons' con il css"

  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
  2. Bellissima la palette e utilissimo il tutorial||

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

    Grazie!
    Mary

    RispondiElimina
  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

Grazie di aver commentato!
Solitamente rispondo ai commenti nelle prime 24 ore, se hai richieste urgenti puoi scrivermi usando il modulo dei contatti :)

Per favore NON lasciare link, a meno che non siano richiesti espressamente nel post stesso.
I commenti con link non richiesti o con link affiliati verranno considerati come SPAM e quindi subito cancellati.
So che capirai ;)