Come mostrare le icone dei social network nei blog a Visualizzazione Dinamica di Blogger.

Come visualizzare le icone dei social network nella barra orizzontale del menù delle Pagine Statiche nei Modelli a Visualizzazione Dinamica di Blogger.

I template di Blogger a Visualizzazione Dinamica o Dynamic Views furono introdotti qualche anno fa da Blogger ma contrariamente a quelle che erano le aspettative non hanno avuto un successo travolgente e ancora adesso i blog che hanno scelto questi modelli rappresentano una minoranza. La ragione principale risiede nella grande difficoltà di personalizzazione che questi comportano.

 

Per esempio non esistono sidebar come negli altri template in cui inserire dei widget immediatamente mostrati ai lettori. Si possono installare i gadget ufficiali di Blogger ma saranno visibili ai navigatori solo passando con il mouse nella parte destra del layout. Un'altra limitazione molto forte è pure l'impossibilità di utilizzare il gadget HTML/Javascript che serve per tutti i widget non ufficiali di Blogger come per esempio la visualizzazione di semplici icone con collegamento ai social network. Non è inoltre possibile mostrare nell'area del post un qualunque gadget con l'unica eccezione del menù delle Pagine Statiche che opzionalmente può essere inserito subito sotto alla intestazione del blog.

Vediamo come sia possibile utilizzare questo widget per mostrare delle icone sociali con effetto hover al passaggio del mouse. Se non lo avessimo installato occorre procedere nel seguente modo.

INSTALLARE E CONFIGURARE IL MENÙ DELLE PAGINE

Si va su Layout > Aggiungi un gadget > Pagine quindi si passa alla configurazione

Come probabilmente saprete è possibile aggiungere dei link esterni al sito oltre a pagine statiche propriamente dette come potrebbero essere quelle Contattami con il modulo di contatto e About con le note biografiche.  Per aggiungere per esempio un collegamento al mio account di Twitter si deve andare su + Aggiungi link esterno e riempire il modulo successivo 

in cui incollare l'indirizzo https://twitter.com/parsifal32. Si va su Salva link per rendere l'inserimento effettivo. Una tale procedura dovrà essere ripetuta per tutti i social di cui vogliamo visualizzare e icone. Le icone potranno essere ordinate andando su Layout > Pagine Modifica

Si scorre fino a Ordina Elenco per modificare l'ordine con il drag & drop del mouse e per eventualmente cancellare dei link. Si va in basso su Salva. Dopo questa operazione il menù delle Pagine Statiche  avrà più o meno questo aspetto 

Ora dobbiamo sostituire a ciascun link testuale una specifica icona con questo risultato

Bisognerà inserire una immagine di sfondo per ciascun social con una transizione quando ci si passi sopra con il mouse. Si utilizza la tecnica del CSS Sprite in modo da avere una sola immagine comprensiva di tutte le varie icone. L'immagine in questione è la seguente

La prima riga contiene tutte le icone allineate nella situazione normale mentre la seconda riga mostra le icone quando sono puntate dal cursore. Si utilizza una proprietà CSS denominata Adjacent Sibling Selector che consiste nella possibilità di selezionare un elemento specifico che viene subito dietro un altro con la stessa gerarchia. Si aggiunge un + al selettore seguito dal tag in oggetto come vedremo in seguito.

Ciascuna icona ha una sua posizione nella immagine Sprite secondo questa tabella

	Posizione icona normale	Posizione icona hover
Home	0                0	0                  -35px
Twitter	-35px         0	-35px           -35px
Facebook	-70px         0	-70px           -35px
Pinterest	-105px       0	-105px          -35px
Instagram	-140px       0	-140px          -35px
Google+	-175px       0	-175px           -35px
Linkedin	-280px      0	-280px           -35px
Feed RSS	-210px      0	-210px           -35px
About me	-245px      0	-245px           -35px
Contattami	-315px      0	-315px           -35px

L'ordine delle icone può anche essere modificato. Per passare dalla posizione di una icona a un'altra utilizzando la proprietà enunciata dobbiamo creare dei CSS specifici. Se per la home che è la prima icona abbiamo uno sfondo con questa regola 

.tabs li{
background:url(...) no-repeat 0 0;
}

per Twitter, che è la seconda avremo

.tabs li+li{
background-position: -35px 0;
}

e per Facebook che è al terzo posto invece il CSS sarà

.tabs li+li+li{
background-position:-70px 0;
}

Questo dovrà essere fatto per tutte le icone e anche per quelle con effetto hover al passaggio del mouse. Il risultato sarà un codice di questo genere

.tabs li{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRaK29LtJutbbkgTznmzVvCYIOghIxfenX0uCsQBzmZHO_eWbt4kLNsQdH_Bj3Y5N8lO0_52BlkS1FKyDrRqOcwlqXWAf3P5AFtJczBXX3-jJ6R3RdFORLhRmYerR4JtvOMJFd5WS82Wv/w350-h70-no/) no-repeat 0 0;
margin:0 !important;
padding:0;
width:35px;
height:35px;
display:block !important;
float:left;
border-right: 1px solid #585858;
-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;
cursor:pointer;
}
.tabs li:first-child{
border-left:1px solid #585858;
}
.tabs ul li a{
display:block;
line-height:80;
}
.tabs span{
line-height:200% !important
}
.tabs li+li{/*Twitter*/
background-position:-35px 0;
}
.tabs li+li+li{/*Facebook*/
background-position:-70px 0;
}
.tabs li+li+li+li{/*Instagram*/
background-position:-140px 0;
}
.tabs li+li+li+li+li{/*Pinterest*/
background-position:-105px 0;
}
.tabs li+li+li+li+li+li{/*Google+*/
background-position:-175px 0;
}
.tabs li+li+li+li+li+li+li{/*Linkedin*/
background-position:-280px 0;
}
.tabs li+li+li+li+li+li+li+li{/*Feed RSS*/
background-position:-210px 0;
}
.tabs li+li+li+li+li+li+li+li+li{/*About*/
background-position:-245px 0;
}
.tabs li+li+li+li+li+li+li+li+li+li{/*Contattami*/
background-position:-315px 0;
}
/*Al passaggio del mouse*/
.tabs li:hover{/*Home*/
background-position:0 -35px;
}
.tabs li+li:hover{/*Twitter*/
background-position:-35px -35px;
}
.tabs li+li+li:hover{/*Facebook*/
background-position:-70px -35px;
}
.tabs li+li+li+li:hover{/*Instagram*/
background-position:-140px -35px;
}
.tabs li+li+li+li+li:hover{/*Pinterest*/
background-position:-105px -35px;
}
.tabs li+li+li+li+li+li:hover{/*Google+*/
background-position:-175px -35px;
}
.tabs li+li+li+li+li+li+li:hover{/*Linkedin*/
background-position:-280px -35px;
}
.tabs li+li+li+li+li+li+li+li:hover{/*Feed RSS*/
background-position:-210px -35px;
}
.tabs li+li+li+li+li+li+li+li+li:hover{/*About*/
background-position:-245px -35px;
}
.tabs li+li+li+li+li+li+li+li+li+li:hover{/*Contattami*/
background-position:-315px -35px;
}

Si va su Modello > Personalizza > Avanzato > Aggiungi CSS e si incolla il codice precedente. Si posiziona il cursore alla fine dell'ultima parentesi graffa e si pigia su Invio quindi si va in alto a destra su Applica al blog per rendere le modifiche effettive.

MODIFICHE OPZIONALI

Si possono anche mostrare le icone sulla parte destra invece che a sinistra in questo modo

Se si sceglie questa opzione però verranno nascoste le due icone di amministrazione visibili solo al proprietario del sito che dovranno essere spostate. Oltre al codice precedente andrà quindi incollato sempre con le stesse modalità anche questo nuovo codice

#header #pages { /* Icone spostate a destra */
float:right;
}
#pages:before { /* Per nascondere il carattere | divisore */
 content:normal!important;
}
#header .admin-controls {
right:420px !important; /* Per spostare sulla destra le icone di amministrazione */
}

Ovviamente si dovrà andare sempre su Applica al blog. Concludo ricordando che questo brillante tutorial l'ho ricavato dal lavoro di Karla Castañeda di Compartidisimo.