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.

Come evidenziare i commenti dell'autore del blog su Blogger.

Ho già avuto modo di illustrare come inserire i commenti dell'autore del blog dentro un rettangolo colorato in modo da distinguerli da quelli degli altri commentatori. Tale personalizzazione però non funziona con tutti i modelli. Vediamo come fare per inserire uno stile particolare per i commenti del proprietario del blog con un metodo che dovrebbe andar bene per tutti i template. Visto che da poco è stata introdotta la Nuova Bacheca di Blogger vedrò di usare proprio le schermate tratte da questa nuova interfaccia per realizzare gli screenshot esplicativi.

Accedete alla Bacheca tramite Blogger in Draft e selezionate il blog che volete personalizzare. Quindi andate su Modello > Esegui backup/ripristino modello e cliccate su Scarica modello completo 

Come creare cerchi o rettangoli con gli angoli arrotondati mediante l'HTML.

L'uscita di Internet Explorer 9 ha reso finalmente un po' più semplice la creazione di codici che possano lavorare nello stesso modo con tutti i browser. Per creare dei bottoni per il blog, se volevamo renderli più professionali e con i bordi arrotondati usando solo l'HTML, dovevamo scordarci che fossero visti correttamente con Internet Explorer. Con l'ultima versione del browser Microsoft adesso le cose sono diventate più semplici e per esempio questo bottone

Visualizzare i commenti dell'autore del blog dentro un rettangolo colorato.

Avevo già presentato questa personalizzazione diverso tempo fa, esattamente il 3 Novembre 2008. Da allora sono cambiate moltissime cose in Blogger, anche nella sezione commenti, dove sono comparsi gli avatar dei commentatori, quindi quel tutorial non funziona più neppure con i vecchi modelli. Ne presento quindi un altro che mostri i commenti dell'autore del blog all'interno di un rettangolo colorato che funzionerà anche con nuovi modelli. L'ho testato sul template Simple e sul vecchio modello Tekka. Ritengo che possa funzionare con tutti i template ufficiali di Blogger creati con il Designer Modelli, con tutti gli altri della passata generazione e anche con molti altri personalizzati scaricati da internet.

Si deve andare su Design > Modifica HTML, salvare il modello completo, espandere i modelli widget e cercare queste righe

Come inserire una serie di banner con link in un rettangolo scorrevole.

Mettiamo il caso che volessimo inserire nel nostro blog un numero di banner superiore alle capacità del layout ecco allora che potremmo utilizzare l’accortezza di confinarli all’interno di un rettangolo simile a una textarea.

Facciamo l’esempio di cinque banner creati con Online Banner Generator simili a questo

e vediamo come sarà possibile inserirli tutti in un rettangolo. Innanzitutto creiamolo con questo codice

<div style="width:500px; height: 150px; border: 1px solid #FFEAE9; overflow:auto;">
inserire i banner
</div>

dove 500 rappresenta la larghezza del rettangolo, 150 l’altezza, 1px la larghezza del bordo, solid il tipo di bordo (può anche essere scelto dotted – punteggiato o dashed – tratteggiato); overflow:auto; significa che il cursore sarà visibile solo se il contenuto eccederà la misura del rettangolo; #FFEAE9 è il colore di sfondo del rettangolo

Per inserire i banner questi vanno caricati su un servizio di hosting tipo Skydrive e ne dobbiamo acquisire l’URL.  In sostanza al posto di inserire i banner mettiamo un codice di questo tipo

<a href="URL_collegamento1"><img style="padding: 5px; " src="URL_immagine1" /></a><br />
<a href="URL_collegamento2"><img style="padding: 5px; " src="URL_immagine2" /></a><br />
<a href="URL_collegamento3"><img style="padding: 5px; " src="URL_immagine3" /></a><br />
<a href="URL_collegamento4"><img style="padding: 5px; " src="URL_immagine4" /></a><br />
<a href="URL_collegamento5"><img style="padding: 5px; " src="URL_immagine5" /></a><br />

dove <br/> rappresenta un salto alla riga successiva. Ecco quindi come si presenta un rettangolo creato con questo sistema

Ovviamente i dati in rosso devono essere personalizzati inserendo l’URL del collegamento a ciascun banner e l’URL del banner su Skydrive. A titolo di esempio posto su Google Sites tutto il codice utilizzato per questo box di banner.

Come inserire i commenti dell'autore del blog in un rettangolo colorato.

Per evidenziare i commenti dell'autore del blog rispetto a quelli dei lettori possiamo inserirli all'interno di un rettangolo magari colorato. Per prima cosa bisogna andare su Layout>Modifica HTML>Scarica modello completo per fare il backup se le cose andassero storte. Occorre trovare la sezione dei commenti nel modello. Vi faccio vedere quella che ho trovato nel mio modello, in altri più o meno non dovrebbe differire di molto; in genere inizia con il tag

<dl id='comments-block'> e finisce con </dl>

Ci sono però dei modelli in cui inizia con <ul>. Ecco il codice che ho trovato nel mio modello

<dl id='comments-block'>       <b:loop values='data:post.comments' var='comment'>          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>            <a expr:name='data:comment.anchorName'/>            <b:if cond='data:comment.authorUrl'>              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>            <b:else/>             <data:comment.author/>            </b:if>            <data:commentPostedByMsg/>          </dt>          <dd class='comment-body'>            <b:if cond='data:comment.isDeleted'>              <span class='deleted-comment'><data:comment.body/></span>            <b:else/>              <p> <data:comment.body/> </p>            </b:if>          </dd>          <dd class='comment-footer'>            <span class='comment-timestamp'>              <a expr:href='data:comment.url' title='comment permalink'>                <data:comment.timestamp/>              </a>              <b:include data='comment' name='commentDeleteIcon'/>            </span>          </dd>        </b:loop>      </dl>

Se non siete sicuri di dove sia questa sezione cercate una delle tre seguenti linee di codice, p.e. con il sistema mostrato in questo articolo relativo a consigli sull'HTML

<b:loop values='data:post.comments' var='comment'> <data:comment.author/> <data:comment.body/>

 Nel codice trovato nel mio blog le tre linee sono colorate di rosso. Per poter modificare i commenti dell'autore sostituitelo totalmente con quest'altro codice

<ul class='commentlist' style='margin: 0; padding: 0;'> <b:loop values='data:post.comments' var='comment'> <b:if cond='data:comment.author == data:post.author'> <li class='author-comments' style='margin: 0 0 10px 0;'> <b:if cond='data:post.dateHeader'> <div class='commentcount'/> </b:if> <cite> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> </cite> <br/> <div style='clear: both;'/> <b:include data='comment' name='commentDeleteIcon'/> <p><data:comment.body/></p> <div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a></div> <div class='clear'/> </li> <b:else/> <li class='general-comments' style='margin: 0 0 10px 0;'> <b:if cond='data:post.dateHeader'> <div class='commentcount'/> </b:if> <cite> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> </cite> <br/> <div style='clear: both;'/> <b:include data='comment' name='commentDeleteIcon'/> <p><data:comment.body/></p> <div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a></div> <div class='clear'/> </li> </b:if> </b:loop> </ul>

 Salvate il modello. Adesso occorre aggiungere lo stile per i commenti dell'autore. Cercate la seguente linea di codice

]]></b:skin>

immediatamente sopra incollate quest'altro codice

.author-comments { background: #EEEEFF; border: 2px solid #19265B; padding: 5px; }

 

La parte del codice colorata di rosso può essere personalizzata

• EEEEFF rappresenta il colore di sottofondo dei commenti, in questo caso un celestino chiaro chiaro ma si può scegliere il colore che si vuole
• 2 sta a indicare il numero dei pixel del bordo, si può mettere anche 1 o 3 se si vuole più sottile o più spesso
• 19265B è il colore del bordo del rettangolo del mio blog che è uguale a quello dell'intestazione, ciascuno naturalmente può mettere il colore che vuole.

Ecco come si presenta l'area dei commenti dopo queste modifiche

Fonte - Blogger Buster