Ultimamente mi sono arrivate molte richieste di spiegazione sul mio tema del blog. Bisogna subito dire che questo tema non l’ho fatto da zero io, ho semplicemente riadattato un tema già esistente in blogger, che si chiama Minima, al quale ho aggiunto qualche immagine e cambiato i colori di default. Ecco cosa ho fatto:

  • Aspetto da finestra del Finder: ho semplicemente fatto uno screnshoot ad una finestra del Finder che poi ho “sezionato” due parti: l'”header” e le “costine” laterali. A questo punto ho agito così: per far comparire l’header nel sito ho aggiunto il codice

    <img style=”margin:30px 0px 0px 0px” src=”http://img403.imageshack.us/img403/2857/
    intestaz3yu.gif” alt=”Image” />

    appena dopo il tag

    &lt;body>

    del modello. Per fare le costine verticali invece ho modificato il CSS. Tutto ciò che riguarda il CSS, cioè il foglio di stile, è contenuto tra i tag

    <stile> </stile>

    in questa sezione ho raggiunto la parte riguardante il body

    body{ … }

    e ho sostituito il background nel seguente modo:

    background:#fff url(“http://img447.imageshack.us/img447/4377/
    lato1rt.gif”)repeat-y center;

    mi raccomando non dimenticate i punti e virgola.

  • Header stile iPod Hi Fi: ho preso l’immagine da internet, l’ho modificata inserendo le scritte bianche e i bordi stondati, poi sono andato nel modello di blogger, e ho sostituito quello che c’era tra i tag

    <div id=”header”> </div>

    con

    <a href=”http://jeby.blogspot.com”><img style=”display:block; margin:0px auto 0px; text-align:lleft;cursor:pointer; cursor:hand;width: 660px;” src=”http://img489.imageshack.us/img489/6315/
    header6ke.gif” border=”0″ alt=”” /></a>

    Mi raccomando, non buttate via quello che è compreso tra i tag

    <div id=”header”> </div>

    e cioè 

    <h1 id=”blog-title”> <ItemPage><a href=”<$BlogURL$>”></ItemPage>
    <$BlogTitle$>
    <ItemPage></a></ItemPage>
      </h1>
      <p id=”description”><$BlogDescription$></p>

    ma piazzatelo alla fine del codice del modello, nella zona delimitata dai tag

    <div id=”footer”><hr /> </div>

    così da non perdere l’indicizzazione di google.

  • Titolo del post che rimanda al permalink del post stesso: basta andare nel modello blogger e modificare in

    <a href=”<$BlogItemPermalinkUrl$>” title=”permanent link”><$BlogItemTitle$></a>

    quello che è scritto tra i tag

    <h3 class=”post-title”> &lt;/h3>

    nella zona che inizia con 

    <!– Begin .post –>

  • Colori dei link e del titolo: anche qui si deve agire sul CSS, in particolare per i titoli dei post ho fatto così: in

    #blog-title

    ho messo

    color:#666;

    in

    #blog-title a

    ho messo

    color:#666;

    e in

    #blog-title a:hover

    ho lasciato

    color:#c60;

    Invece per i link bisogna agire su

    a:link

    e su

    a:visited

    in cui ho messo rispettivamente

    color:#3366ff;

    e

    color:#58a;

  • Badge sotto i post: seguite il tutorial che ho scritto qui a proposito di Technorati e adattatelo per i badge che volete inserire voi
  • Too Cool For IE: seguite la procedura che ho spiegato qui

È questo è quasi tutto. Mi rendo conto che se qualcuno che ne sa di HTML e CSS dovesse leggere quello che ho scritto, probabilmente, si metterebbe le mani nei capelli… però finora quello che ho fatto funziona! Se volete usare anche voi questa procedura, dovrete personalizzare le immagini e i link a cui rimandano secondo le vostre necessità. Se avete intenzione di usare queste modifiche sul vostro blog sarebbe molto ma molto gradito un link che rimandi al mio blog… è una forma di cortesia che vi chiedo e, in fondo, a voi non costa nulla!

’nuff said

Technorati Tags :