Come inserire widget suddivisi in schede su Blogger


La sidebar che può trovarsi a destra, a sinistra o in entrambi i lati va usata per mettere in risalto le sezioni del sito, qualche widget che possa mostrare i post più popolari, gli ultimi commenti, le informazioni del blog e tanto altro ancora.

Si ricorda che per velocizzare il blog occorre limitare il numero di widget installati e per rendere la grafica più leggera e gestire nel migliore dei modi lo spazio a disposizione è possibile utilizzare le colonne multitab, già usate in molti celebri quotidiani online, che non fanno altro che mostrare i contenuti suddivisi in più schede.

Questo nuovo sistema di riordinamento della sidebar funziona perfettamente su Blogger ma anche in tutte le altre piattaforme (compreso Wordpress) dove è presente uno spazio HTML. Può essere utilizzato anche dentro i post per incorporare più di un video occupando poco spazio oppure per mostrare alcune immagini in sequenza ma l'uso più comunque è quello di implementarlo nella sidebar per renderle più corte e pulite.

Se siete interessati ad widget, video o immagini suddivisi in diverse schede per recuperare spazio il codice da utilizzare è il seguente:

<style>
::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}
::-webkit-scrollbar{width: 6px; background-color: #F5F5F5;}
::-webkit-scrollbar-thumb{background-color: #008E00;}
#contenuto ul{display:inline; list-style-type:none;}
#contenuto ul > li{background:#33FF00;cursor:pointer;background:-moz-linear-gradient(90deg, #33FF00 0%, #008E00 100%);background:-webkit-linear-gradient(90deg, #33FF00 0%, #008E00 100%);background:-o-linear-gradient(90deg, #33FF00 0%, #008E00 100%);background:-ms-linear-gradient(90deg, #33FF00 0%, #008E00 100%);background:linear-gradient(180deg, #33FF00 0%, #008E00 100%); padding:7px; float:left; margin-right:5px; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px;}
#contenuto ul > li a{color:#fff; text-decoration:none; font-weight:bold;}
#contenuto ul > li a:hover{color:#CCFE80}
#tabcontent{width:350px; height:350px; padding:5px; background-color:#eee; margin-top:15px; -webkit-box-shadow:3px 3px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow:3px 3px 5px rgba(50, 50, 50, 0.75); box-shadow:3px 3px 5px rgba(50, 50, 50, 0.75); -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; border-bottom-right-radius:5px; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; border-bottom-left-radius:5px;}
#tab1{height:400px; overflow-x:hidden;}
#tab2, #tab3, #tab4, {height:400px; overflow-x:hidden; display:none;}
</style>
<!--[if IE]>
<style type="text/css">
#contenuto ul li a{background-color:#33FF00; color:#fff; display:inline; padding:5px; margin-left:5px; float:left; text-decoration:none; font-weight:bold; font-family:Georgia;}
</style>
<![endif]-->
<script>
//<![CDATA[
function contenuto(tabid) {for (i=1; i<5; i++){if (i == tabid) {var j = "tab" + i ;document.getElementById(j).style.display='block';}else {var k = "tab" + i ;document.getElementById(k).style.display='none';}}}
//]]>
</script>
<div id='contenuto'>
<ul>
<li><a onclick='contenuto(1)'>Scheda1</a></li>
<li><a onclick='contenuto(2)'>Scheda2</a></li>
<li><a onclick='contenuto(3)'>Scheda3</a></li>
<li><a onclick='contenuto(4)'>Scheda4</a></li>
</ul>
<div id='tabcontent'>
<div id='tab1'>Contenuto 1 scheda</div>
<div id='tab2'>Contenuto 2 scheda</div>
<div id='tab3'>Contenuto 3 scheda</div>
<div id='tab4'>Contenuto 4 scheda</div> 
</div>
</div>

E' possibile personalizzare i colori esadecimali per adattare le schede alla grafica del proprio blog.
Per esempio potete cambiare il colore delle schede, dello sfondo interno, degli arrotondamenti, del gradiente, della trasparenza e dell'ombreggiatura.

L'altezza e la larghezza sono impostate a 350px che potete diminuire se siete in possesso di una sidebar stretta o allargare se dovete implementarlo all'interno di un articolo.

Attualmente il codice vi permetterà di aggiungere 4 schede ma è possibile sceglierne il numero desiderato (senza esagerare). Se volete aggiungere una nuova scheda dovrete modificare i<5 in i<6 . Poi eventualmente dovete aggiungere una riga per il titolo della scheda 5 e un altra riga per il contenuto della scheda 5.
Sarà necessario aggiungere #tab5 dopo #tab4 inserendo anche una virgola separatoria prima di esso (non dopo).



Nessun commento :

Scrivi un commento

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".