ho un tot di anni durante i quali ho fatto taaaaante cose, tipo fare due figli che sono la gioia della mia esistenza. Sono blogger dal 2007, ma dal 2008 lo sono un po' più seriamente... ci ho creduto di più dai.
Volevo fare la stilista, vestire persone, ma oggi mi piace quasi definirmi stilista del web, perchè vesto i blog con abiti su misura appositamente per le bloggers che decidono di collaborare con me, affidandomi i loro tessssori.
Perchè il blog è un nostro tesssssoro, vero?
Seguimi su Pinterest! Tanti pin per ispirare la tua moodboard e la tua creatività!
Seguimi su Pinterest! Tanti pin per ispirare la tua moodboard e la tua creatività!

6.2.14

Crea sezioni carine per i tuoi link

6.2.14

23 comm


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




con questo post partecipo al linky party di Alex
Linky Party 2014
Iscriviti alla mia newsletter per ricevere consigli sul blogging, il design, la pianificazione e pdf gratuiti per gli iscritti alla newsletter ♥
(Ma prima leggi la mia informativa sulla privacy.)
si, iscrivimi!

23 commenti:

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

    RispondiElimina
    Risposte
    1. Grazie mille sei sempre gentilissima ^_^

      Elimina
  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

Lasciando un commento dichiari di aver letto la mia Privacy Policy