REDAZIONE

Questo articolo è dedicato a tutti coloro che hanno personalizzato il template del proprio Blog e vorrebbero tornare alla versione originale.

Le azioni che andremo ad eseguire sono irreversibili, quindi, prima di procedere vi invitiamo a salvare in un file di testo tutte le modifiche da voi effettuate all’interno delle pagine del Blog e nel Foglio di stile.

Andate nella sezione “Presentazione > Opzioni avanzate”, cliccate sul primo checkbox che si trova nella colonna a destra per selezionare tutte le pagine e cliccate il bottone “Tornare alla versione originale”. In questo modo eliminate tutte le modifiche effettuate in queste pagine, ma non quelle presenti nel Foglio di stile.

Ora andate nella sezione “Presentazione > Template”. Scegliete quante e quali colonne volete nel Blog e selezionate il template da associare cliccando sul bottone “Usa questo modello” posizionato sotto l’anteprima di ogni grafica.

Non tutti i template di MyBlog hanno di default la possibilità di inserire una sola colonna laterale larga 300 px. Questo costringe a utilizzare un template diverso da quello preferito oppure ad abbandonare l’ipotesi di cambiamento precludendosi la possibilità di inserire widget o banner pubblicitari larghi 300px.

Non demordete! Perché con questo tutorial vi veniamo in soccorso  mostrandovi come trasformare una colonna “mini” in una colonna “large” da 300px, permettendovi in questo modo di inserire anche i Virgilio Banner senza dover obbligatoriamente attivare un template in formato “large”.

Come esempio utilizziamo il template: Puzzle.

Applichiamo l’interfaccia con una sola colonna laterale a sinistra.

Di questo template non esiste una versione “large”, quindi avremo una colonna larga meno di 300px.

Per effettuare la modifica:

1. andiamo nel pannello di gestione del blog;
2. entriamo nella sezione “Presentazione > Opzioni avanzate”;
3. clicchiamo sul link “Modifica modello” del Foglio di stile.

In questo modo andremo a modificare nel codice CSS le dimensioni della colonna laterale.
Nel nostro esempio abbiamo scelto di inserire una colonna a sinistra, quindi nel Foglio di stile scriviamo:

   #left {
   width: 326px;
   }
   
   .boxcontent-decorator1 {
   width: 256px;
   }   

Se invece avete inserito una colonna a destra dovrete scrivere:

   #right {
   width: 326px;
   }
   
   .boxcontent-decorator1 {
   width: 256px;
   }   

Se salviamo le modifiche dopo questa azione vedremo apparire nel Blog due problemi:

1. la parte centrale che contiene i nostri post si è spostata sotto la colonna laterale;
2. la data dei post si è spostata a destra rispetto la sua posizione originale, apparendo all’esterno dello spazio dedicato ai post.

Quindi, per “aggiustare” il template, aggiungiamo questi due elementi nel Foglio di stile:

   #center {
   width: 494px;
   }
   
   .content h2.date {
   margin: 0px 0px 0px 300px;
   }   

Salviamo le modifiche e da questo momento avremo nel nostro Blog una colonna che potrà contenere elementi larghi 300 px!

Esempio:

Dopo diverse richieste da parte vostra, ecco finalmente un tutorial che mostra come personalizzare il testo presente all’interno del modulo dei commenti.

Esempio:

Per effettuare queste modifiche dobbiamo editare  solo una delle pagine del template presenti nella sezione “Presentazione > Opzioni avanzate > Modello di pagina Link permanente”.

Vediamo nel dettaglio dove è presente il testo di ogni campo del form all’interno del codice HTML.
Iniziamo con il primo testo che incontriamo, ovvero “Scrivi un commento”. 
La scritta viene visualizzata grazie a questa riga di codice:

 <h2 id="postcomment"><span>{t}Post a comment{/t}</span></h2>      

Per personalizzare il testo basta sostituire “Post a comment” con il testo che vogliamo.
Salviamo le modifiche e guardiamo subito nel Blog il risultato finale.

Per il resto delle parole l’azione da eseguire è sempre la stessa, ma vediamo una per una come è definito il testo che deve essere sostituito.

“Il tuo nome:”, cercare e sostituire “Your name:” in:

 <span class="name">{t}Your name:{/t}<br /></span>     

“La tua email:”, cercare e sostituire “Your email:” in:

 <span class="name">{t}Your email:{/t}<br /></span>      

“La tua URL:”,  cercare e sostituire “Your URL:” in:

 <span class="name">{t}Your URL:{/t}<br /></span>      

“Il tuo commento:”,  cercare e sostituire “Your comment:” in:

 <span class="name nowrap">{t}Your comment:{/t}<br />      

“Ricorda questi dati:”,  che permette all’utente di registrare i propri dati in modo tale che quando torna a commentare non è obbligato a reinserirli,  cercare e sostituire “Remember info:” in:

 <span class="name nowrap">{t}Remember info:{/t}<br />      

“Iscriviti a questo modulo:”, che permette all’utente di restare aggiornato ogni volta che quel singolo post viene commentato,  cercare e sostituire “Subscribe to the thread:” in:

 <span class="name nowrap">{t}Subscribe to the thread:{/t}<br />      

Per il bottone “Anteprima” , cercare e sostituire il testo “Preview:”compreso tra {t} e {/t} in:

 <input tabindex="7" type="submit" name="preview" 
 value="&nbsp;{t}Preview{/t}&nbsp;" />      

Per il bottone “Invia”,  cercare e sostituire  il testo “Send:”compreso tra {t} e {/t} in:

 <input tabindex="6" type="submit" name="post" 
 value="&nbsp;{t}Send{/t}&nbsp;" />      

Salva le modifiche e avrai un modulo per i commenti personalizzato!

Ti potrebbero anche interessare:
•    Come aggiungere l’avatar nei commenti
•    Come ti modifico il colore dei commenti su MyBlog

Cari MyBlogger,

in questo tutorial vi mostriamo alcuni modi per personalizzare il template dei vostri fotoblog. Partendo da uno dei template a scelta che troviamo nella sezione “Presentazione > Template”, ad esempio:

vogliamo creare un nuovo template come questo:

Vediamo passo dopo passo come fare.
Partiamo effettuando alcune modifiche al Foglio di stile già installato nel Fotoblog.
Dalla sezione “Presentazione > Opzioni avanzate”, clicchiamo sul link “Modifica modello” del Foglio di stile e all’interno della colonna destra della finestra che si è apre scriviamo le righe riportate di seguito.

Per prima cosa vogliamo sostituire lo sfondo con una immagine che sfuma verticalmente da un blu scuro ad un blu chiaro (come questa):

  body {
  background: #002844 url("http://...background.gif") 
  repeat-x top left;
  }
            
  #container {
  background-color: transparent;
  }           

Procediamo modificando la header del Fotoblog, eliminiamo lo sfondo e cambiamo il colore e la posizione del titolo:

  #banner {
  background-color: transparent;
  padding: 10px 0 0 0;
  color: #FFF;
  }
            
  #banner a {
  color: #FFF;
  text-decoration: none;
  }
            
  #banner h1 {
  margin-top: 10px;
  font-size: 255%;
  }
            
  #banner .nav {
  border-bottom: 2px solid #77aee3;
  }
            
  #banner .nav a {
  color: #86FF3F;
  }           

Fatto questo, vogliamo aumentare la distanza tra le anteprime delle foto ed inserirgli attorno una cornice azzurra che al passaggio del mouse si scurisce:

  .sidebar img{
  padding: 0px;
  margin-top: 30px;
  margin-left: 10px;
  border: 5px solid #BBDDFF;
  width:100px;
  }
            
  .sidebar a:hover img{
  border: 5px solid #77aee3;
  }
            
  #foot li.album {
  display: inline;
  padding: 0px;
  margin: 10px;
  }
            
  #foot h2 {
  color: #86FF3F;
  font-size: 155%;
  margin-top: 20px;
  }           

Nei template standard non appaiono i titoli delle foto, ma nel nostro template li vogliamo mostrare sotto ad ogni anteprima, quindi iniziamo a creare lo stile che dovranno avere, poi andremo ad inserirli nel codice HTML.
Vogliamo che i titoli si visualizzino con un testo bianco su uno sfondo nero, quindi:

  .titolo{
  color:#BBDDFF;
  background-color: #000;
  padding:7px;
  margin-left:-110px;
  }           

Per finire, vogliamo inserire in fondo alla pagina una riga di testo in cui diciamo che siamo noi gli autori di questo Fotoblog. Il testo dovrà essere bianco e i link contenuti dovranno essere sottolineati per essere più riconoscibili:

  #footer {
  font-size: 70%;
  color: #FFF;
  }
            
  #footer a{
  color: #FFF;
  text-decoration: underline;
  }           

Salviamo il Foglio di stile e prepariamoci ad effettuare le modifiche all’interno del codice HTML delle pagine. In questo articolo vi mostriamo come modificare la Home Page, quindi clicchiamo sul link “Modifica modello” posizionato a destra di “Modello della homepage”.

Partiamo dalla header. Abbiamo deciso di non mostrare il sottotitolo, quindi lo disattiviamo trasformandolo in commenti HTML.
Per inserire dei commenti in HTML basta inserire i seguenti simboli <!- - e - - > rispettivamente all’inizio e alla fine di quello che si vuole commentare, ad esempio:

  <!- - CONTENUTO DEL COMMENTO - ->           

Quindi, cerchiamo all’interno del codice le seguenti righe e inseriamo nei commenti il sottotitolo come mostrato di seguito:

  <div class="banner-decorator">
  <h1><a href="{$blog.url}">{$blog.title}</a></h1>
  <!-- <h2>{$blog.description|default:"&nbsp;"}</h2> -->
  <span class="nav">&#160;</span>
  </div>           

La Home Page dei template standard mette in primo piano una foto grande. Nel nostro template, invece, vogliamo mettere in risalto soltanto  le anteprime delle ultime foto che abbiamo caricato. Quindi, sempre trasformando il codice in commenti, disattiviamo la foto grande come mostrato di seguito:

  <!—
  <div id="center">
  <div class="center-decorator1">
  <div class="center-decorator2">
  <div class="content">
  {foreach from=$posts item=post}
  <a id="a{$post.id}"></a>
  <h1 class="photoblog"><a href="{$post.post_permalink}">
  <img src="{$blog.url}photos/{$post.photo}" 
  alt="{$post.title|htmlspecialchars}" /></a></h1>
  <h2>
  {date_header date="`$post.pubdate`"}
  {$post.pubdate|date_format:"`$blog.date_format`"} | {$post.title}
  {/date_header}
  </h2>
  <p>{$post.source|trimlonglines:60}</p>
  <p class="posted">
  {post_footer}
  </p>
  <div style="clear: both;">&#160;</div>
  {/foreach}
  </div>
  <div style="clear: both;">&#160;</div>
  </div>
  </div>
  </div>
  -->           

Nel template standard, in Home Page, vengono visualizzate le ultime 6 anteprime, noi invece vogliamo mostrare le anteprime delle ultime 10 foto che abbiamo inserito. Quindi cerchiamo:

  {posts assign="post" lastn="6" type="photo"}           

e sosituiamo il numero 6 con il numero di anteprime che vogliamo visualizzare, in questo caso 10.

Come abbiamo detto sopra, quando stavamo creando gli stili in CSS, vogliamo mostrare sotto ad ogni anteprima il titolo della foto. Per inserirlo cerchiamo il seguente codice:

  <li class="album iteration{$post.iteration}">
  <a href="{$post.permalink}">
  <img src="{$blog.url}photos/{$post.thumbnail}" 
  alt="{$post.title|truncate:30:"..."|htmlspecialchars}" 
  title="{$post.title|truncate:30:"..."|htmlspecialchars}" 
  border="0" /></a>        

e subito dopo incolliamo questa riga:

  <font class="titolo">{$post.title}</font></li>           

Per concludere le modifiche nella Home Page, non ci resta che inserire la riga che separa il contenuto del nostro fotoblog con il piè di pagina (o footer) e il testo in cui diciamo di essere gli autori del Fotoblog. Sostituiamo le seguenti righe:

  {if $post.last}</ul>{/if}
  {/posts}
  </div>
  <div class="column2">{sidebar file="sidebar2.htm"}</div>           

Con le seguenti:

  {if $post.last}</ul>{/if}
  {/posts}
  </div>
        
  <hr color="#77aee3" />
  <div id="footer" align="left">Fotoblog creato da 
  <a href="inserisci l'indirizzo web del tuo profilo">
  Tuo Nickname</a>.</div>
            
  <div class="column2">{sidebar file="sidebar2.htm"}</div>           

Salviamo le modifiche e andiamo a vedere la trasformazione che abbiamo effettuato sulla nostra Home Page.

Ora non ci rimane che eliminare lo sfondo marrone che si visualizza ogni volta che andiamo a vedere una fotografia ingrandita.

Per farlo, basta aggiungere nel Foglio di stile questo attributo all'elemento center:

  #center {
  background-color: transparent;
  }           

Ora tocca a voi. Non appena avrete modificato il template del vostro Fotoblog, se vi và, segnalatecelo, lo pubblicheremo all’interno del Blog Redazione.

Buon lavoro!

Carissimi MyBlogger… i più attenti se ne saranno già accorti, per tutti gli altri il Blog Redazione è pronto a strillare la notizia ai quattro venti:  subito per voi, al prezzo di un sorriso, tantissimi template scintillanti per rendere il vostro blog ancora più bello e in linea con le vostre idee …
Calcolando tutte le possibili combinazioni adesso potete scegliere tra ben 76 modelli diversi!
Non male vero?

Andate subito a dare un’occhiata in Presentazione < template per scegliere il modello che vi piace di più!

Questo tutorial mostra come modificare graficamente i titoli degli elementi inseriti nelle sidebar, come Post recenti, Ultimi blog aggiornati, Categorie, ecc…

Entriamo nella sezione Presentazione > Opzioni avanzate del pannello di controllo e clicchiamo sul link Modifica modello del Foglio di Stile.

Si aprirà una finestra contenente il codice CSS che struttura tutto il Blog e con il quale, come abbiamo già visto, possiamo effettuare mdifiche su ogni parte del nostro Blog. All’interno della pagina cerchiamo l’oggetto .sidebar h2 se abbiamo scelto il template con una colonna sola, invece cerchiamo gli oggetti #left .sidebar h2 e #right .sidebar h2 se abbiamo scelto il template con due colonne che rappresentano rispettivamente la colonna di sinistra e la colonna di destra.

Il template del nostro blog è questo:

Dove i titoli degli elementi presenti nella colonna laterale hanno questa grafica:

Il codice che li rappresenta è questo:

.sidebar h2 {
    margin: 0px 0px 10px 0px;
    font-size: 110%;
    font-weight: bold;
    padding-left: 25px;
    background-image: url("http://static.blog.alice.it/backend/graphics/design/preview/alice_set7/384c64/bullet_b.gif");
    background-repeat: no-repeat;
}
 

Ora, quello che vogliamo modificare sono il colore dello sfondo, l’immagine del libro e inserire una linea che divide il titolo dal contenuto dell’elemento, come nell’esempio:

Per modificare lo sfondo del titolo da verde a blu, inseriamo all’oggetto .sidebar h2 l’attributo:

dove i numeri dopo i due punti rappresentano il valore esadecimale del colore blu che abbiamo scelto. Per conoscere i valori esadecimali di tutti i colori potete identificarli grazie a questa applicazione.

La riga di codice per creare la linea bianca tratteggiata che divide il titolo dell’elemento dal suo contenuto è questa:

dove border-bottom indica il bordo inferiore dell’oggetto .sidebar h2 e dashed è il comando che disegna una linea tratteggiata.

Per sostituire l’immagine del libro, invece, dobbiamo prima scegliere l’immagine sostitutiva. Abbiamo scelto di inserire sullo sfondo blu un fiore bianco.
Per inserire un’immagine delle stesse dimensioni del libro dobbiamo innanzitutto cliccare con il tasto destro del mouse sull’immagine del libro per far apparire il menu a tendina. Clicchiamo su Salva sfondo come… (su Internet Explorer) o Visualizza immagine di sfondo (se utilizzate Firefox).

Si aprirà una finestra contenente solo l'immagine, la salviamo sul nostro computer e la apriamo con un programma di grafica.
Importiamo anche l’immagine da sostituire e adattiamo le sue dimensioni con quelle dell’immagine originale (in questo caso l’immagine del libro), in questo modo quando la inseriremo nel Blog sarà omogenea con il resto della grafica.
Salviamo il file con la nuova immagine (vi consigliamo di salvarlo nel formato JPG o PNG) e lo carichiamo nel nostro Blog da Pannello di Controllo > Gestione File.
Clicchiamo sulla cartella images e poi sul bottone Sfoglia per selezionare e caricare la foto nel Blog.
Dopo pochi secondi vedremo la nostra immagine apparire nell’elenco dei file all’interno della cartella images.
Clicchiamo con il tasto destro del mouse sul nome del file e selezioniamo Copia collegamento (in Internet Explorer) o Copia indirizzo (in Firefox).

In questo modo abbiamo copiato l’indirizzo web dell’immagine.
Torniamo nel Foglio di stile, cerchiamo ancora l’oggetto .sidebar h2 e nella riga:

sostituiamo http://static.blog.alice.it/backend/graphics/design/preview/alice_set7/384c64/bullet_b.gif con l’indirizzo web della nostra immagine.

Il codice finale che rappresenta il titolo degli elementi in sidebar diventerà così:

.sidebar h2 {
    margin: 0px 0px 10px -5px;
    font-size: 110%;
    font-weight: bold;
    padding-left: 25px;
    border-bottom: dashed;
    background-color: #384c64;
    background-image: url("http://mipiacelanutella.myblog.it/images/bullet_b.jpg");
    background-repeat: no-repeat;
}

Graficamente invece:

Le modifiche che potete fare sono tantissime e potete sbizzarrirvi come più vi pare!
Buon lavoro!

Questo tutorial mostra come è possibile modificare lo sfondo del blog: cambiare il colore e sostituire il colore con un’immagine.

Apriamo il nostro blog a cui abbiamo associato uno dei template messi a disposizione nella sezione Presentazione > Template:

 
In questo template lo sfondo è verde, ma lo vogliamo sostituire con questa immagine di dimensioni 650x568 px:

Come fare? Innanzitutto carichiamo la nostra immagine nello spazio disponibile sul Blog e per farlo entriamo nella sezione Pannello di controllo > Gestione file:

Clicchiamo sulla cartella images e poi sul bottone Sfoglia per selezionare e caricare la foto dal nostro computer nel Blog.
Dopo pochi secondi vedremo la nostra immagine apparire nell’elenco dei file all’interno della cartella images.
Clicchiamo con il tasto destro del mouse sul nome del file e selezioniamo Copia collegamento (in Internet Explorer) o Copia indirizzo (in Firefox).

In questo modo abbiamo copiato l ‘URL, ovvero l’indirizzo web, della nostra immagine. Incolliamo il link in un file di testo e lo salviamo, ci servirà tra poco.

Ora dobbiamo inserire nel codice del Blog il link della nuova immagine che abbiamo caricato: andiamo in Presentazione > Opzioni avanzate e clicchiamo su Modifica modello del Foglio di stile. Si aprirà una finestra contenente il codice CSS. Cerchiamo queste righe di codice:

body {
    margin:0px;
    padding: 0px;
    background-color: transparent;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    background: #247272;
    font-size: 100%;
    word-spacing: normal;
    text-align: center;
}

La riga di codice che interessa a noi in questo momento è:

i numeri dopo i due punti rappresentano il valore esadecimale del colore verde che è ora presente come sfondo del blog.
Se si vuole semplicemente sostituire il colore verde con un altro, basta inserire il valore esadecimale del nuovo colore, ad esempio:

Per sostituire il colore con un’immagine, invece, dobbiamo modificare la riga background con:

dove al posto di “Link della immagine di sfondo” dovete inserire il link della vostra immagine caricata in Gestione file.
Clicchiamo sul bottone Salva queste informazioni e il risultato che avremo sarà questo:

In questo modo l’immagine di sfondo verrà ripetuta sia in orizzontale che in verticale infinite volte. Per fare in modo che si ripeta soltanto in orizzontale alla riga background dobbiamo aggiungere repeat-x:

dove #000000 è il valore esadecimale del colore nero (abbiamo scelto il nero perché è lo stesso colore di sfondo della nostra immagine) e deve essere inserito se non si vuole che si visualizzi uno sfondo bianco dove l’immagine non appare.

Per fare in modo che si ripeta soltanto in verticale:

Mentre, se vogliamo che la nostra immagine non venga ripetuta nello sfondo:

Myblog.it già nella sua versione di lancio offre molti modelli grafici (template) e diverse strutture applicabili al tuo blog.
Per scegliere e per gestire il modello e l'organizzazione del tuo blog, vai su 'Presentazione / Modelli'.

Dopo aver scelto la struttura che preferisci per il tuo blog (due colonne, tre colonne etc.) puoi modificare il modello grafico: selezionane uno cliccando su 'Usa questo modello' tra quelli che ti piacciono di più o che meglio si prestano ai tuoi contenuti.
Cliccando sul link 'Personalizza', sotto a ogni modello, potrai scegliere il tipo di carattere da usare (font, p.e. Times new Roman, Verdana, Tahoma) e i colori. In alcuni casi puoi scegliere tra diverse gamme cromatiche predefinite, in altri casi personalizzare a tuo completo piacimento i colori.
Già adesso c'è l'imbarazzo della scelta, ma nel corso del tempo si aggiungeranno altri template e tante nuove sorprese. Se invece conosci l'html, sei libero di modificare l'html o il foglio di stile, selezionando il link 'Opzioni Avanzate'.