immagin top

6.2.14

Crea sezioni carine per i tuoi link

6.2.14



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

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

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