Pubblicato il 10/08/15 - aggiornato il  | 10 commenti :

Come aggiungere 1, 2 o 3 widget allineati sopra e/o sotto l'Header di Blogger.

Come aggiungere e allineare due o tre widget sopra o sotto l'Header di Blogger.
Continuo nell'aggiornamento di vecchi tutorial per Blogger alla luce delle novità introdotte nel codice del suo Editor del Template. Dopo aver visto come aggiungere due o tre colonne sopra e/o sotto l'area del post e aver visto come dividere in due o tre parti l'Intestazione di Blogger adesso è la volta di una guida su come aggiungere uno, due, tre o più widget allineati sopra o sotto l'Header.

Il caso di un solo widget è molto semplice visto che basta sbloccare l'elemento Header per poi aggiungere un gadget da Layout. Per due o tre widget allineati la cosa è un po' più complessa e dovremo mettere mano al codice. In sostanza dovremo passare da una situazione come questa

header-blogger

a un Layout con questo aspetto

header-blogger-widget

con due widget subito sopra e due widget subito sotto all'Header.

COME CERCARE L'HEADER NEL CODICE DEL TEMPLATE


Dopo aver salvato il template si va su Modello > Modifica HTML e con Ctrl+F si cerca Intestazione che ci mostrerà il blocco di codice dell'Header (se si è scelto l'italiano in Blogger)

codice-header-template

Per sbloccare l'Intestazione in modo da poter aggiungere un altro widget sopra o sotto l'Header si modifica la stringa  maxwidgets='1' showaddelement='no' in questo modo maxwidgets='' showaddelement='yes' quindi si salva il template. Questo può essere utile per esempio per inserire un banner pubblicitario sopra all'Header o per inserirvi un menù personalizzato.

header-con-widget

Su Layout si visualizzerà infatti Aggiungi un gadget per inserire altri widget.

COME AGGIIUNGERE DUE WIDGET SOPRA E/O SOTTO L'HEADER


Si clicca sulla sinistra della riga che inizia con <b:section per visualizzare la freccetta nera

sezione-header

Subito sopra a questa riga si incolla il codice

<div id='Header1A' style='width: 46%; float: left; margin:0; padding: 4px;'>
<b:section class='header' id='Header1A' preferred='yes' style='float:left;'/>
</div>
<div id='Header1B' style='width: 46%; float: right; margin:0; padding: 4px;'>
<b:section class='sidebar' id='Header1B' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

mentre subito sotto alla stessa si incolla quest'altro codice

<div id='Header2A' style='width: 46%; float: left; margin:0; padding: 4px;'>
<b:section class='header' id='Header2A' preferred='yes' style='float:left;'/>
</div>
<div id='Header2B' style='width: 46%; float: right; margin:0; padding: 4px;'>
<b:section class='header' id='Header2B' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/> 

Si salva il modello. Naturalmente ci si può limitare a incollare solo uno dei due codici e si possono modificare le larghezze dei widget previste identiche al 46% nei codici proposti. Si può anche diminuire o aumentare lo spazio tra i widget proposto di 4 pixel.

I widget aggiunti possono essere di vario genere. Nel mio test ho visto che conviene cliccare su Aggiungi un gadget nella sidebar per poi spostarlo con il mouse nella posizione prescelta perché su Blogger non essendo prevista in modo nativo la possibilità di inserire nuovi widget nell'Header ci sono difficoltà quando si clicca su Aggiungi un gadget su questi nuovi elementi anche se i widget poi vengono aggiunti comunque.  Ecco un esempio graficamente un po' scarso ma istruttivo di quattro widget aggiunti sopra a sotto l'Intestazione 

widget-sopra-sotto-header


COME AGGIUNGERE TRE WIDGET ALLINEATI SOPRA O SOTTO L'HEADER


Modificando leggermente il codice si può optare anche per l'aggiunta di 3 widget sopra o sotto l'Intestazione. Mi limito a mostrare il codice necessario per la parte sopra all'Header

<div id='Header1A' style='width: 31%; float: left; margin:0; padding: 4px;'>
<b:section class='header' id='Header1A' preferred='yes' style='float:left;'/>
</div>
<div id='Header1B' style='width: 31%; float: left; margin:0; padding: 4px;'>
<b:section class='header' id='Header1B' preferred='yes' style='float:left;'/>
</div>
<div id='Header1C' style='width: 31%; float: right; margin:0; padding: 4px;'>
<b:section class='header' id='Header1C' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Dopo aver salvato il modello il Layout del blog assumerà un aspetto come questo

layout-blogger


Dopo l'aggiunta dei widget la parte alta del blog muterà in questo modo


3-widget-sopra-header

con tre widget allineati sopra all'header.


10 commenti :

  1. Ciao, ci siamo sentiti tramite facebook :) Ho un sito in costruzione tramite wordpress e ti chiedo se conosci la procedura esatta per inserire i widget sotto l'header. Ho già fatto alcuni tentativi tramite svariate stringhe di codice trovate in giro per il web ma il risultato non mi soddisfa pienamente. Potresti aiutarmi? Grazie anticipatamente.

    RispondiElimina
  2. Uso WordPress ma non sono un esperto quindi non ti posso aiutare. Dovresti rivolgerti al forum di WordPress in italiano
    @#

    RispondiElimina
  3. Buonasera Ernesto, sono riuscita a sbloccare l'intestazione e ad aggiungere il widget sopra l'header, ma non ho capito come inserire un unico widget sotto l'header. Grazie, Paola

    RispondiElimina
    Risposte
    1. Al posto del codice proposto puoi provare a aggiungere sotto alla sezione dell'Header questo codice

      <div id='Header2' style='width: 92%; float: left; margin:0; padding: 4px;'>
      <b:section class='header' id='Header2' preferred='yes' style='float:left;'/>
      </div>
      <div style='clear:both;'/>

      dove al posto di 92% puoi provare a mettere 90%, 100% oppure addirittura togliere la stringa 'width: 92%;.
      @#

      Elimina
  4. Ciao Ernesto, ma se aggiungo questi widget saranno visibili anche nella versione mobile? Perché ho provato a inserire quelli normali del layout ma anche inserendo mobile = yes non diventano visibili

    RispondiElimina
    Risposte
    1. Il codice della versione mobile è molto diverso da quello della versione desktop poi una divisione dell'header nella versione mobile porta a una mancanza di spazio
      @#

      Elimina
  5. Capisco. Ma mi sai dire perché utilizzando mobile = yes i widget non diventano più visibili nella versione mobile

    RispondiElimina
    Risposte
    1. Mi sono occupato di questo tema in questo post
      https://www.ideepercomputeredinternet.com/2013/12/blogger-widget-versione-tablet-smartphone.html
      che forse può aiutarti. Bisogna abilitare il Tema Personalizzato
      @#

      Elimina
  6. Il mio tema è messo già personalizzato, ma non vengono mostrati i widget nella versione mobile nonostante li ho modificati con mobile yes

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy