Per questa header devo sicuramnete ringraziare IOLE, (trovate il Link anche in BLOG E SITI AMICI) vi invito a visitare il suo blog lo troverete sicuramnete utile, interessante e ben fatto, tornando alla mia header e a IOLE mi è venuta voglia di avere una header proprio come la sua .... nel caso in cui venisse voglia anche a voi vi spiego come fare.
LA HEADER
La prima cosa da dire è che questo tipo di header è molto versatile questo perchè principalmente parliamo di una immagine dove al suo interno tramite il codice html andremo a fissare dei punti quindi cliccando su uno di questi punti otterremo un risultato.
LA GRAFICA
Prorpio per la versatilità di cui sopra potete farla nei modi più bizzarri che vi detta la vostra fantasia io personalmente ho usato PHOTOSHOP per creare i tasti il logo e lo sfondo ma in rete si trovano molti programmi validi come di consueto di seguito posto la mia piccola lista di link
PAINT STAR 2.7 - PDF TO BMP JPG TIFF CONVERTER 2.2 - VIRTUAL DUB 1.9.9 -
MAGIX FOTO DESIGNER 7 - PHOTOMATRIX PRO 3.2.8 - GIMP 2.6.11
L'HTML
Sostanzialmente per creare la vostra header noi lavoreremo sul tag Passiamo alla vera e propria realizzazione della header.
1) - Creiamo la nostra header con un programma di elaborazioni d'immagini un piccolo trucco prima di salvare l'immagine se volete che questa appaia trasparente al 100% rilevate il codice colore dalla header sul vostro blog ed usatela come fondo per la vostra immagine questo perchè Blogger non accetta le immagini con i fondi trasparenti, ricordatevi inoltre di impostare la risoluzione a 72dpi per il vostro blog bastano ed avanzano in questo modo le pagine risulteranno molto più gestibili una volta decisi quali sono i punti dell'immagine che dovranno funzionare come comadi andremo a copiare questa porzione di codice html.
2) - Il passo successivo è l'individuazione del codice da sostituira all'interno del codice html del tempalte del nostro blog per prima cosa fatevi una copia di back up del blog (Bacheca > Design > Modifica HTML > Scarica modello completo) una volta fatto questo ci posizioneremo con il mouse nella barra degli strumenti del vostro browser clicchiamo su (Modifica>Trova) in alternativa (CTRL+F per firefox e IE) nella barra che si aprirà ai piedi del browser andremo a digitare <header> questo ci farà individuare in brevissimo tempo quello che realmente ci interessa ora, il passaggio diviene delicato perchè scorrendo molto lentamente con il mouse verso il basso dovremmo partendo da <header> e selezionando contemporaneamente arrivare al tag di chiusura </header> in parole povere dovremmo cercare questa porzione di codice
una volta fatto questo cancelliamo tutto lasciando solo <header> e il tag di chiusura </header> questo perchè sarete facilitati nel ritrovare i punti che ci interessano incolleremo qui il codice che ho postato al punto 1) - fatto questo avrete la vostra header personalizzata ora però dobbiamo definire quelli che sono i canoni di funzionamento dei pulsanti della header
LA HEADER DA VICINO
In questa porzione di codice
Le parti modificabili sono 'border=0' al variare del numero vedrete aumentare lo spessore del bordo della vostra header basta lasciare l'informazione a zero per avere l'immagine al vivo mentre height='160' è l'altezza dell'immagine invece margin-left: -10px; margin-right:-10px; margin-top:10px servono a centrare l'immagine nella header width='900' è la lunghezza dell'immagine.
Passiamo ora alla parte più interessante della nostra header la personalizzazione dei nostri tasti
Questo è il codice che personalizza il tasto TORNA ALLA HOMEPAGE la prima cosa da dire è che il comando area coords è il comando che appunto da le coordinate del tasto all'interno della vostra immagine globale ma come si rilevano queste coordinate è più facile a dirsi che a farsi per facilitarmi il compito prenderò in esempio PHOTOSHOP ma tutti i programmi di grafica hanno pressoche le stesse funzioni la prima cosa da fare è controllare che il programma sia impostato come unità di misura in PIXEL e non i PUNTI o CENTIMETRI questo perchè la nostra unita di misura in BLOGGER è il PIXEL una volta fatto questo andremo sulla (Barra degli strumenti>Finestre>Info) l'Info o Informatore in PHOTOSHOP è uno strumento che restituisce i gradienti dei colori sia RGB che CMYK la misura degli angoli ma la cosa più importante la posizione dell'oggetto sulla nostra pagina quindi andandoci ad aiutare con le guide grafiche del pregramma e lo strumanto puntatore andremo a posizionare lo stesso prima sull'angolo in alto a sinistra del nostro pulsante e poi sull'angolo in basso a destra ci segneremo i numeri che compaiono accanto al fattore X: e Y: cosi facendo avremo una misura completa del nostro pulsante per verifacarne il funzionamento basta andare sulla mia header.
Credo sia superfluo spiegare il funzionamento di tutti gli altri pulsanti visto che per usufruire di questo tutorial vi basta cambiare logicamnete la grafica e le misure delle posizioni dei pulsanti non dimenticate però che ad ogni pulsante aggiunto dovete aggiungere parte di codice e suo tag di chiusura la stessa cosa vale a dire per l'eliminazione dei tasti dovete per forza di cose eliminare parti di codice ed i suoi tag di chiusura.
Questo è tutto spero di essere stato esaustivo .... Buon DIVERTIMENTO a tutti
Complimenti per il post, ben fatto e molto dettagliato.
RispondiEliminaGrazie per avermi citata nel post ;)