Tutorial: Come sostituire i titoli widget con delle immagini

domenica 1 dicembre 2013 6 commenti:

Buongiorno readers! Oggi pubblico due tutorial che inizialmente volevo unire in quest'unico post, ma alla fine ho optato per due post separati altrimenti sarebbe uscito una cosa davvero lunghissima! :D -trovate il secondo a questo link- Mi sono stati richiesti da due ragazze tramite il modulo delle richieste. Spero possano risultare utili a tutti voi! :) Inoltre seguendo questo link potete trovare un nuovo rating, anche questo richiesto, riguardante il Signore degli Anelli! Vi informo che, in questo tutorial e nei futuri, inserirò degli asterischi * quando trovate questo simbolo significa che a fine pagina troverete una piccola e utile nota che vi spiegherà meglio la parola/frase legata al simbolo.

Graphic Drops
Rubrica di cadenza casuale che vi aiuterà a gestire al meglio la parte grafica, sia HTML che non, dei vostri blog. Troverete elementi grafici da utilizzare, tutorial specifici e consigli utili. Se volete contattarmi potete farlo tramite il modulo delle richieste che trovate nel menù in alto, sezione Graphic Drops. Risponderò alle vostre domande.

Come sostituire i titoli widget con delle immagini

Inizio subito col dire che in linea generale io utilizzo questo metodo solo con i widget che non possono essere modificati (ad esempio: i lettori fissi, il FollowMail o Google+ Badge) per tutti gli altri uso direttamente il widget HTML/JavaScript disponibile tramite Aggiungi un gadget, inserendo il codice per aggiungere un'immagine e lasciando il titolo in bianco.


ATTENZIONE: Fate sempre un backup del modello prima di modificarlo.



Questo perché rende tutto molto più semplice e veloce! In caso dei widget sopra citati invece è più complicato. Infatti non si può inserire il Lettori Fissi in un HTML/JavaScript poiché viene creato automaticamente, allora come fare? Bisogna andare a modificare il codice sorgente del blog!
- Piccola premessa -
Vi consiglio, quando dovete fare operazioni del genere che richiedono la modifica del codice, di utilizzare il programma Notepad++*. E' totalmente free ed è utilissimo per fare modifiche di questo genere, vi basterà copiare tutto il codice contenuto in Modello > Modifica HTML e incollarlo all'interno di Notepad++, tra poco capirete quanto può essere utile questo programma.
Iniziamo! Per sostituire i titoli con le immagini bisogna cercare nel codice -utilizzando la funzione Search > Find... di Notepad++- direttamente il titolo del widget. Facciamo l'esempio del widget Lettori Fissi, cercando la parola "lettori fissi" vi comparirà una stringa di questo tipo:
<b:widget id="Followers1" locked="false" title="lettori fissi" type="Followers">
Quello che ci interessa è il valore ID, che in questo caso è Followers1 ora non vi resterà che personalizzare quel valore ID incollando il seguente codice sopra la stringa ]]></b:skin>.
#Followers1 h2 {font-size: 0px !important; background: url(LINKIMMAGINE); background-repeat: no-repeat; background-position:center; margin:0; padding:30px 3px 0 30px; height:20px;}
ANALIZZIAMO IL CODICE: Al posto di LINKIMMAGINE dovrete inserire l'immagine che volete appaia al posto della scritta "Lettori Fissi", i valori padding** e height ("imbottitura" e "altezza") possono variare a seconda delle dimensioni della vostra immagine, quindi dovete regolarli in base a quella.


Dovete ripetere la procedura per ogni titolo, creando ogni volta un id con lo stesso nome di quello del widget #NOME h2. Una volta terminato tutto potete selezionare l'intero codice e andarlo a incollare di nuovo in Modello > Modifica HTML cliccando successivamente su Salva Modello. Ora avrete le vostre immagini al posto dei titoli!


- Alcune informazioni utili -
*Notepad++: Potete trovare questo programma totalmente gratuito seguendo questo link.
*padding: La proprietà padding (imbottitura) è una proprietà che si utilizza per definire lo spazio che ci deve essere tra il contenuto e il bordo del contenitore.
***padding:0px 0px 0px 0px - il primo valore in px è riferito alla parte in alto (top) il secondo alla parte destra (right) il terzo alla parte in basso (bottom) e l'ultimo alla parte sinistra (left)


E anche per questo Tutorial è tutto, spero di essermi spiegata al meglio! Per ogni dubbio sono sempre disponibile, scrivetemi senza problemi nei commenti o attraverso il modulo delle richieste. Al prossimo Graphic Drops!

6 commenti:

  1. *-* questo è davvero utilissimo, cercavo da un bel po' come fare! In questi giorni non ho tempo, però appena avrò un intero pomeriggio (se non un giorno intero, per quanto io capisca di queste cose :')) ci provo ^-^

    RispondiElimina
    Risposte
    1. Vedrai che non è tanto complicato! :D all'inizio sembra sempre chissà cosa ma appena ci prendi un po' la mano i codici, invece di sembrare un ammasso di lettere confuse, cominciano ad avere un senso XD

      Elimina
  2. Sei stata gentilissima oggi :*
    Una vera maga dei codici :D

    RispondiElimina
    Risposte
    1. Figurati Ambra, è stato un piacere <3

      Elimina
  3. Leb, sei propria brava e questo è un'altro tutorial che mi serviva. Grazie ;)

    RispondiElimina
    Risposte
    1. Grazie Violet *^* contentissima di esserti stata utile :D

      Elimina