Pubblicato il 15/02/12 - aggiornato il  | 9 commenti :

Come eliminare i rettangoli che si visualizzano quando si impongono dei tag condizionali ai widget.

Un fattore importante del lato SEO di un articolo è rappresentato dal suo titolo che deve essere facilmente comprensibile dai lettori e contenere le necessarie parole chiave a beneficio dei motori di ricerca. Il titolo di questo post è quanto di peggio si possa inventare in tal senso. Credo che la maggior parte di voi non abbia neppure compreso di che argomento voglia trattare e quindi passo a fare un esempio esplicativo visto che con il titolo non sono stato sufficientemente chiaro.

Se si ha necessità di mostrare un widget solo in un post o in una pagina si utilizzano i cosiddetti tag condizionali per imporre al gadget di essere visibile solo in un dato post o in una data tipologia di pagine (statiche, etichette, di archivio). Limitandoci al caso di un widget mostrato solo in un post, per ottenere questa caratteristica si va su Modello > Modifica HTML > Procedi e si cerca il codice del widget digitandone il nome dopo aver cliccato su F3 o Ctrl+F.

Per visualizzare un gadget solo in un post si inseriscono quindi il tag condizionale di apertura

<b:if cond='data:blog.url == "URL_del_POST"'>

subito sotto la riga

<b:includable id='main'>

e il tag condizionale di chiusura  </b:if> subito sopra la riga

</b:includable>

come mostrato in questo screenshot

tag-condizionali-blogger

dove ho evidenziato con colori diversi l'ID del widget (id=' …'), le righe del modello che fanno da riferimento e i due tag condizionali che sono stati inseriti per mostrare il widget solo in una determinata pagina. Se vedete che le virgolette (") si sono trasformate in &quot; non vi preoccupate perché è normale che Blogger converta l'HTML in XHTML. Se d'altra parte si vogliono selezionare tutte le pagine esclusa una dobbiamo usare il tag condizionale seguente

<b:if cond='data:blog.url != "URL_del_POST"'>

dove il primo segno di uguale è stato sostituito dal punto esclamativo. In alcuni modelli, segnatamente nel template Awesome tradotto in italiano con Fantastico, rimane un residuo dei widget che sono stati sottoposti ai tag condizionali

residui-rettangoli-modello

 

sotto forma di rettangoli del colore dello sfondo così come indicato dalle frecce nel precedente screenshot. In linea di massima riusciamo facilmente a capire a quale widget nascosto si riferisca ciascun rettangolo ma se non fosse così possiamo usare l'estensione Firebug di Firefox che ci permette di acquisirne l'ID

firebubug-estensione-firefox

In genere questo ID sarà del tipo HTMLX dove X è un numero naturale. Se abbiamo nascosto un widget ufficiale di Blogger l'ID potrebbe essere diverso per esempio Gadget1 oppure Label1, in ogni caso si può individuare scorrendo il codice del modello oltre che con Firebug. Infatti come, si vede nel primo screenshot, ciascun gadget inizia invariabilmente con il codice

<b:widget id=' WIDGET-ID' locked=' ….

Per semplicità poniamo che si abbia a che fare con un gadget HTML che avrà quindi un ID del tipo HTMLX. In questo caso dobbiamo inserire una condizione per nascondere completamente questo widget in tutte le pagine esclusa quella in cui si deve visualizzare. Andiamo su Modello > Modifica HTML > Procedi e cerchiamo la riga </head>. Subito sopra incolliamo il seguente codice 

<b:if cond='data:blog.url != &quot;URL-DEL-POST&quot;'>
<style>
#HTMLX {display:none;}
</style>
</b:if>

dove al posto di URL-DEL-POST immettiamo l'indirizzo dell'articolo o della pagina statica in cui è visualizzato il widget e al posto di HTMLX l'ID del widget. Non resta che salvare il modello. Se ci sono più widget nascosti incolleremo il codice per ciascuno di essi. Ecco come si presenta adesso il mio blog di test

rettangoli-blogger-modello



9 commenti :

  1. Grazie, nel mio blog ho eseguito la procedura e sembra funzionare in tutte le pagine statiche tranne che per la homepage, non capisco il perchè, ecco il mio blog per capire: http://sezioneaureastudio.blogspot.com/ grazie.

    RispondiElimina
  2. @Annica
    Non saprei. Se funziona nelle altre pagine, la condizione introdotta dovrebbe valere anche per la home page ... Nel mio test come puoi vedere dagli screenshot funziona.

    RispondiElimina
  3. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. @AXD96
      Uno l'ho visto. E' un banner di una votazione su Game... . Hai inserito quel codice forse in Layout > Aggiungi un gadget HTML/Java e ora è rimasto lì. Oppure lo hai messo nel modello. Lo devi cercare e cancellarlo. Usa Firebug Lite come ho fatto io per conoscere il widget da cui derivano i rettangoli
      http://www.ideepercomputeredinternet.com/2012/07/firebug-chrome-blogger-css-html.html

      Elimina
  4. Ciao Ernesto io accuso un problema a livello di browser. Infatti questa proceduta funziona correttamente su Chrome, Firefox, Safari, Opera, ma ovviamente non per Internet Explorer.
    Sai per caso se esiste un modo affinchè tale codice funzioni pure su IE?

    Grazie in anticipo per la risposta..

    RispondiElimina
    Risposte
    1. @# Prova con questo sistema
      http://www.ideepercomputeredinternet.com/2012/10/cross-browser-internet-explorer-ie9-blogger.html

      Elimina
    2. Funziona!!!!! Ti giuro dopo un anno di blogger questa è la soddisfazione più bella, vedere che tutto fili liscio con explorer, Grazie!

      Elimina

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