Avere un blog molto ampio non è sempre vantaggioso soprattutto nell'aspetto grafico perché dall'esigenza di mostrare in maniera ordinata tutte le sezioni principali e quindi più aggiornate va a finire che nemmeno il menù con le sottosezioni basti. Aggiungere molte sottosezioni non sembra la soluzione più giusta e se avete spazio nella sidebar potete sfruttarlo per un inserire lì un menu con sezioni espandibili. Essendo caratterizzato da colori vivaci e da scritte più vive rispetto al testo del post può aiutare ad aumentare il numero delle visualizzazione se utilizzato al meglio.
Ecco l'anteprima del menù espandibile:
Il seguente menù è stato realizzato dal sito Dynamic Drive e localizzato dal blog IPCEI pertanto le diciture iniziali riferite al copyright non potete cancellarle in quanto i Termini di utilizzo non lo permettono, ma tanto non si vedono quindi non è affatto un problema da risolvere. Il menu espandibile genera delle sezioni principali che se cliccate, una per volta, mostrano le loro sezioni interne. Ad esempio nell'anteprima dell'immagine si può vedere che cliccando sulla sezione Internet sono apparse le sottosezioni: migliori siti, Servizi Online, Creare Sito ecc. Se subito dopo clicco su Utility si chiuderà la sottosezione Internet e si aprirà quella appena cliccata.
Questo codice così com'è funziona per la maggior parte dei blog ma se avete un dominio personalizzato e quindi senza la scritta blogspot dovete caricare il file evidenziato in rosso dopo la scritta <script src= in un altra parte come ad esempio Google Drive.
Dovete andare ad incollare su Modello > Modifica HTML il codice sotto stante prima della riga </head> e poi salvare il modello.
Il codice sopra è quello in cui potete eseguire le personalizzazioni.
Quello che avete fatto sino ad ora non è il menù vero è proprio la solo la parte grafica (CSS), quello che dovete fare adesso è creare la struttura vera e propria. Non sarà semplice realizzarla ma farò il possibile per farvela capire partendo da questo codice di esempio che è sempre quello usato per l'anteprima:
Per distinguere meglio le sezioni principali sono state evidenziate in rosso. Dovete sostituire il nome delle voci e i link con quelli del vostro blog. In ogni link è presente l'attributo target="_blank" che farà aprirà una nuova scheda, ma dato che il menù memorizza l'ultima sezione cliccata anche dopo l'aggiornamento della pagina potete toglierlo per evitare l'apertura di ulteriori schede inutilmente. E mi raccomando: se utilizzate questo menù per inserire i link di blog affiliati o partners inserite sempre il Rel="nofollow".
Anche se è scontato dirlo è possibile aggiungere ulteriori sezioni:
<h3 class="menuheader expandable">Nuova Sezione</h3>
<ul class="categoryitems">
Ed aggiungere ulteriori sottosezioni:
<li><a href="LINK">Nuova Sottosezione</a></li>
Non dimenticate però che alla fine di ogni elenco di sottosezioni dovete aggiungere </ul>.
Ecco l'anteprima del menù espandibile:
Il seguente menù è stato realizzato dal sito Dynamic Drive e localizzato dal blog IPCEI pertanto le diciture iniziali riferite al copyright non potete cancellarle in quanto i Termini di utilizzo non lo permettono, ma tanto non si vedono quindi non è affatto un problema da risolvere. Il menu espandibile genera delle sezioni principali che se cliccate, una per volta, mostrano le loro sezioni interne. Ad esempio nell'anteprima dell'immagine si può vedere che cliccando sulla sezione Internet sono apparse le sottosezioni: migliori siti, Servizi Online, Creare Sito ecc. Se subito dopo clicco su Utility si chiuderà la sottosezione Internet e si aprirà quella appena cliccata.
Questo codice così com'è funziona per la maggior parte dei blog ma se avete un dominio personalizzato e quindi senza la scritta blogspot dovete caricare il file evidenziato in rosso dopo la scritta <script src= in un altra parte come ad esempio Google Drive.
Dovete andare ad incollare su Modello > Modifica HTML il codice sotto stante prima della riga </head> e poi salvare il modello.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/script-menu/ddaccordion.js' type='text/javascript'>
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Localized in italian by Parsifal32 - www.ideepercomputeredinternet.com
***********************************************/
</script>
<script type='text/javascript'>
ddaccordion.init({
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<noscript><a href='http://www.ideepercomputeredinternet.com' target='_blank'><span style='font-size: x-small;'>Ad Menu</span></a></noscript>
<style type='text/css'>
.arrowlistmenu{
width: 300px; /*width of accordion menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background:#940F04 url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #940F04;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #800080;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #800080;
background-color: #FDBCB7;
}
</style>
Il codice sopra è quello in cui potete eseguire le personalizzazioni.
- width: 300px = determina la larghezza (nell'anteprima è messo a 100 px).
- font: bold 14px Arial; = determina le dimensioni del testo.
- background:#940F04 = determina il colore del menù.
- color: #800080; = si riferisce al colore del link visitato (alcuni preferiscono averlo invariato).
- background-color: #FDBCB7; = passando il mouse sul menù avrà questo colore.
Quello che avete fatto sino ad ora non è il menù vero è proprio la solo la parte grafica (CSS), quello che dovete fare adesso è creare la struttura vera e propria. Non sarà semplice realizzarla ma farò il possibile per farvela capire partendo da questo codice di esempio che è sempre quello usato per l'anteprima:
<div class="arrowlistmenu">
<h3 class="menuheader expandable">Svago</h3>
<ul class="categoryitems">
<li><a href="http://www.scuolissima.com/2012/06/come-vedere-la-tv-in-streaming-su-internet-gratis-online.html">TV</a></li>
<li><a href="http://www.scuolissima.com/2013/08/ascoltare-la-radio-online.html" target="_blank">Radio</a></li>
<li><a href="http://www.scuolissima.com/2012/10/oroscopo-quotidiano-dei-12-segni-zodiacali.html" target="_blank">Oroscopo</a></li>
<li><a href="http://www.scuolissima.com/2013/05/che-tempo-fa-oggi-e-che-tempo-fara-domani.html" target="_blank">Meteo</a></li>
<li><a href="http://www.giocare-online-gratis.it/" target="_blank" rel="nofollow">Giochi</a></li></ul>
<h3 class="menuheader expandable">Internet</h3>
<ul class="categoryitems">
<li><a href="http://www.scuolissima.com/search/label/siti">Migliori Siti</a>
<li><a href="http://www.scuolissima.com/search/label/online">Servizi Online</a></li>
<li><a href="http://www.scuolissima.com/2013/09/come-creare-un-sito-web-gratis.html" target="_blank">Creare Sito</a></li>
<li><a href="http://www.scuolissima.com/search/label/blogger" target="_blank">Blogger</a></li>
<li><a href="http://www.scuolissima.com/search/label/wordpress" target="_blank">Wordpress</a></li>
<li><a href="http://www.scuolissima.com/search/label/Facebook" target="_blank">Facebook</a></li>
<li><a href="http://www.scuolissima.com/2012/06/come-guadagnare-online.html" target="_blank">Guadagnare Online</a></li>
</ul>
<h3 class="menuheader expandable">Utility</h3>
<ul class="categoryitems">
<li><a href="http://www.scuolissima.com/2013/06/siti-per-inviare-sms-gratis.html">SMS Gratis</a></li>
</ul>
<h3 class="menuheader expandable">Computer</h3>
<ul class="categoryitems">
<li><a href="http://www.scuolissima.com/search/label/Programmi" target="_blank">Software</a></li>
<li><a href="http://www.scuolissima.com/search/label/windows%208" target="_blank">Windows 8</a></li>
</ul>
</div>
Per distinguere meglio le sezioni principali sono state evidenziate in rosso. Dovete sostituire il nome delle voci e i link con quelli del vostro blog. In ogni link è presente l'attributo target="_blank" che farà aprirà una nuova scheda, ma dato che il menù memorizza l'ultima sezione cliccata anche dopo l'aggiornamento della pagina potete toglierlo per evitare l'apertura di ulteriori schede inutilmente. E mi raccomando: se utilizzate questo menù per inserire i link di blog affiliati o partners inserite sempre il Rel="nofollow".
Anche se è scontato dirlo è possibile aggiungere ulteriori sezioni:
<h3 class="menuheader expandable">Nuova Sezione</h3>
<ul class="categoryitems">
Ed aggiungere ulteriori sottosezioni:
<li><a href="LINK">Nuova Sottosezione</a></li>
Non dimenticate però che alla fine di ogni elenco di sottosezioni dovete aggiungere </ul>.
Menù semplificato
Se invece prendete dalla prima parte di codice solamente il css (ovvero il codice che inizia con <style type='text/css'> e finisce </style> inclusi queste stessi) e lo andrete ad installare nel Modello prima del tag </head> e poi utilizzate la seconda parte di codice così come già spiegato, il menù funzionerà ugualmente senza l'effetto apri/chiudi delle sezioni. A mio parere è una soluzione interessante anche questa, sia per la sidebar sia per una pagina dove vengono illustrate tutte le sezioni del blog.
