Lavoriamo insieme ✨

In questa pagina trovi i servizi che metto a disposizione per chi vuole migliorare la propria comunicazione online, attraverso il blogging e non solo.
Se hai dubbi su quale servizio scegliere, non esitare a contattarmi.
Sarò felice di risponderti :)

Blogger in Azione

Blogger in Azione

ideale per chi ha già un blog, e vuole analizzare la propria comunicazione
Web Design

Web Design

avere un sito ben curato è importante, anche su Blogger!
Primi Passi

Primi Passi

1 problema = 1 soluzione. Anche se sei alle prime armi, l'importante è partire!
F.A.Q.

F.A.Q.

Hai dubbi? Leggi le F.A.Q. per cominciare, oppure contattami :)

Illustrazioni e Lettering

In questa pagina trovi alcuni miei lavori di illustrazione e lettering creati per i miei canali social.

Home » tutorial » tu sei qui👇

Crea sezioni carine per i tuoi link

6.2.14
Simona S.
23 commenti


Quante/i di voi hanno una pagina in cui condividono i loro blog preferiti, perchè metterli nella sidebar significherebbe renderla un'autostrada?
Io personalmente lo preferirei facendo comunque una cernita fra quelli che seguo, altrimenti dovrei inserirne più di 200...

Pensando a come sistemarli, senza l'utilizzo di photoshop, mi sono venute in mente queste soluzioni: tipo raccoglitore a schede.

F
O
O
D

crafter

Di certo a raccogliere solo alcuni blog, tralasciandone qualcuno solo perchè ci è passato di mente, potrebbe offendere qualche blogger, ecco perchè, magari, sarebbe meglio fare una buona premessa all'inizio, del tipo:
 'condivido con voi i blog da me seguiti che potrebbero risultarvi utili grazie all'ausilio dei loro tutorials - mi scuso in anticipo se ho dimenticato qualcuno, ma anche io sono umana :) -'.
Che dite ci può stare?



La soluzione proposta in alto può andare bene per chi non ha programmi di grafica, ma per chi invece l'avesse può sempre affidarsi a loro per creare sfondi carini, titoli più sfiziosi, da implementare alle tabelle mostrate.



In realtà quest'ultima soluzione assomiglia molto a quella che utilizzo io nella mia sidebar :)

Passiamo ai codici!

PRIMA TABELLA

<table cellpadding="0" cellspacing="0" style="border: 1px solid #f1b500;"><tbody>
<tr><td style="background: #f1b500; color: white; font-size: 40px; font-weight: bold; line-height: 100%; padding: 5px; text-align: center; text-transform: uppercase;">F
O
O
D</td> <td valign="top"><ul>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
</ul>
</td> <td valign="top"><ul>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
</ul>
</td></tr>
</tbody></table>
ricordate di andare a capo ad ogni lettera per ottenere questo tipo di effetto nel titolo a sinistra.

seconda TABELLA

<table cellpadding="0" cellspacing="0" style="border: 1px solid #b6c7ad;"><tbody>
<tr><td colspan="2" style="background: #b6c7ad; color: white; font-size: 30px; font-weight: bold; letter-spacing: 5px; line-height: 100%; padding: 5px; text-align: center; text-transform: uppercase;">crafter</td></tr>
<tr><td valign="top"><ul>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
</ul>
</td> <td valign="top"><ul>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
</ul>
</td></tr>
</tbody></table>
qui noterete che nella prima colonna c'è questa dicitura: colspan='2' (nella prossima saranno '3') questo perchè la riga sopra deve sormontare due colonne.

terza TABELLA

<table cellpadding="0" cellspacing="0"><tbody>
<tr><td colspan="3" style="background: url(URL_DELLO_SFONDO) no-repeat left; height: 38px;"></td></tr>
<tr><td valign="top"><ul>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
</ul>
</td> <td valign="top"><ul>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
</ul>
</td><td valign="top"><ul>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
<li><a href="http:">blog numero uno</a></li>
</ul>
</td></tr>
</tbody></table>

per approfondire!


  • Le immagini accanto alla lista non appariranno, o saranno diverse, se avete nel vostro CSS uno stile diverso per le liste, definite 'ul' nel codice.
  • Se vuoi sapere come cambiarle dai un'occhiata al mio tutorial.
  • Se sei appena sbarcata nella blogsfera e non sai come inserire le pagine, guarda qui.
  • Se cerchi delle PALETTE COLORS qui puoi trovare ispirazione: Just Colors (l'altro mio blog ^_^)
in: coding, tutorial


23 commenti in "Crea sezioni carine per i tuoi link"

  1. lindagiovedì, 06 febbraio, 2014

    Grazie Simona! I tuoi tutorial sono sempre chiari e sempre interessanti!!

    RispondiElimina
  2. Unknowngiovedì, 06 febbraio, 2014

    Ho una paura a vedere tutti questi codici....

    RispondiElimina
    Risposte
    1. Simona S.venerdì, 07 febbraio, 2014

      Lo so all'inizio fa paura, ma è tutta scena :D L'importante prima di procedere per tentativi! Crea un clone del tuo blog, uguale a quello che hai ora e fai tutte le modifiche lì, così quando andrai a mettere mano sul tuo 'vero' blog saprai già che fare :D

      Elimina
  3. Luciagiovedì, 06 febbraio, 2014

    Questa è una cosa che prima o poi farò. Grazie!!

    RispondiElimina
  4. Labiciclettarosagiovedì, 06 febbraio, 2014

    sei il mio idolo! ^_^
    ti pinno

    RispondiElimina
  5. Il Gufo Creativogiovedì, 06 febbraio, 2014

    Ma nooooooo! Ma grazie!!!!
    E' proprio quello che dovrei fare sul mio blog!
    Prendo nota e appena riesco sistemo la pagina dei miei favoriti.

    Grazzissime Simona!!!

    RispondiElimina
    Risposte
    1. Simona S.venerdì, 07 febbraio, 2014

      Di niente cara!!!
      Vedi come restiamo connesse? ahahahah
      Un bacio!!!

      Elimina
  6. Unknowngiovedì, 06 febbraio, 2014

    Mi è sempre piaciuto da morire il tuo elenco dei blog amici (e non solo perché ci sono dentro anch'io :DD), ero in dubbio se adottare una soluzione analoga da me perché è ordinata e davvero gradevole... Però mi piace anche l'idea dei bannerini, che al momento appunto ho nella pagina "amici"... Che poi il tuo è così carino! Insomma, non so bene cosa fare.
    Grazie comunque per la futura referenza ;)

    RispondiElimina
    Risposte
    1. Simona S.venerdì, 07 febbraio, 2014

      Ma Silviuccia mia dolcissima, se non lo inserisci perchè credi che io mi offenda..allora si che mi offendi!!! Se ti piace mettilo pure!!!! Caspiterina, ci mancherebbe altro :D

      Elimina
    2. Unknownsabato, 08 febbraio, 2014

      Ma c'è già il tuo banner, come avrei potuto non metterlo nella pagina dei blog amici? L'ho anche aggiornato con quello nuovo :) Il mio dubbio è se mettere anche un "blogroll" come quello da te suggerito nella sidebar...

      Elimina
    3. Simona S.sabato, 08 febbraio, 2014

      Sisi l'avevo capito, infatti ripeto sentiti libera di farlo anche tu :D

      Elimina
  7. tizyvenerdì, 07 febbraio, 2014

    Hai sempre delle idee stupende...<3

    RispondiElimina
  8. le mani creative...domenica, 09 febbraio, 2014

    Che bella idea, ma solo vedere tutti quei codici me è venuta l' ansia :-D....spero tanto un giorno di riuscire nell'impresa. ...saluti

    RispondiElimina
    Risposte
    1. Simona S.martedì, 11 febbraio, 2014

      Bisogna provare per capire se ci si riesce, senza paura di farlo ^_^

      Elimina
  9. Unknownmartedì, 11 febbraio, 2014

    Grazie Simona per questo tutorial e per averci messo a disposizione i tuoi codici. Io sono negata con le tables quindi mi faranno davvero comodo!

    E please, non ascoltare chi ti dice che ha paura dei codici... io ascoltavo tutti e alla fine finivo per fare solo tutorial semplici adatti a tutti. Il fatto e' che se non si prova, non si puo' sapere cosa si fa fare o meno e senza una spinta a provare non si migliora mai! Quindi grazie di cuore! Un bacione, alex

    RispondiElimina
    Risposte
    1. Simona S.martedì, 11 febbraio, 2014

      Hai ragione cara!!!!
      A volte mi blocco proprio per questo motivo... è per questo chesto lavorando su un bel progetto, che prevede dei livelli a steps...
      E poi no dai...tu non puoi essere negata nelle tabelle, magari non ti stanno 'simpatiche' :D

      Elimina
    2. Unknownmercoledì, 19 febbraio, 2014

      In effetti le tabelle mi stanno antipatiche, ho avuto difficolta' quando dopo averle studiate tempo fa ho provato a metterle in pratica e da allora mi sono rimaste sullo stomaco! Se non ti dispiace uso uno dei tuoi template.... grassie!

      Elimina
    3. Simona S.mercoledì, 19 febbraio, 2014

      ma certo!!! :D

      Elimina
  10. Martimartedì, 18 febbraio, 2014

    Grazie Simo :*

    RispondiElimina

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

Iscriviti a: Commenti sul post (Atom)