REDAZIONE

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,

forse non tutti lo sanno, gli oggetti EMBED sono elementi HTML che hanno la funzione di contenitori di documenti come file audio, video, VRML etc… Il browser riesce a mostrarci questo elemento soltanto se ha installato un plug in apposito, se il browser è dotato di questo plug in, il contenuto non viene visualizzato e, solitamente, appare un’avvertenza che spinge l’utente a scaricare quel plug in.

Un esempio molto diffuso di EMBED è quello di Flash Player o di QuickTime che ci permettono di vedere molti dei video e delle animazioni presenti su internet, di ascoltare la musica, di giocare online, etc… Flash Player è quello più diffuso, ma uno dei suoi problemi è che, essendo i file SWF ignorati dai motori di ricerca, il nostro blog o sito web viene male indicizzato o non viene affatto indicizzato se abbiamo una pagina contenente soltanto un file Flash.

È quindi necessario offrire ai motori di ricerca del testo.
Ma se io non voglio mostrare quel testo ai miei visitatori perché produce effetti estetici indesiderati nel mio blog/sito web, o per qualsiasi altra ragione?
La soluzione è quella di nasconderlo alle persone, ma di lasciarlo visibile solo ai motori di ricerca. Per fare questo basta inserire una nuova tag denominata NOEMBED subito dopo il codice EMBED del nostro file.

Questo elemento può contenere codice HTML che viene letto dai motori di ricerca, ma che viene mostrato nel browser soltanto se l’utente  non ha installato il plug in necessario oppure sta utilizzando un browser molto vecchio che non riconosce la tag NOEMBED.

Vediamo un esempio.

     <embed src="ilvideodellemievacanze.swf" width="640" height="480"   
     pluginspage="http://example.com/shockwave/download/" />
     <noembed><h1>Vacanze in toscana</h1>
     <br />Il video della serata livornese con i nostri amici toscani!</noembed>       

In questo caso, se nel browser è stato installato il plug in di Flash Player, i visitatori del blog vedranno il filmato delle nostre vacanze, altrimenti verrà visualizzata la richiesta di scaricare il plug in e il testo che abbiamo inserito all’interno di NOEMBED.

Cari MyBlogger,

in questo tutorial vi mostriamo come inserire, all’interno di ogni post, delle icone “personalizzate” dei Social Network più utilizzati. Come ad esempio:

Condividi questo post

Prima di tutto cerchiamo le icone dei Social Network che più ci piacciono.
In rete se ne possono trovare tantissime, basta fare una ricerca.

Una volta trovate, le scarichiamo e le carichiamo all’interno del nostro Blog dalla sezione “Pannello di controllo > Gestione file > Images”.

Cliccando su ogni icona caricata, si aprirà una pagina con la nostra immagine, quindi salviamo in un file gli url delle nostre icone e andiamo nella sezione “Presentazione > Opzioni avanzate”.

Per inserire le icone in tutte le sezioni che contengono i post, all’interno di:

• Modello della home-page
• Modello della pagine di link permanente
• Modello della pagina categoria
• Template tags

cerchiamo il seguente codice:

     {if $post.extended}<p class="readmore"><a href="{$post.permalink}
     #more">{t}Read more ...{/t}</a></p>{/if}       

e, subito dopo incolliamo:

     <!-- INIZIO BOTTONI SOCIAL NETWORK -->
        
     <img src="http://blog.myblog.it/images/condividi-questo-post.png">
     <br /><br /><a class="social" href="http://del.icio.us/post?url=
     {$post.permalink}" target="_blank">
     <img src="http://blog.myblog.it/images/icone/delicious.png" 
     border="0"></a><a class="social" 
     href="http://www.stumbleupon.com/submit?url=
     {$post.permalink}&title={$post.title}" target="_blank">
     <img src="http:// blog.myblog.it/images/icone/stumbleupon.png" 
     border="0"></a><a class="social" 
     href="http://www.technorati.com/faves?add={$post.permalink}" 
     target="_blank">
     <img src="http:// blog.myblog.it/images/icone/technorati.png" 
     border="0"></a><a class="social" 
     href="http://www.google.com/bookmarks/mark?op=
     edit&output=popup&bkmk={$post.permalink}/&title={$post.title}" 
     target="_blank">
     <img src="http:// blog.myblog.it/images/icone/google.png" 
     border="0"></a><a class="social" 
     href="http://twitter.com/home?status= {$post.permalink}" 
     target="_blank">
     <img src="http:// blog.myblog.it/images/icone/twitter.png" 
     border="0"></a>
     <a class="social" href="http://www.facebook.com/share.php?u=
     {$post.permalink}/&t={$post.title}" target="_blank">
     <img src="http:// blog.myblog.it/images/icone/facebook.png" 
     border="0"></a>
        
     <!-- FINE BOTTONI SOCIAL NETWORK -->       

Vediamo nel dettaglio cosa è stato inserito in questo codice HTML:

   <a class="social" href="http://del.icio.us/post?url=
   {$post.permalink}" target="_blank">
   <img src="http://blog.myblog.it/images/icone/delicious.png" 
   border="0"></a>    

class=”social” è lo stile CSS che abbiamo applicato ad ogni icona per distanziarla in modo omogeneo dalle altre.
Per inserire il codice CSS, andiamo in “Presentazione > Opzioni avanzate” e clicchiamo il link “Modifica modello” posizionato a destra di “Foglio di stile”.
Nella colonna destra della finestra che si apre scriviamo:

       .social {
        padding:10px;
        }       

Questo significa che ogni icona mantiene una distanza di 10 pixel da qualsiasi cosa la circonda. Questo codice CSS potete personalizzarlo come più vi piace.

Gli url presenti all’interno degli href, invece, non modificateli, sono quelli che vi permettono di condividere i post sui Social Network, ad esempio:

href=”http://del.icio.us/post?url={$post.permalink}”


Per utlimo, ma non meno importante, il codice src, che contiene l’url delle vostre icone che avete precedentemente caricato:

src=”http://blog.myblog.it/images/icone/delicious.png”


Ora tocca a voi. Buon lavoro!

Quando si crea un Blog, un aspetto fondamentale, ancora più importante della grafica, è rappresentato dalla scelta dei font e della loro dimensione.

Scrivere on line è diverso che scrivere sulla carta. La lettura su schermo è più difficile e più lenta rispetto alla lettura su carta stampata. Una pagina stampata mantiene sempre la stessa forma e struttura, quasi sempre gli stessi caratteri e si può leggere con facilità ovunque ci troviamo. Scrivere per il web significa tener conto di alcuni elementi importanti:

• la risoluzione e il formato dello schermo: quando si crea un Blog o un sito web, bisogna ricordare che verrà letto anche da chi non ha uno schermo di ultima generazione. Una dimensione del font concepita per una risoluzione 800x600px può diventare difficilmente leggibile se guardato con una risoluzione 1280x1024px. Inoltre, bisogna ricordare anche che ancora in molti utilizzano monitor da 15 pollici e quindi se si creano Blog o siti web per monitor più grandi alcune parti potrebbero venire tagliate.
• I diversi sistemi operativi e browser: non dobbiamo dimenticare che i PC e i Mac supportano in modo diverso i font e che ci sono differenze anche tra i browser più diffusi come Internet Explorer, Firefox, Safari e Chrome. Se il font che vogliamo utilizzare non è disponibile sul sistema dell'utente, questo sarà sostituito con un font standard, che nella maggior parte dei browser è il Times New Roman.

I font standard utilizzati fino ad oggi nel web, perché riconosciuti nello stesso modo da quasi tutti i sistemi operativi e browser, sono:

• Times New Roman
• Georgia
• Arial
• Verdana
• Courier New
• Lucida Console
• Lucida Grande

Possiamo scegliere i font da utilizzare basandoci su tre fattori significativi:

1. Leggibilità: i font più leggibili sono Arial, Courier e Verdana.
2. Attrattività: Georgia e Times New Roman sono quelli più attrattivi.
3. Dimensione: se si vuole mantenere una grandezza di 10px il più leggibile resta il Verdana. Per una grandezza di 12px meglio utilizzare l'Arial.

Questi elementi sono quelli base per poter scegliere un font, ma non dobbiamo dimenticare che ci sono altri punti importanti che pesano sulla nostra scelta, come il contrasto fra lo sfondo e il colore del testo, l'intestazione della pagina, i titoli, la divisione in paragrafi brevi ed elenchi, i link testuali, etc…
Parlare di tutte queste cose in un solo post è impossibile, quindi ne parleremo un’altra volta.

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!

La personalizzazione del tuo blog diventa più facile grazie alla voce “Aggiungi HTML/Javascript code”  all’interno di Presentazione < Aggiungi un oggetto personalizzato!

Grazie a questa voce potrai inserire widget, contatori, statistiche e altro ancora in un click! Ma andiamo con ordine facendo un esempio: ti sei appena iscritto su twitter e hai voglia di far sapere anche ai naviganti del tuo blog  “What are you doing”?
Grazie al link “Aggiungi HTML/Javascript code” fai  apparire la widget di twitter (come quella che abbiamo sul blog redazione) anche sul tuo blog!

Non sai cosa sono le widget?… beh di certo le hai viste in giro magari non sai che si chiamano così… cmq sono micro-applicazioni che propongono contenuti digitali da inserire direttamente nel blog, copiando ed incollando un codice. In rete ce ne sono davvero tante e coprono un vasto raggio di funzioni, dai giochi alle piccole chat ai sondaggi… di sicuro ognuna di esse dà valore aggiunto al tuo blog rendendolo la pagina principale di tutti i contenuti che hai in rete!

Per prima cosa bisogna trovare on line un servizio che ti fornisce i codici della widget che vuoi inserire!  Ad esempio per twitter basta andare sul sito di twitter alla sezione widget, selezionare other e poi andare sulla voce HTML widget . Qui possiamo scegliere quanti aggiornamenti pubblicare e il titolo del nostro widget.

Ora è sufficiente andare  su Presentazione < Aggiungi un oggetto personalizzato < Aggiungi HTML/Javascript code, dare  un nome (campo 'Nome dell'oggetto') all’oggetto che vuoi aggiungere e incollare nell'apposito spazio (campo 'Contenuto dell'oggetto') l'hmtl . Una volta inserito potrai scegliere dove posizionarlo muovendoti con le frecce.
Ricordati di cliccare il bottone aggiorna questi dati, e a questo punto ti troverai tra gli elementi anche l’elemento twitter, basta ora aggiungerlo alla barra di navigazione (destra o sinistra) e salvare le modifiche.
Il gioco è fatto! Ora tutti i tuoi amici dalle pagine del blog potranno avere anche le info che provengono dal tuo twitter! Comodo vero?

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.

Questo tutorial mostra come inserire un’immagine all’interno del blog utilizzando il linguaggio HTML, come modificare le sue dimensioni e come associarle un link.
Le righe di codice che andremo a scrivere potranno essere inserite negli editor HTML presenti nel Pannello di Controllo del vostro blog: l’editor dei post e l’editor della sezione Presentazione > Contenuto delle barre laterali di navigazione che permette di creare nuovi elementi da inserire nelle colonne del vostro blog.

Per editare il codice HTML si dovranno modificare alcune tag che servono a costruire e modificare un’immagine.
Il codice html che permette di visualizzare un’immagine è questo:

<img src=”http://…”> 

src contiene l’indirizzo web dove si trova l’immagine da mostrare.
Se l’immagine che volete inserire non è già online, la potete caricare nel vostro spazio MyBlog da Pannello di Controllo > Gestione File.
Cliccate sulla cartella images e poi sul bottone Sfoglia per selezionare e caricare l’immagine dal vostro PC.
Dopo pochi secondi vedrete l’immagine apparire nell’elenco dei file all’interno della cartella images.
Cliccate con il tasto destro del mouse sul nome del file e selezionate Copia collegamento (in Internet Explorer) o Copia indirizzo (in Firefox). 

In questo modo avete copiato la url della vostra immagine e non vi resta che inserirla all’interno di src del codice HTML.

Come ridimensionare un'immagine 

Per modificare le dimensioni dell’immagine si devono inserire due attributi:
width che definisce in pixel la larghezza che vogliamo attribuire all’immagine e height che definisce l’altezza. I valori da inserire possono essere scelti liberamente.
Ad esempio:

Come associare un link a un'immagine

Per associare un link all’immagine, invece, si deve aggiungere l’elemento:

dove href contiene l’indirizzo della pagina web che si vuole mostrare.

 

Per personalizzare maggiormente il proprio blog è utile avere una conoscenza base del linguaggio HTML.
Il tutorial che segue mostra come associare a un testo un link, una formattazione e un colore utilizzando gli editor HTML presenti nel Pannello di Controllo del blog: l’editor avanzato della sezione Post e l’editor presente nella sezione Presentazione > Contenuto delle barre laterali di navigazione che permette di creare nuovi elementi da inserire nelle colonne del vostro blog.

Nelle righe di codice HTML che andremo a scrivere modificheremo alcune tag che servono a costruire un testo.
In HTML le tag sono usate per contenere gli elementi HTML. Ogni tag viene rispettivamente aperta e chiusa da questi simboli: < e >
Normalmente le Tag HTML appaiono sempre in coppia, la prima definisce l’inizio di un elemento, la seconda la fine:

Gli attributi che interessano a noi sono quelli che si trovano nella tag <font>:
size definisce la dimensione del font (la misura standard è 2).
face definisce il carattere che verrà utilizzato sul testo. I caratteri “standard” utilizzati in Internet sono Verdana, Arial, Times, Courier, Georgia, Helvetica.


Il codice di un testo con link
Per associare un link al testo, il codice sopra diventa così:

<a href=”http://www.myblog.it”><font size=”2” face=”Verdana”>Questo è un testo con link.</font></a>

dove href contiene l’indirizzo della pagina web che si vuole mostrare.


Il codice di un testo formattato
Se si vuole un testo in grassetto, in corsivo o sottolineato basta aprire e chiudere una tag prima e dopo il testo.
Le tag da inserire sono:
per avere un testo <strong>grassetto</strong>.
per avere un testo <em>corsivo</em>.
per avere un testo <u>sottolineato</u>.
per avere un testo <strong><em><u>grassetto corsivo e sottolineato</u></em></strong>.


Il codice di un testo colorato
Se invece si vuole un testo colorato, alla tag <font> basta aggiungere l’attributo color. Ad esempio, se si vuole un testo rosso:
<font size=”2” face=”Verdana” color=”red”>Il testo apparirà rosso.</font>

se si vuole un testo blu:
<font size=”2” face=”Verdana” color=”blue”>Il testo apparirà blu.</font>

e così via per tutti i colori. Il nome del colore deve essere scritto in inglese, come nell’esempio, oppure nel formato esadecimale.