Pubblicato il 18/08/14e aggiornato il

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

widget-pagine

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 

widget-pagine-statiche

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

ordinare-elenco

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 

menù-pagine-statiche
Ora dobbiamo sostituire a ciascun link testuale una specifica icona con questo risultato
demo-menu-dynamic-views

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

immagine-css-sprite

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://lh5.googleusercontent.com/75ph2YLqfqHMGG50i5uJ-5Zp23mGQc08WCRk6zXqN3V0=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

icone-sulla-destra

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.




5 commenti :

  1. Grazie mille per questo post!! Domani procedo subito!

    RispondiElimina
  2. Articolo interessantissimo, l'ho appena messo in pratica nel mio blog. Ho due dubbi:
    -Per aggiungere le immagini di altre pagine statiche (per esempio io avevo messo tra il menu delle pagine statiche anche youtube) devo fare un nuovo file di immagini comprensivo come quello che hai fatto tu, con le stesse dimensioni, il cui url andrebbe a sostituire quello del tuo? Eventualmente si può fare con Photoshop o c'è bisogno di qualcosa di più specifico?
    -Come si fa a mettere i feed rss nel menu delle pagine statiche come hai fatto tu in questo tutorial?
    Grazie mille di tutto! :)

    RispondiElimina
    Risposte
    1. Puoi usare Photoshop o Gimp. Devi integrare l'immagine di sfondo incollando due icone di Youtube nello stesso stile di quelle già presenti per poi aggiungere altre righe di codice con il suo posizinamento che dovrebbe essere -350px e 0 per l'icona normale e -350px -35px per quella puntata cvon il mouse. In queasto caso l'immagine diventerebbe larga 385 pixerl per 70 di altezza. Sarebgìbero 420 pixel e sempre 70 di altezza se ci aggiungi altre due icone.
      Invece per mettere i feed RSS puoi utilizzare l'URL di feedburner che per questo blog è questo
      http://feeds.feedburner.com/ideepercomputeredinternet/zUQN
      oppure utilizzare l'URL canonico per i feed che è il seguente
      http://nomedelblog.blogspot.com/feeds/posts/default

      @#

      Elimina
    2. Ti ringrazio nuovamente!Provo a fare tutto e ti faccio sapere!!!

      Elimina
  3. Perfetto direi ! In effetti a me servirebbe non per i social ma per un menu' vero e proprio, quindi dovrei raccattare icone specifice..Grazie ancora ;)

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.