Come creare una regola CSS per mostrare in modo evidente e esteticamente valido i link a dei nostri post che riteniamo possano interessare i lettori.
Una delle regole più importanti per l'ottimizzazione del sito per i motori di ricerca è quella di linkare i post che abbiamo pubblicato in precedenza. Questo va fatto in modo sistematico e porta solo vantaggi. Se ci sono degli aggregatori che ripubblicano i nostri post, che siano autorizzati a farlo o meno, quando nei contenuti ci siano dei collegamenti ad altri articoli si verranno a creare dei backlink automatici dai siti che li ripubblicano. Inoltre il linkare vecchi post serve per mostrare a Google che questi sono ancora vitali. Infine non bisogna dimenticare che questi collegamenti possono portare i visitatori ad aprirli non fosse altro che per mera curiosità.
Si può creare una regola CSS per rendere questi collegamenti anche visivamente più attrattivi.
I colori possono essere modificati a piacere così come gli altri parametri. Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sulla freccetta nera posta a sinistra della sezione <b:skin> intorno alla 13-esima riga. Si cerca la fine della sezione digitando Ctrl+F e cercando la riga ]]></b:skin>. Subito sopra a questa si incolla questo codice
/* Post in evidenza */
.evidenza{
width:90%;
display:inline-block;
background:#159586; /* Colore dello sfondo del rettangolo */
font-size:14px;
font-weight:bold;
border:2px solid #c50707; /* Stile bordo del rettangolo */
margin:10px;
padding:20px;
overflow:hidden;
color:#fff; /* colore del testo */
}
.evidenza a{
color:#fff; /*colore de link*/
}
.evidenza a:hover{
color:#fdbdbd; /* colore del link puntato */
text-decoration:none;
}
.evidenza{
width:90%;
display:inline-block;
background:#159586; /* Colore dello sfondo del rettangolo */
font-size:14px;
font-weight:bold;
border:2px solid #c50707; /* Stile bordo del rettangolo */
margin:10px;
padding:20px;
overflow:hidden;
color:#fff; /* colore del testo */
}
.evidenza a{
color:#fff; /*colore de link*/
}
.evidenza a:hover{
color:#fdbdbd; /* colore del link puntato */
text-decoration:none;
}
Si salva il modello. Quando si vuole mostrare ai lettori un post in evidenza che sia in relazione con quello che stiamo scrivendo oppure che riteniamo possa interessare ai lettori si deve incollare nel post in Modalità HTML un codice con questa struttura sintattica
<div class='evidenza'>
Post da non perdere: <a href="URL_POST_LINKATO">Titolo del post</a></div>
Post da non perdere: <a href="URL_POST_LINKATO">Titolo del post</a></div>
Il codice va inserito nel punto in cui si voglia visualizzare il rettangolo con il link
Il risultato sarà simile a questo
Mostrare link ai post di questo tipo non esclude il widget degli Articoli Simili che svolge un altro compito. Mettere in evidenza dei link al nostro blog sicuramente porterà a un aumento dei click rispetto a dei collegamenti anonimi inseriti all'interno del testo.
Concludo ricordando che oltre ai codici dei colori si può personalizzare anche lo stile del bordo
Da non perdere: HTML e CSS per personalizzare lo stile dei bordi
Implementazione utile e fighissima; GRAZIE
RispondiEliminaImplementazione utile e fighissima; GRAZIE
RispondiElimina