venerdì 18 dicembre 2015

Tutorial Blogger: come personalizzare i link delle etichette.

In un post precedente vi ho dimostrato come cambiare lo stile delle etichette, cambiando la disposizione delle stesse da verticale ad orizzontale.
Oggi vorrei indicarvi come cambiare il simbolo con cui vengono visualizzate le etichette ( di default appare un pallino nero).
Esempi:



Per fare ciò si possono usare i codici Unicode...questi qui sotto per capirci!


Esempio codici Unicode

Questi codici hanno il vantaggio di avere le stesse proprietà dei caratteri o fonts, per cui potete cambiare colore e dimensione. Inoltre, al contrario delle immagini, sono più veloci da caricare e non perdono qualità quando vengono ridimensionati, per chi fosse molto attento anche a questi dettagli!

Il processo è molto semplice.... oserei dire a prova di scimmia!!
Innanzi tutto dobbiamo accertarci che sparisca il pallino nero di cui vi parlavo sopra, copiando ed incollando il codice seguente prima di ]]></b:skin>.
Per farlo andate su Modello > Modifica HTML:


Posizionate ora il mouse sulla finestra del codice che vi sarà apparsa, digitate Ctrl + F dalla tastiera ed in alto a destra vi apparirà una finestrella di ricerca in cui dovete inserire questo:  ]]></b:skin> .

Quindi, subito sopra, incollate il seguente codice, in cui sono presenti alcuni stili che potranno esservi utili:

#Label1 ul li{
    list-style-type: none; /*per eliminare il pallino nero di default*/
    }
#Label1 li a {
    color: #000; /*colore del carattere*/
    font-size: 14px; /*dimensione del carattere*/

    font-weight: normal /*lo spessore (grassetto scrivete bold)*/
    text-decoration: none; /*evita la sottolineatura del testo*/
    }
#Label li a:hover { /*effetto al passaggio del mouse*/
    margin: 0; /* se preferisci spostarlo verso destra scrivi 4px o altro valore */
    color: #00a3df; /*qui se ti va cambi colore al carattere*/
    font-weight: normal; /*per il grassetto scrivi bold*/}


Ancora con l'aiuto di Ctrl + F cerchiamo questa riga di codice:

<data:label.name/>

quindi cliccate Invio. Vi appariranno due, o forse anche più, righe uguali, ma a voi serve solo la seconda. L'immagine ve lo spiega meglio.



 Ora che avete trovato la riga che ci interessa incollate, subito prima, il codice seguente:

 <span style='color: #f4006c; font-size:15px; padding-right:5px;'>&#9829;</span>

... ora la riga apparirà così:

Adesso non vi resta che personalizzarlo, vi spiego come:
color:#f4006c; è il colore del carattere
font-size: 15px: è la dimensione del carattere
&#9829; è il codice Unicode che rappresenta il simbolo che apparirà, in questo caso un cuore.
Ovvio che dovrete scegliere quello di vostro gradimento e nel sito Copypastecharacter ne troverete moltissimi. Altri li troverete nella pagina di JMiur.

Dopo aver personalizzato il codice cliccate su Anteprima Modello, controllate i risultati e se vi soddisfano salvate il lavoro!

Ho cercato di essere il più chiara ed esaustiva possibile, ma se avete dei dubbi scrivetemi e tenterò di risolverli.
A presto
Irene

Fonte: Compartidìsimo

Nessun commento :

Posta un commento

Related Posts Plugin for WordPress, Blogger...