Pubblicato il 15/08/13e aggiornato il

Come personalizzare le icone dei widget nei blog di Blogger a Visualizzazione Dinamica.

Personalizzare le icone dei widget dei blog a Visualizzazione Dinamica su Blogger.
Continuo sulla falsariga degli ultimi due post in cui ho illustrato due widget specifici per i siti su piattaforma Blogger con i template Dynamic Views. Il widget per la sottoscrizione del Canale su Youtube e quello del Like Box di Facebook vengono installati entrambi andando su Layout > Aggiungi un gadget > Testo. Come è noto i widget aggiunti ai blog a Visualizzazione Dinamica vengono visualizzati in una sidebar a scorrimento situata nella parte destra del layout. Ciascun gadget è rappresentato da una specifica icona. Se per esempio avessimo installato i due widget con Testo, questi saranno visualizzati nello stesso modo prima che siano aperti con il cursore.

L'obiettivo di questo post sarà quello di passare dalla visualizzazione anonima dello screenshot di sinistra a una più personalizzabile con icone diverse per ciascun widget dello screenshot di destra

icone-personalizzate
Naturalmente ciascuna icona può essere scelta a piacimento in funzione del tipo di widget che rappresenta. Basterà caricare le immagini su Picasa e ottenerne il link diretto. Questa modifica verrà fatta usando il linguaggio CSS, segnatamente il CSS3, e quindi funzionerà solo con i browser supportano questa tecnologia. I fogli di stile di ciascuna icona sono funzione della posizione che ha nella sidebar scorrevole. Si va su Modello > Personalizza > Avanzato > Aggiungi CSS e sulla destra si incolla

.ss, #gadget-dock>div:nth-of-type(1) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(3) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(4) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(5) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(6) .gadget-icons img{
display: none !important;
}
#gadget-dock>div:nth-of-type(1) .gadget-icons{
background: url(https://lh5.googleusercontent.com/-g0SUifbdVoE/Uguc9pRnqoI/AAAAAAAAjAE/NsUTzHwwakw/s50/facebook-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(2) .gadget-icons{
background: url(https://lh5.googleusercontent.com/-HdBJgW2i_pg/UgudHoAzUII/AAAAAAAAjAk/oyd5-ILscgg/s50/youtube-icon.jpg) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(3) .gadget-icons{
background: url(https://lh3.googleusercontent.com/-c8d39E3_OR4/UgudCNrfTuI/AAAAAAAAjAU/oJEY9ZNVXY8/s50/statistic-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(4) .gadget-icons{
background: url(https://lh4.googleusercontent.com/-JvhvZbsvV-A/UgudFIKsgCI/AAAAAAAAjAc/jFmZn3f-XzQ/s50/translate-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(5) .gadget-icons{
background: url(https://lh5.googleusercontent.com/-WMOMM87e24I/Uguc_kbDxnI/AAAAAAAAjAM/QTOif_DQDZo/s50/google-plus-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(6) .gadget-icons{
background: url(https://lh4.googleusercontent.com/-6O_twcysUBw/Uguc7mpywPI/AAAAAAAAi_8/5ojSVSONBDs/s50/1-icon.png) no-repeat center !important;
}

Si posiziona il cursore dopo l'ultima parentesi graffa e si clicca su Invio. Successivamente si va su Applica al blog per rendere effettive le modifiche. Il codice proposto serve per modificare le prime 6 icone della sidebar e ciascuna immagine il cui URL venga incollato al posto di quelli colorati di rosso deve essere quadrata. La dimensione di 50 pixel di lato può essere ottenuta modificando l'indirizzo e inserendo s50 al posto di un altro possibile valore.


Prendiamo adesso in considerazione la possibilità che si voglia lasciare delle icone di default di Blogger e che se ne voglia modificare solo qualcuna. Come detto i fogli di stile sono numerati a seconda della posizione. Nella demo che ho messo online sono state modificate le prime 6 icone, sono state lasciate invariate la settima e l'ottava mentre è stata modificata la nona. Il codice utilizzato è il seguente

.ss, #gadget-dock>div:nth-of-type(1) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(3) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(4) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(5) .gadget-icons img,
.ss, #gadget-dock>div:nth-of-type(6) .gadget-icons img,.ss, #gadget-dock>div:nth-of-type(9) .gadget-icons img{
display: none !important;
}
#gadget-dock>div:nth-of-type(1) .gadget-icons{
background: url(https://lh5.googleusercontent.com/-g0SUifbdVoE/Uguc9pRnqoI/AAAAAAAAjAE/NsUTzHwwakw/s50/facebook-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(2) .gadget-icons{
background: url(https://lh5.googleusercontent.com/-HdBJgW2i_pg/UgudHoAzUII/AAAAAAAAjAk/oyd5-ILscgg/s50/youtube-icon.jpg) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(3) .gadget-icons{
background: url(https://lh3.googleusercontent.com/-c8d39E3_OR4/UgudCNrfTuI/AAAAAAAAjAU/oJEY9ZNVXY8/s50/statistic-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(4) .gadget-icons{
background: url(https://lh4.googleusercontent.com/-JvhvZbsvV-A/UgudFIKsgCI/AAAAAAAAjAc/jFmZn3f-XzQ/s50/translate-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(5) .gadget-icons{
background: url(https://lh5.googleusercontent.com/-WMOMM87e24I/Uguc_kbDxnI/AAAAAAAAjAM/QTOif_DQDZo/s50/google-plus-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(6) .gadget-icons{
background: url(https://lh4.googleusercontent.com/-6O_twcysUBw/Uguc7mpywPI/AAAAAAAAi_8/5ojSVSONBDs/s50/1-icon.png) no-repeat center !important;
}
#gadget-dock>div:nth-of-type(9) .gadget-icons{
background: url(https://lh4.googleusercontent.com/-7ospPlXmy9s/UgvMIRkvYmI/AAAAAAAAjA4/W_0dyTm5QQk/s50/rss-icon.png) no-repeat center !important;
}

Per l'icona numero 9 sono state aggiunte le righe evidenziate di giallo. Si possono usare immagini JPG o anche PNG con sfondo trasparente. La parte non occupata dalla icona verrà visualizzata dello stesso colore grigio scuro delle icone di default che quindi diventerà lo sfondo della immagine PNG.
Fonte | Southern Speakers -




14 commenti :

  1. @Paulina
    Ho cancellato il tuo commento perché aveva un link cliccabile. Per la domanda che avevi posto puoi risolvere seguendo le istruzioni di questo post
    http://www.ideepercomputeredinternet.com/2012/03/come-modificare-il-colore-dei-widget.html
    e scegliendo il colore che credi più opportuno
    @#

    RispondiElimina
    Risposte
    1. Ok grazie non inserirò più i link.. Grazie per i consigli, ho provato a cambiare lo sfondo delle icone ma niente da fare rimane grigio scuro. Dovrei trovare delle icone con lo sfondo bianco anziché trasparente così come mi è capitato con quella g+ ;)

      Elimina
  2. Nella demo ho notato un bel menu orizzontale sulla striscia nera. Come inserirlo? Grazie

    RispondiElimina
    Risposte
    1. Leggi questo post
      http://www.ideepercomputeredinternet.com/2014/08/dynamic-views-icone-social-network-pagine-widget.html
      @#

      Elimina
  3. io vorrei cambiare sola la 5. Cosa inserire? Grazie

    RispondiElimina
    Risposte
    1. Prova con questo codice
      .ss, #gadget-dock>div:nth-of-type(5) .gadget-icons img {
      display: none !important;
      }
      #gadget-dock>div:nth-of-type(5) .gadget-icons{
      background: url(URL_ICONA) no-repeat center !important;
      }

      Elimina
  4. seguito alla lettera ma l'icona è il trasparenza, lascia intravedere l'icona originale di blogger...

    RispondiElimina
    Risposte
    1. Scegli delle icone diverse senza canale alpha. Nel test che ho fatto non ho avuto questo problema
      @#

      Elimina
  5. Ciao! Volevo chiederti come mai sotto i post non riesco ad inserire il css della visualizzazione statica che mi permetteva di condividere anche su tumbrl, flick e instagram!
    Hai una soluzione o un codice?

    RispondiElimina
  6. Non ho assolutamente compreso la domanda che probabilmente non si riferisce a questo post ma a un altro che non so individuare
    @#

    RispondiElimina
    Risposte
    1. Ciao Ernesto! Si tratta di una domanda generica!

      Elimina
    2. Ho capito quello che hai scritto in senso letterale ma non ho capito la domanda :)
      Cosa vuol dire visualizzazione statica? CSS per condividere su Tumblr, ecc ???
      @#

      Elimina

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.