REDAZIONE

In alcuni siti, specialmente in quelli di poesia, i paragrafi iniziano sempre con una lettera a cui è associato uno stile diverso dalle altre. Un paragrafo in HTML è compreso tra i tag <p> e </p>.
Oltre a migliorare l’effetto grafico, questa decorazione diventa utile nella lettura per non sbagliare riga in testi molto lunghi.

Entrate nella sezione “Presentazione > Opzioni avanzate” e cliccate sul link “Modifica modello” del Foglio di stile. Nella colonna destra incollate le seguenti righe.

CSS

    #center p:first-letter{
    font-size:200%;
    font-weight: bold;
    }    

Il codice CSS che abbiamo scritto sopra è solo un punto di inizio da cui partire per dare l’effetto che più desiderate. Potete cambiare il colore, aggiungere dei bordi, etc. Ad esempio:

CSS

    #center p:first-letter { 
    border-style: outset;
    border-width: 2px;
    padding: 2px;
    font-weight: bold;
    font-size: 200%;
    background-color: yellow;
    }    

In questo articolo vi mostriamo come personalizzare la visualizzazione dei link all’interno dei post. In particolare vogliamo applicare ai link uno sfondo colorato che cambia colore al passaggio del mouse sopra di essi.

La modifica da effettuare è molto semplice. Andate nella sezione “Presentazione > Opzioni avanzate” e cliccate sul link “Modifica modello” del Foglio di stile.

Nella colonna destra della finestra pop up incollate le seguenti righe di codice:

  .content a {
   color: #FFF;
   background: #70ade4;
   padding: 1px 2px 1px 2px;
   margin: 1px 0px 1px 0px;
   }
   
   .content a:hover {
   color: #FFF;
   background: #1973c9;
   }  

Dove:

• color definisce il colore del link, in questo caso bianco (#FFF);
• background definisce il colore di sfondo dei link, in questo caso azzurrino (#70ade4);
• padding definisce quanto spazio che deve esserci tra il testo e i bordi del backgound;
• margin definisce lo spazio che deve esserci tra i bordi del background e gli elementi intorno al link.

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!

Cari MyBlogger,

in questo tutorial vi mostriamo come inserire in automatico le categorie e gli archivi del vostro blog nel menù a tendina che abbiamo creato utilizzando soltanto codice HTML e CSS.

Riprendendo il nostro tutorial, basterà inserire nel codice HTML che avete creato, due nuove voci, Categorie e Archivio, inserendo le seguenti righe di codice che permettono di richiamare in automatico quelle informazioni:

    <li><a href="#"><strong>Categorie</strong></a>
    {categories assign="category"}{if $category.first}
    <ul class="menu_body">{/if}<li>
    <a href="{$category.url|urlchar|lower}/">{$category.name}</a>
    </li> {if $category.last}</ul>{/if} {/categories}
    </li>
       
    <li><a href="#"><strong>Archivio</strong></a><ul>
    {archives assign="archive" archive_type="@archive_type@" 
    date_format="@archive_type_format@" limit="10"} {if $archive.first}
    {/if}<li><a href="{$archive.url}">{$archive.name}</a></li> 
    {if $archive.last}<li><a href="{$blog.url}archives/">
    {t}All archives{/t}</a></li></ul>{/if}{/archives}
    </li>      

Prendendo come esempio concreto il menù a tendina inserito nel Blog Redazione, il risultato finale sarà questo:

    <ul id="mymenu">
       
    <li>
    <a href="http://redazione.myblog.it"><strong>Home</strong></a>
    </li>
       
    <li>
    <a href="#"><strong>Categorie</strong></a>
    {categories assign="category"}{if $category.first}
    <ul class="menu_body">{/if}<li>
    <a href="{$category.url|urlchar|lower}/">{$category.name}</a>
    </li> {if $category.last}</ul>
    {/if} {/categories}
    </li>
       
    <li>
    <a href="#"><strong>Le sezioni di MyBlog.it</strong></a>
    <ul>
    <li><a href="http://blog.virgilio.it/audioblog.html" target="_blank">
    Audio post</a></li>
    <li><a href="http://blog.virgilio.it/blog_giorno.html" target="_blank">
    Blog del giorno</a></li>
    <li><a href="http://blog.virgilio.it/bloglive.html" target="_blank">
    Blog live</a></li>
    <li><a href="http://blog.virgilio.it/photoblog.html" target="_blank">
    Foto post</a></li>
    <li><a href="http://blog.virgilio.it/blog_piu_visti.html" target="_blank">
    Migliori blog</a></li>
    <li><a href="http://blog.virgilio.it/post_piu_visti.html" target="_blank">
    Migliori post</a></li>
    <li><a href="http://blog.virgilio.it/funzionalita.html" target="_blank">
    Tutte le funzionalità</a></li>
    <li><a href="http://blog.virgilio.it/tutti_tag.html" target="_blank">
    Tutti i tag</a></li>
    <li><a href="http://blog.virgilio.it/videoblog.html" target="_blank">
    Video post</a></li>
    </ul>
    </li>
       
    <li>
    <a href="#"><strong>Blog e dintorni</strong></a>
    <ul>
    <li><a href="http://community.virgilio.it/ugc/speciale/blog/" 
    target="_blank">Blog Magazine</a></li>
    <li><a href="http://tecnologia.virgilio.it/" target="_blank">
    Consigli per scrivere un blog</a></li>
    <li><a href="http://virgiliopeople.virgilio.it/" target="_blank">
    Trova Amici</a></li>
    <li><a href="http://community.virgilio.it/" target="_blank">
    Virgilio Community</a></li>
    <li><a href="http://virgilioparliamone.myblog.it/" target="_blank">
    Virgilio? Parliamone</a></li>
    </ul>
    </li>
       
    <li>
    <a href="#"><strong>Archivio</strong></a>
    <ul>
    {archives assign="archive" archive_type="@archive_type@" 
    date_format="@archive_type_format@" limit="10"} {if $archive.first}
    {/if}<li><a href="{$archive.url}">{$archive.name}</a></li> 
    {if $archive.last}<li><a href="{$blog.url}archives/">{t}All archives{/t}
    </a></li></ul>{/if}{/archives}
    </li>
       
    </ul>      

Buon lavoro!

Cari MyBlogger,

poco tempo fa abbiamo visto come creare un menu a tendina personalizzato utilizzando Ajax, in questo tutorial vediamo come ricreare la stessa cosa utilizzando però soltanto codice HTML e CSS in modo da sfruttare al meglio tutte le funzionalità di MyBlog senza doversi appoggiare a server esterni e rendere quindi il nostro blog più veloce.

L’effetto che gli vogliamo dare è il seguente: passando il mouse su una delle voci del menù principale, lo sfondo della voce cambia e viene mostrato un menù a tendina con dei link. Anche qui, passando il mouse su uno di questi link, il colore del testo e dello sfondo cambiano. Per mostrarvi come crearlo, prenderemo come esempio il menù a tendina presente nel Blog Redazione.

Per prima cosa vediamo come costruire in HTML la struttura del menù a tendina.

     <ul id=”nomeID”>
      
      <li><a href=”#”>Voce 1</a><ul>
      <li><a href=”#”>Sottomenu 1.1</a></li>
      <li><a href=”#”>Sottomenu 1.2</a></li>
      <li><a href=”#”>Sottomenu 1.n</a></li>
      </ul></li>
      
      <li><a href=”#”>Voce 2</a><ul>
      <li><a href=”#”>Sottomenu 2.1</a></li>
      <li><a href=”#”>Sottomenu 2.2</a></li>
      <li><a href=”#”>Sottomenu 2.n</a></li>
      </ul></li>
      
      </ul>     

Come esempio pratico, per non riempire la pagina di troppo codice, prenderemo dal menù a tendina del Blog Redazione solo alcune voci. In particolare vogliamo visualizzare:

Home – Le sezioni di MyBlog.it – Blog e dintorni

E avremo questo codice HTML:

   <ul id="mymenu">
      
   <li><a href="http://redazione.myblog.it"><strong>Home</strong></a></li>
      
   <li><a href="#"><strong>Le sezioni di MyBlog.it</strong></a><ul>
   <li><a href="http://blog.virgilio.it/audioblog.html" target="_blank">
   Audio post</a></li>
   <li><a href="http://blog.virgilio.it/blog_giorno.html" target="_blank">
   Blog del giorno</a></li>
   <li><a href="http://blog.virgilio.it/bloglive.html" target="_blank">
   Blog live</a></li>
   <li><a href="http://blog.virgilio.it/photoblog.html" target="_blank">
   Foto post</a></li>
   <li><a href="http://blog.virgilio.it/blog_piu_visti.html" target="_blank">
   Migliori blog</a></li>
   <li><a href="http://blog.virgilio.it/post_piu_visti.html" target="_blank">
   Migliori post</a></li>
   <li><a href="http://blog.virgilio.it/funzionalita.html" target="_blank">
   Tutte le funzionalità</a></li>
   <li><a href="http://blog.virgilio.it/tutti_tag.html" target="_blank">
   Tutti i tag</a></li>
   <li><a href="http://blog.virgilio.it/videoblog.html" target="_blank">
   Video post</a></li>
   </ul></li>
      
   <li><a href="#"><strong>Blog e dintorni</strong></a><ul>
   <li><a href="http://community.virgilio.it/ugc/speciale/blog/" target="_blank">
   Blog Magazine</a></li>
   <li><a href="http://tecnologia.virgilio.it/" target="_blank">
   Consigli per scrivere un blog</a></li>
   <li><a href="http://virgiliopeople.virgilio.it/" target="_blank">
   Trova Amici</a></li>
   <li><a href="http://community.virgilio.it/" target="_blank">
   Virgilio Community</a></li>
   <li><a href="http://virgilioparliamone.myblog.it/" target="_blank">
   Virgilio? Parliamone</a></li>
   </ul></li>
      
   </ul>     

Se andiamo ad inserire questo codice nelle pagine del nostro blog vedremo tutte le voci del menù posizionate una sotto l’altra in un elenco puntato. Un po’ bruttino, non vi pare? Dobbiamo quindi creargli un "vestito" per rendere il menù più elegante. Per farlo utilizzeremo il codice CSS.

Diamo per scontato che conosciate i Fogli di stile, quindi non staremo a commentarvi ogni attributo che trovate di seguito. Anche questo è preso dal Foglio di stile del Blog Redazione.

      ul#mymenu{
      font: 70%/1.5 Verdena,Tahoma,sans-serif;
      color: #fff;
      background: #642eab;
      width:910px;
      height:26px;
      margin-left:7px;
      margin-top:-17px;
      line-height:26px;
      }
      ul#mymenu,ul#mymenu li,ul#mymenu ul,ul#mymenu ul li{
      margin:0;
      padding:0;
      list-style-type:none
      }
      ul#mymenu a{
      display:block;
      padding: 0 15px;
      text-decoration: none;
      color:#FFF;
      }
      ul#mymenu li{
      float: left;
      position: relative;
      }
      ul#mymenu li li{
      float: none;
      line-height: 22px;
      width:200px;
      display:block !important;
      display: inline;
      }
      ul#mymenu ul{
      position: absolute;
      top: 25px;
      left: -9999px;
      width: 12em;
      background: #fff;
      color: #642eab;
      }
      ul#mymenu ul{
      padding: 7px 0;
      border: 1px solid #642eab;
      width:200px;
      }
      ul#mymenu ul,ul#mymenu li li a{
      background-color: #FFF;
      color: #642eab;
      }
      ul#mymenu li:hover,ul#mymenu a:hover{
      background-color: #7143a8;
      color: #FFF;
      }
      ul#mymenu li:hover ul,ul#mymenu li.sfhover ul{
      left: -1px;z-index: 100;
      }     

Ora che abbiamo “cucito l’abito” del nostro menù a tendina non resta che applicarlo al codice HTML: dal pannello di gestione del blog, entriamo nella sezione “Presentazione > Opzioni avanzate” e clicchiamo sul link “Modifica modello” del Foglio di stile. All’interno della colonna destra della finestra che si è aperta, incolliamo il nostro codice CSS e salviamo le modifiche.

Adesso dobbiamo inserire il menù orizzontale a tendina nelle pagine del nostro blog. Vogliamo posizionarlo sotto l'header. Restiamo quindi all’interno della sezione “Presentazione > Opzioni avanzate” e inseriamo il nostro codice HTML all’interno di:

• Modello della homepage
• Modello della pagina categoria
• Modello di pagina Link permanente
• Template Tags

Cerchiamo le seguenti righe ed incolliamo il codice del menù subito dopo:

      <div id="banner">
      <div class="banner-decorator1">
      <div class="banner-decorator2">
      <h1><a href="{$blog.url}">{$blog.title}</a></h1>
      <h2>{$blog.description|default:"&nbsp;"}</h2>
      </div></div></div>     

Buon lavoro!

Alcuni dei MyBlogger più seguiti hanno inserito all’interno delle proprie colonne laterali dei un menù a tendina, come ad esempio i ragazzi di Very Inutil People.
Alcuni di voi ci hanno chiesto come fanno e oggi vi mostriamo come creare in pochi passi un menù a tendina espandibile e personalizzabile, come questo:

Guarda la DEMO.

Dal pannello di gestione del blog andiamo in “Presentazione > Opzioni avanzate” e in queste 5 pagine:
- Modello della home-page
- Modello della pagina dei commenti
- Modello della pagine di link permanente
- Modello della pagina categoria
- Template tags

incolliamo il seguente codice tra le tag <head> e </head>:

    <script type="text/javascript" 
    src="http://scripts.xoom.it/scripts/jquery.js"></script>
    <script type="text/javascript" 
    src="http://scripts.xoom.it/scripts/dropmenu/alternate.js"></script>      

Ora andiamo nella sezione “Presentazione > Contenuto delle barre laterali di navigazione” e in fondo alla pagina clicchiamo sul bottone “Aggiungi un testo”. Si aprirà una finestra dove dovremo incollare il seguente codice:

    <img src="http://scripts.xoom.it/scripts/dropmenu/categorie.jpg" 
    width="184" height="40" class="menu_head" />
    <center>
    <ul class="menu_body">
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
    </ul>
    </center>      

Vediamo nel dettaglio cosa contiene questo script.

    <img src="http://scripts.xoom.it/scripts/dropmenu/categorie.jpg" 
    width="184" height="40" class="menu_head" />      

mostra una immagine che, una volta cliccata, farà apparire il menù a tendina. Potete utilizzare questa che vi diamo a disposizione oppure una personalizzata da voi.

Per inserire una vostra immagine dovete semplicemente modificare l’url e le dimensioni dell’immagine all’interno dello script senza però toccare il valore di “class”, in questo modo:

    <img src="http://URL_Immagine_Personale" 
    width="Valore_Larghezza" height="Valore_Altezza" 
    class="menu_head" />      

Il resto del codice si occupa di visualizzare le voci di menù che volete inserire.
Ogni riga come questa contiene una nuova voce testuale con link:

    <li><a href="#">Menu1</a></li>      

Diamo un titolo, senza renderlo visibile, al nuovo oggetto che abbiamo creato. Salviamolo e pubblichiamolo in una colonna. A questo punto, se andiamo nel nostro blog vedremo soltanto la nostra immagine seguita da un elenco testuale. Per dare un aspetto grafico più conforme al nostro blog, dovremo modificare alcuni parametri nel Foglio di stile.

Quindi, andiamo in “Presentazione > Opzioni avanzate” e clicchiamo sul bottone “Modifica modello” del Foglio di stile ed incolliamo il seguente codice:

      
    sidebar ul {
    padding: 0px;
    margin: 0px;
    list-style:none;
    }
    .sidebar li {
    margin: 0px 0px 0px 0px;
    list-style-type: none;
    list-style:none;
    }
    .menu_head{border:1px solid #998675;}
    .menu_body {display:none; width:184px;
    border-right:1px solid #998675;
    border-bottom:1px solid #998675;
    border-left:1px solid #998675;}
    .menu_body li{background:#493e3b;}
    .menu_body li.alt{background:#362f2d;}
    .menu_body li a{color:#FFFFFF; 
    text-decoration:none; padding:10px; 
    display:block;}
    .menu_body li a:hover{font-weight:bold;}
             

Modificando questi attributi possiamo scegliere i colori e le dimensioni da dare allo sfondo e al testo del menù a tendina. Una volta modificate le impostazioni come piacciono a noi, salviamole e andiamo a vedere l’effetto finale.

Se volete creare un menù a tendina che mostra in automatico le categorie che avete creato all’interno del vostro blog, basta sostituire il codice dell’oggetto creato nella sezione “Presentazione > Contenuto delle barre laterali di navigazione” con questo:

    <img src="http://scripts.xoom.it/scripts/dropmenu/categorie.jpg" 
    width="184" height="40" class="menu_head" />
    <center>{categories assign="category"}{if $category.first}
    <div id="box-categories" class="box-decorator1">
    <div class="box-decorator2"><div class="box-decorator3"> 
    <div class="decorator1"> <div class="decorator2"></div></div> 
    <div class="boxcontent-decorator1">
    <div class="boxcontent-decorator2">
    <div class="boxcontent-decorator3"> 
    <ul class="menu_body">{/if}<li>
    <a href="{$category.url|urlchar|lower}/">{$category.name}</a>
    </li> {if $category.last}</ul> </div></div></div> 
    </div></div></div>{/if} {/categories}</center>      

Buon lavoro!

Finalmente nuove fantastiche opportunità per personalizzare il nostro blog!

Da martedì 16 Marzo tutti i Myblogger che utilizzano i fogli di stile predefiniti (template) potranno ricevere automaticamente tutte le nuove funzionalità che implementeranno i nostri blog senza dover metter mano al css :-)

Inoltre se utilizzi la funzione "Personalizza il tuo header"  potrai  (se il modello scelto lo permette) cambiare modello di template senza dover tutte le volte re-inserire i banner pubblicitari, evitando di perdere del tempo utile che potrà essere investito nella stesura di nuovi post!

Dulcis in fundo :-) è disponibile una nuova funzionalità che ci permetterà di modificare il CSS del nostro blog in modo facilissimo, vediamo come:

Nella sezione presentazione > opzioni avanzate > modifica modello foglio di stile. cliccando su "modifica modello foglio di stile" possiamo vedere, come illustra la foto, il foglio stile predefinito del nostro template (da consultare ma non modificare) nel box di destra invece possiamo inserire tutte le modifiche che desideriamo fare al blog, basta aggiungere delle regole CSS in questa sezione per caricare il foglio di stile modificato. Per personalizzare interamente il foglio di stile deselezionate la casella "Importa questi CSS" che si trova sotto la sezione sinistra. Eviterete così di caricare il CSS predefinito.

Facciamo un esempio pratico per capire :-)

Immaginiamo di voler cambiare lo sfondo del titolo dell'header inserito( da blu a rosso) . Per prima cosa cercare  lo stile nella parte sinistra, nell'esempio troverete:

#banner h1 {background-color: #336699; padding: 10px 15px 20px 15px; margin: 0px;}

Nella sezione a destra ricopiate solo la parte che si vuole cambiare, modificando

#banner h1 {background-color: #ff0000;}

In questo modo il foglio di stile illustrato sulla destra andrà a sovraccaricarsi a quella di sinistra, ed avremo:

#banner h1 {background-color: #ff0000; padding: 10px 15px 20px 15px; margin: 0px;}

Se volete avere qualche spunto in più su come modificare il vostro template date un'occhiata alla sezione "personalizza il tuo blog con i tutorial".

Le possibilità di personalizzazione sono illimitate ma vi consigliamo di non esagerare se non avete già le idee chiare sul risultato che volete ottenere! Un ultimo consiglio: se avete apportato modifiche nella parte destra del box, e selezionate un nuovo template perderete tutte le modifiche apportate ed il blog tornerà alla sua versione standard. Ricordate quindi di fare sempre un backup dei vostri modelli, in questo modo non perderete le vostre personalizzazioni!

P.S. Potrebbero verificarsi dei rallentamenti nel corso delle mattinata del 16 a causa dell'implementazione del nuovo servizio, ci scusiamo per gli eventuali disagi.

In questo tutorial vi mostriamo come modificare le dimensioni e la posizione del titolo del vostro blog nella maggior parte dei template disponibili.

Se si nota, il padding del sottotitolo dista sopra di 10px dall’elemento titolo e a sinistra di 420px dal lato sinistro dell’header.