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.

Blog Coaching

*Mentoring e Formazione Blogging personalizzata*

Quanti consigli hai seguito ma ti sembra di non raggiungere mai i risultati sperati con il tuo blog? Ti capisco, non sei sola, anche io ero come te.
Fino a quando non ho capito come funziona il Blogging, e ho lavorato per portare il mio blog nelle prime posizioni su Google e farmi notare dalle aziende, che hanno iniziato a contattarmi per le collaborazioni.
In oltre 15 anni molte/i blogger mi hanno chiesto aiuto, e oggi posso aiutare anche te.

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 ^_^)


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

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

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

    RispondiElimina
    Risposte
    1. 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. Questa è una cosa che prima o poi farò. Grazie!!

    RispondiElimina
  4. 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. Di niente cara!!!
      Vedi come restiamo connesse? ahahahah
      Un bacio!!!

      Elimina
  5. 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. 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. 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. Sisi l'avevo capito, infatti ripeto sentiti libera di farlo anche tu :D

      Elimina
  6. Hai sempre delle idee stupende...<3

    RispondiElimina
  7. 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. Bisogna provare per capire se ci si riesce, senza paura di farlo ^_^

      Elimina
  8. 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. 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. 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

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