sabato 5 dicembre 2015

Tutorial Blogger: aggiungere una barra nella parte superiore.

Salve a tutti!
Spesso navigo nel web alla ricerca di ispirazione e soprattutto di risposte ai miei frequenti dubbi.
In uno di questi miei vagabondaggi mi sono ritrovata a leggere un tutorial che credo a molti possa, prima o poi, essere utile.

Come dice il titolo vi illustrerò come aggiungere una barra di navigazione nella parte superire del blog.



Il tutorial è molto semplice e veloce.
Innanzututto andiamo nella pagina Designer, dopo di che cliccate su Modello > Modifica HTML


quindi cerchiamo la seguente riga:

<body

per cercare nella finestra cliccate in un punto qualsiasi dentro di essa e digitate dalla tastiera Ctrl+f.
Uscirà questa riga:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Esattamente sotto ad essa incollate il seguente codice:
<div id='barra-superiore'>
<div id='menu'>
<ul>
<li><a href='URL 1'>Link 1</a></li>
<li><a href='URL 2'>
Link 2</a></li>
<li><a href='URL 3'>
Link 3</a></li>
<li><a href='URL 4'>
Link 4</a></li>
</ul>
</div>
</div>
 

Dove dovete sostiutuire: 
  • URL con l'indirizzo del link
  • Il testo del Link  
Se avete più di quattro sezioni, aggiungete righe esattamente uguali a  <li><a href='URL 4'>Link 4</a></li>, in questo modo:

<li><a href='URL 5'>Link 5</a></li>
<li><a href='URL 6'>Link 6</a></li> ecc....

facendo attenzione che le ultime tre righe siano  sempre:

</ul>
</div>
</div>

Una volta fatto questo, salviate il tutto e aggiungiete  il codice CSS.
Con Ctrl + f cerchiamo ora questo: ]]></b:skin>
Subito sopra copiate ed incollate il seguente codice:
 
/* Stile barra superiore
================================ */
 #barra-superiore {
  background: #eeeeee;  /*Colore della barra*/
  width:100%;
  height: 40px; /*Altezza della barra*/
  margin: 0;
  position: fixed; /*Serve a tenere fissa la barra*/
  z-index:101; /*Serve a tenere fissa la barra*/
}
#menu{
  margin:0 auto;;
  width: 920px; /*Larghezza del menú dentro della barra, con questo valore avanza*/
  height:30px; /* Altezza del menù */
}
#menu ul{
  float: left; /*Dove volete che rimanga allineado il menú, (right se lo volete a destra)*/
  background: none;
  margin: 0px;
  padding: 0;
  list-style-type: none;
  height: 25px;
}
#menu ul li{
display:block;
float:left;
height:30px;
}
#menu ul li a {
  display: block; 
  float: left; 
  color: #000000; /* Colore del testo */
  font: 12px 'Arial'; /* Misura del testo e font che volete usare*/
  text-decoration: none;
  padding: 12px 20px 0 20px;
}
#menu ul li a:hover { 
  background: #000000; /* Colore dello sfondo al passaggio del mouse per ogni link, se non volete sia  diverso usate lo stesso colore della barra*/
  color: #ffd0c2; /* Colore del testo al passaggio del mouse*/
  height: 20px;
}
 


Salvate e otterrete la vostra barra funzionante.
Qui sotto vedete un esempio di come apparirà:
Barra superiore per Blogger


Fonte: Miss Lavanda  

Nessun commento :

Posta un commento

Related Posts Plugin for WordPress, Blogger...