Aggiungere un’icona al titolo di un articolo post – blog Blogger

Lo sapevate che potete aggiungere un’icona al titolo del vostro post? Se siete degli appassionati di chicche per blog, leggete questo semplice tutorial.

Step 1 – Loggatevi a Blogger.
Step 2 – Cliccate dal menu DESIGN > MODIFICA HTML
Step 3 – Cercate (CTRL F) questa stringa, digitate solo un pezzo, ad esempio “data” o “post”.
Il codice riportato qui di seguito potrebbe non essere proprio così, varia da template a template. Ma è pressapoco uguale. Questo è il codice del template Semplice di Blogger.

<b:if cond=’data:post.url’> <b:if cond=’data:blog.url != data:post.url’> <a expr:href=’data:post.url’><data:post.title/></a>

Ora bisogna capire dove aggiungere l’ icona, se non sapete come ottenere l’url della vostra immagine, leggete il mio articolo: come avere il direct-link di un’immagine (cliccate sulle parole azzurre per accedere al post).

<b:if cond=’data:post.url’> <b:if cond=’data:blog.url != data:post.url’><img src=URL DELLA VOSTRA IMMAGINE style=’border: 1px dashed gray’/> <a expr:href=’data:post.url’><data:post.title/></a>

Verrà visualizzata l’icona proprio prima del titolo del post con un bordino grigio di 1 pixel. Se non lo volete, basterà togliere il pezzettino Style e sostituirlo con style=”border-width:0px;/>

Se provate a metterla dopo gli altri segmenti di codice <> verrà visualizzata sopra il titolo, a sinistra o a destra.

METODO II

Step 1 – loggatevi a Blogger
Step 2 – Cliccate su DESIGN > MODIFICA HTML
Step 3 – Cercate “POST h3” potrebbe anche essere scritto “h3 post-title” o similari.
Si presenterà pressapoco così:

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;

Voi dovrete aggiungere altri elementi sotto, per inserire l’immagine:

background: url(SCRIVI QUI IL TUO LINK DIRETTO IMMAGINE) no-repeat;

Per definire i margini:
margin:  10px;                  MARGINE
margin-bottom:10px; MARGINE INFERIORE
margin-top:.3.5em; MARGINE SUPERIORE
margin-left: 0px;  MARGINE SINISTRO
Per definire la distanza:
padding: 5 0 0 2  IL PRIMO NUMERO E’ SOPRA, IL 2° E’ A DESTRA, IL 3° SOTTO, IL 4° A SINISTRA.

I margini e il padding che ho scritto sono solo a titolo esemplificativo, dovete fare delle prove per vedere quali sono i valori migliori per avere un buon effetto.

PER AGGIUNGERE UN BORDINO INTORNO:
border-top: 1 px dashed pink;   BORDINO SOPRA di un pixel rosa
border-bottom: 1 px dashed grey;  BORDINO SOTTO di un pixel grigio
border: 1 px dashed grey;  BORDINO IN GENERALE, non mettete gli altri due sopra.

CAMBIARE ICONA PER OGNI POST

C’è un metodo molto semplice per cambiare icona ad ogni titolo dei post, in pratica dovete aprire un nuovo post, e sul titolo aggiungere prima il codice html dell’immagine. Potete procedere in questo modo per ogni post, così da personalizzarli in modo esclusivo. Naturalmente non dovete impostare il precedente metodo per le icone, in modo che non ci sia nessuna immagine.

<img src=”URL VOSTRA IMMAGINE” />

Dopo scrivere il titolo del post…

Ok, ora non vi resta che scrivere questo articolo e non fermarvi al titolo! Eh! Mi raccomando! 😉

A presto,

by BLOGGHIDEE

 

 

Spread the love

Leave a Reply

This blog is kept spam free by WP-SpamFree.