Come creare un’intestazione personalizzata per Blogger piattaforma 79


Questo articolo era in cantiere da un po’ di tempo, ma oggi mi sono messa al lavoro con entusiasmo sperando che sia utile per tutti voi new blogger!

Lo so che volete cambiare l’aspetto del vostro blog per renderlo unico e speciale, con quel pizzico di personalità che vi distingua da tutti gli altri.

Per ora c’è l’anteprima del risultato finale. Semplice, ma carino. Alla portata di tutti.

Qui imparerete le basi per creare una testata – intestazione di un blog su piattaforma BLOGGER.

Occorrente:

– Un’immagine per lo sfondo
– programma di grafica gratuito, PAINT.NET
– blog su Blogger con template Minima – quello di default dato al momento dell’iscrizione

STEP 1 – Immagine per lo sfondo

Per trovare un’immagine adeguata per lo sfondo della nostra intestazione potete crearvela da soli, con una foto, oppure prelevarla in rete. Io metterò a disposizione una immagine che potrete usare a vostro piacimento, a patto che mettiate il link del mio sito. 😉  Ossia: http://www.blogghidee.tk

Altrimenti cercate tra le tante opportunità della rete.

Ecco lo sfondo, cliccate sopra per aprire il file su un’altra finestra e copiatelo.

Blogger Testata-header di Blogghidee - Arzigogolo Header -

STEP 2 – Trovare le dimensioni header di Blogger

Per poter confezionare la testata di Blogger, dovrete cercare le dimensioni dell’intestazione del vostro template. Per fare questo aprite il vostro account Blogger e andate sul menu in alto DESIGN > MODIFICA HTML.

Al di sotto si aprirà un box con il codice del vostro template, dovrete cercare la stringa “header”, per trovarla in modo rapido, premete contemporaneamente i tasti della tastiera CTRL F e dalla casellina di testo, digitate Header e date un invio. Si evidenzierà tutta la parte di codice in cui è presente la parola.

Dovrete cercare la parola “WIDTH” che significa larghezza. Nel mio caso, nonostante abbia assegnato il template di default di Blogger non viene fuori la larghezza! Ma di solito è scritta…

dimensione headerPerciò bisogna aggirare il problema e andare dal menu in alto di Blogger, DESIGN > DESIGNER MODELLI.

Dalla finestra che si aprirà, cliccate nel menu a sinistra su MODIFICA LE LARGHEZZE. Si visualizzerà una specie di righello nel quale potrete allargare le dimensioni del vostro blog, per ora limitatevi a prendere nota della dimensione massima in larghezza del vostro blog.

Dimensione header bloggerIn questo caso è 980 pixel, potreste anche fare la testata un po’ più piccola, per evitare che sbordi fuori.

STEP 3 – Aprire il programma Paint.net

Il programma grafico Paint.net è gratuito e abbastanza semplice nell’utilizzo, con le varie estensioni può competere con il super-gettonato Photoshop!

Per scaricarlo e avere qualche notizia ulteriore potete leggere i miei articoli sul blog Illustraidee.

Bene, ora se volete utilizzare l’immagine che ho messo a disposizione dovrete soltanto aprire Paint.net e andare su File > Apri. Cercare la cartella dove avete salvato il file a cliccare su Ok per aprirlo.

Se invece volete creare la vostra personale intestazione seguite questi passaggi:

aprite il programma e andate su FILE > APRI e cercate la foto che avete scelto da usare nell’intestazione. Selezionatela tutta cliccando su MODIFICA > SELEZIONA TUTTO. Ora bisogna copiare, perciò cliccate di nuovo su MODIFICA > COPIA.

Ora create il nuovo documento che sarà la vostra fiammante testata.

FILE > NUOVO e immettete le dimensioni del file uguale alla testata del blog, ossia WIDTH 980 pixel, HEIGHT 240, Risoluzione dpi 72 e infine cliccate su OK.

Aprire un File nuovo su Blogger

Si è aperto il file nuovo, ora andrà incollata l’immagine che avete copiato prima, per farlo cliccate su

MODIFICA > INCOLLA SU NUOVO LIVELLO e dal box che esce cliccate su MANTIENI DIMENSIONI SUPERFICIE.

Incolla mantieni dimensioni superficie su Paint.netVedrete la vostra immagine incollata sul documento. Dovrete sistemare come si deve la vostra immagine, trascinando i piccoli quadratini ai quattro vertici della sagoma selezionata, per fare questo dovete tenere premuto il mouse e il pulsante sinistro e trascinare finché sarete soddisfatti del posizionamento. L’immagine dovrà riempire tutto il nuovo documento.

Per ridimensionare immagine incollata su Paint.net

CTRL D per deselezionare l’immagine.

STEP 4 – INSERIRE IL TESTO SU UN NUOVO LIVELLO

Per inserire il testo andrà creato un nuovo livello. Dal box livelli, se non è aperto cliccate su FINESTRA > LIVELLI oppure su F7,  cliccate sull’icona in basso distinta dal segno “+”.

Poi scegliete lo strumento testo dal box strumenti (F5 se non è aperto), è un’icona a forma di lettera “A”, cliccate su un punto della vostra immagine e incominciate a digitare il titolo del vostro blog o una frase-logo. Come preferite.

Scegliete quindi il tipo di carattere dalla barra menu opzioni dello strumento, cliccando sul menu a tendina. Scegliete anche le dimensioni. Nel mio caso ho scelto il font – Stilistic Fz, dimensione 36.

Dopo per creare il testo al di sotto, create un nuovo livello, come prima, scegliete lo strumento testo e digitate un ulteriore testo di approfondimento. Io ho usato il font SimSUn, e dimensione più piccola circa 18. Per creare un alternanza visiva.

Il colore si sceglie dal box colori, io ho scelto bianco.

Non ho aggiunto effetti strani, ma l’effetto è molto bello, a me piace. Spero anche a voi.

Paint.net Creare un nuovo livello e testo

STEP 5 – SALVARE LA TESTATA

Ok ora dovete salvare l’immagine, andate su FILE > SALVA CON NOME, scegliete Jpeg o PNG. Date un nome e ricordatevi dove l’avete salvata, magari create una cartella “BLOGGER”.

Salva con nome Paint.netLe frecce indicano il menu a tendina dal quale scegliere il tipo di formato del file, jpeg o png e sopra la casella dove immettere il nome della vostra intestazione.

Intestazione finale per blogger

STEP 6 – Caricare la nuova intestazione sul BLOG BLOGGER

Siete quasi arrivati alla fine, ora andate sul vostro account del blog – Blogger e cliccate su DESIGN > ELEMENTI PAGINA e cliccate sul box della vostra intestazione, sulla parola “MODIFICA”

Modifica intestazione da bloggerSi aprirà un box per aggiungere l’instestazione:

Box intestazione BloggerDopo qualche istante si caricherà l’immagine, cliccate su Salva e si applicherà al blog.

Per vedere il risultato finale, cliccate in alto sul menu, su “VISUALIZZA BLOG”.

Ora potete ammirare l’opera.

Spero che questo tutorial sia d’aiuto a tutti i baby-blogger, per modo di dire, naturalmente e soprattutto a Joy.

Al lavoro allora,

e a presto,

by Blogghidee.


Informazioni su blogghidee

Sono una blogger appassionata!!! Adoro alla follia le fiabe, illustrare le mie idee, fotografare, dipingere... E mi sono scoperta innamorata anche del codice! Qui raccolgo tutto ciò che ho scoperto sulla blogsfera, se volete comunicare con me per idee o collaborazioni cliccate su Contatti, rispondo sempre a tutti ehehe!


Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

This blog is kept spam free by WP-SpamFree.

79 commenti su “Come creare un’intestazione personalizzata per Blogger piattaforma

  • Joy

    Grazie, mille volte grazie :).
    Allora:
    – niente da fare, il gadget di “Google News” in nessun modo vuole centrarsi. Ho provato il suo metodo sia con “center” che con “left”, ma rimane lì. Pazienza, tanto avevo pensato di collocarlo in un suo quadrato in una delle prossime colonne del footer.
    – È vero, l’elemento “Archivio” non può esserci ancora perché non ci sono posts. Non avrei dovuto neanche chiedermelo, ma questa cosa un po’ l’avevo pensata :D. Ma per l’archivio, io voglio fare la stessa cosa che per “Contatti” e “About Joy”, cioè, un pulsantino sul menu orizzontale che apre una pagina in cui ci sarebbe il menu mensile e, forse, anche per “categorie”. Ma non sarà “una passeggiata”.
    – Lavorandoci, alla fine, anche la sezione “About Joy” è fatta! Ho cancellato nel codice la parte della demo, ho creato una pagina statica e ne ho copiato l’URL nel codice. Adesso il collegamento c’è. Ho però 3 problemini ostici su questo:
    1) nel mio tema c’è di default il “Read more”, che mi piace per i post, ma che non sarebbe dovuto apparire anche nella pagina statica, invece è lì. Ma la cosa “magica” è che ho cancellato la parte inerente “Read More” nel codice, eppure il pulsante appare sempre alla fine del testo della pagina statica. Sembra impossibile da togliere. Guardi un po’: http://joys-pills.blogspot.com/p/about-joy.html.
    2) Sempre per questa pagina, il colore del font io volevo il nero e nella pagina è grigio, come tutti titoli del tema; ma ho provato col rosso e così va. E neanche il corsivo memorizza. Che stranezza è? Può delucidarmi? Invece col tipo di font è andata bene, l’ho scelto e lo ha messo.
    3) Un dettaglio: nella pagina statica, sulla destra, io vedo una matita disegnata che serve a modificare quella pagina. Mi chiedevo, ma i visitatori la vedono anche?!
    Per ora è tutto… Ma sono sempre “Work in progress”… 🙂
    Joy

  • admin

    Joy, buon giorno!
    Strano per Google news, a me ha funzionato! Però in Splinder un altro script di Google è sempre malmesso e sembra che non funzioni nulla.
    L’archivio con il pulsante… Uhm, lei ha una predilezione per “le cose complicate”…! 😉 Una bella sfida, mi piace.
    Il “read more” io non lo vedo: è riuscito a cancellarlo!?! Se ha tolto il codice però non verrà fuori nemmeno nei post ed è un peccato.
    Per cambiare solo il colore del carattere solo di quel post, entri nel post e vada nell’editor Html e un bottone sopra l’editor normale “MODIFICA HTML” e scriva lì con la cediglia davanti < e alla fine > scriva tra le due
    a style=”color:black”
    Dovrebbe prenderlo solo per il post e non per tutto il blog. Provi e mi faccia sapere.
    La matitina la vede solo lei quando è entrato nell’account del suo blog, se la clicca può modificare l’elemento. Forte, non è vero!?!
    Sono andata a leggere il suo profilo, be’ ora sono curiosa di vederla all’opera.
    Posso permettermi un dettaglio… Guardando la sua intestazione io la farei lunga quanto il corpo del blog e ultima cosa, la busta dei contatti nella home la sposterei in ultima posizione, così è tutto più omogeneo. Sono solo dettagli a livello personale… 😉
    Bravo.
    Ximi

  • Joy

    Buon giorno!
    Con gran piacere ho appena letto il suo messaggio. Allora, punto per punto.
    – Google News: come le ho detto, lo sposterò da lì, andrà in una delle colonne (la centrale sarebbe un’idea carina) che inserirò nel footer;
    – il pulsante per l’archivio sul menu orizzontale minpiace molto, la sola volta che l’ho visto è stato ne blog di Grillo. Lui ha un menu a cascata mensile in una delle 2 sidebar e poi ha questo bottone duo menu orizzontale. Cliccandoci, si hanno 2 menu a cascata , mensile e credo per Categoria. Spero di riuscire nel discorso del collegamento bottone>collegamento menu, tutto sta nel codice, attualmente io non saprei che codice mettere. Si vedrà…
    – sul pulsante “Read More” ci ho lavorato parecchio ieri. La cosa più logica era togliere quella parte di codice originale del tema e l’avevo fatto, tant’è che il testo della pagina statica finalmente era intero, ma non capivo perché alla fine del testo restava ancora il bottone di “Read More”. Alla fine, dovevo solo espandere i widgets e infatti ho trovato nel codice la stringa del bottone, tolta anche quella. Sulla sua osservazione, quello che io ho tolto era quello originale, di default, ma nei normali post io voglio l’espandibile, ma inserirò un nuovo codice che avevo già trovato in rete e che spero non si attivi anche nelle pagine statiche;
    – proverò la sua stringa per il colore, anche se poi ieri guardavo il testo e ha una sua finezza, rientra nello stile generale del tema..
    – per la matita…, menomale! 🙂
    – sulle sue aspettative sul mio blog , non mi faccia agitare! 😀 Guardi, parlerò molto liberamente di ciò che mi sta a cuore della Società, sensa peli sulla lingua, nel senso che quelli che sento dirò, su un episodio, su un fatto internazionale, su un personaggio che magari dice qualcosa, ecc. E poi, voglio approfondire per me e per chiunque voglia, tutto il discorso Ambiente-Energie nuove-Sviluppo Eco-Quotidiano sostenibile… Tutto ciò mi appassiona molto.
    – sulle sue osservazioni: sul discorso della bustina, l’ho messa lì accanto a “About Joy” perché mi sembrava logico ma condivido anche la sua idea. E consideri che quel menu è davvero “sotto lavori”, ci andranno altre cosette lì (tipo, anche il traduttore con bandierine, ma sono restio a quello di Google, tempo fa avevo trovato altro per Blogger). Invece, sul discorso “Intestazione”, quello che lei mi ha scritto è quello che io avevo cercato di fare quando ci lavorai, cioè, far occupare tutto il duo spazio all’intestazione. Ma man mano che aumentavano i pixel per coprire quel grande spazio disponibile, la visione dell’intestazione era un pugno e di più, ilnrl viso, enorme. E lì decisi per la soluzione attuale che credo ha davvero un suo perché estetico e funzionale. E poi, forse non gliel’ho detto, ma in questi giorni mi sono riguardato più volte la demo del mio tema, accanto al mio… E le dico che ho l’eleganza di quel tema; quei grigi tenui, il bianco… Perciò io poi ho eliminato il color prugna dal menu, e ho deciso di non cambiare la casetta di “Home”, e di non colorare il font dei titoli della sidebar e del menu orizzontale. E credo l’intestazione e lo sfondo che adesso è definitivo e mi piace moltissimo, siano quel “poco” di personalizzazione che io ho dato, ma che basta. E poi, delle piccole personalizzazioni ce ne saranno ancora..
    Anzi! Per una mi serve il suo aiuto :D. Ha visto che ho inserito una data, ma è momentanea, non mi convince la soluzione, e poi non posso davvero metterla dove voglio. Io voglio inserire data (e forse ora) giusto sopra la casella “Cerca nel blog”, sarebbe perfetta… Pensi a “TGCom”, uguale… Come trovo il codice per far questo? Curiosità: ma lo spazio dello sfondo (dove appunto io voglio inserire la data, come si chiama nel codice? “Body” o non so…
    Per ora è tutto, oggi sono libero e nel pomeriggio mi dedico al blog 🙂
    Buona giornata.
    Joy

  • admin

    Concordo in pieno con l’eleganza dei colori del template, è proprio quella la sua caratteristica ed era un vero peccato stravolgerlo.
    Se vuole aggiungere la data sopra la casella di ricerca, giusto!?! Guardando il codice dovrebbe far parte del “layout header nav main”, la casellina si chiama – search box -.
    La parte sopra dovrebbe essere -outer wrapper – o -content-wrapper – . Provi a inserire il codice prima della casella e veda un po’ che succede. 😉

  • Joy

    Buon giorno.
    Allora, per la Data, ho provato 2, 3 opzioni tutte prima appunto dell’elemento “Search”, ma la data non appare neanche, in nessun punto del blog. Credo che il codice che uso sia adatto solo per essere inserito come gadget HTML/Java, come avevo fatto temporaneamente l’altro giorno. Mi serve un al altro codice per poter inserire la Data in un qualsiasi punto del tema. Già ieri mi sono messo a cercare un po’ ma nulla, strano; per la Data nei post ci sono varie soluzioni ma fuori dal post, a parte quella che ho preso da “ideepercomputeredinternet”, null’altro. Se lei ha altre fonti, mi faccia sapere.
    Capitolo traduttore. Le scrissi ieri che sul menu andranno anche le bandierine della traduzione. Io vorrei qualcosa di diverso da “Google Translate”, che è vero, migliora continuamente, ma vorrei davvero che quando si clicchi su una bandierina, si ricarichi semplicemente il mio tradotto, nel miglior modo possibile per il lettone senza che si aprino nuove pagine della traduzione o cose simili. Ma anche su questo io non ho trovato nulla…! Per WordPress ci sono i pluggins, ma per Blogger niente, sembra. Io ho pensato anche che se trovassi una risorsadi traduzione anche a pagamento per Blogger, potrei essere disponibile a prenderla (ad un costo ragionevole). Ma anche a pagamento non trovo nulla! Anche qui, se lei è più fortunata nelle ricerche, “mi faccia un fischio” :).
    Buona giornata.
    Joy

  • admin

    Il traduttore di Google, anche se privo di bandierine è molto veloce nella traduzione e non cambia pagina, traduce simultaneamente senza cambi. Guardi qui Deve soltanto impostare italiano come lingua di base del blog. Le saprò dire se trovo qualcosa.
    Guardi è pur vero che WordPress sembra che abbia più risorse, ma si fidi, è molto meglio Blogger! Ci sono meno problemi.
    Per la data penso che il problema sia un pezzetto di codice che bisogna abilitare per far sì che si possano trascinare i gadget anche in altre aree. Altrimenti non combina
    niente. Oggi devo occuparmi del mio template che sta facendo le bizze!
    A presto,
    Ximi

  • Joy

    Sul suo template…, confermo :D.
    Quindi le mi consiglia di andare sul sicuro con Google Translate… Be’, se né io né lei troviamo qualcos’altro, non mi resta che quello…
    Sulla data però, non mi arrendo, mi sembra poco normale che non posizionare un elemento dove desidero, nel tema. Ma non credo che risolverò usando il codice che ho usato fin’ora. Credo che ne devo trovare un altro… Ahimè… :).
    Buon lavoro (con le bizze :)).
    Grazie.
    Joy

  • admin

    Veramente non ho cercato le bandierine che traducono simultaneamente la pagina, probabile che ci siano!
    Però nel frattempo può provare quello del link, funziona bene ed è veloce.
    Per la data, non ho guardato, come le ho detto ho un cavallo imbizzarrito di cui occuparmi: che pizza!
    Ha visto l’articolo per creare le colonne nel footer!?! Ha provato a crearle? Buona serata anche a lei 🙂
    Ximi

  • Joy

    Buon giorno.
    Vedo che ha trovato subito subito “la cura” per il suo sito :).
    Riguardo le bandierine, non intendevo indurla a cercare le bandierine per me :), infatti voglio provare col traduttore che lei mi ha consigliato… Devo vedere però dove metterlo, perché la pecca di quel tipo di traduttore (senno se mi sbaglio) è che forse non di può posizionare liberamente nel tema. Ma forse sto dicendo una castroneria :D.
    Sul suo post sulle colonne, non avevo ancora avuto modo, ma la ringrazio tantissimo! Quando l’ho visto l’altro giorno, ho pensato subito che forse l’aveva postato dopo che io le avevo scritto della mia volontà di inserire 2, 3 colonne nel footer. Lo dico: m’ha fatto piacere :). Non l’ho ancora provato, perché delle colonne me ne occuperò nei prossimi giorni; preferisco prima chiudere discorsi (per me) più complessi.
    Grazie e buona giornata.
    Joy

  • admin

    Buon giorno!
    Be’ devo ammettere che lei mi ha dato una grande spinta per creare nuovi articoli, che comunque interessavano anche me e credo molti altri…! Ho aspettato a postarlo per avere il permesso dell’autore sulla parte di codice, è stato davvero gentilissimo! 😉
    Ho dato una sbirciata in giro per le bandierine ed in effetti non piace neppure a me l’apertura del traduttore in un’altra pagina. Per ora li ho trovati così. Può inserire il gadget del traduttore dove vuole. Basta cliccarci sopra, tenendo premuto il mouse e trascinarlo nella posizione che vuole.
    Forse dovrò mettere il sito sotto “Lavori in corso”, vedremo… Ehi, passi comunque, mi raccomando!
    Saluti
    Ximi

  • Joy

    Volevo proprio scrivere per rettificare sul fatto che il suo template fosse guarito, e ho trovato il suo messaggio :).
    Ah, quindi, il traduttore di Google potrei posizionarlo dove vorrei. Quindi il codice non lo inserisco usando il gadget “Aggiungi HTML/JavaScript” – perché in quel caso non si può inserire dove si vuole (è un limite dei gadgets di Blogger, secondo me) – ma direttamente nel mio codice… E lì ci sarà da ridere sul dove… :).
    A presto.
    Joy

  • admin

    Già… Imprevisti del mestiere… eh!
    Si, intendevo il solito gadget html java, inserire il codice e trascinare il gadget da Elementi pagina, spostandolo dove vuole nella colonna. Potrebbe anche metterlo sotto l’intestazione, ma credo debba abilitare un pezzo di codice. Perché non dovrebbe spostarsi!?!
    Può farlo anche sul codice, ma è più facile da elementi pagina.
    Ximi

  • Joy

    … Be’, li spostamento da “HTML/Java è limitato alla sidebar, alla zona post e sotto l’intestazione, è uno spostamento molto ben definito. Io devo decidere dove piazzarlo ancora il gadget, dove cade meglio… Peccato non poterlo sul menu orizzontale con questa soluzione (a differenza delle bandierine). Le faccio sapere :).
    Joy

  • claudia

    questo post è stato utilissimo!!!!!!!! sei stato bravissimo a spiegare e in più è stato anche facile!!!
    dai un occhiata all’intestazione del mio blog!!!! =)
    grazie mille =) =)

  • admin L'autore dell'articolo

    @Halima May,
    ci riuscirai vedrai!!!
    Grazie a te, passa quando vuoi a trovarmi i commenti mi fanno sempre un immenso piacere 😉

  • CindyVonKrueher

    wow..che articolo , grazie per averlo condiviso con noi 🙂 non vedo l’ora di personalizzare il mio blog grazie a quest’articolo,spero proprio di riuscirci visto che sono alle prima armi, XD

  • admin L'autore dell'articolo

    @Cindyvonkrue 🙂
    grazie a te per i complimenti 😀
    Se incontri difficolta chiedi pure senza farti problemi! Se vuoi linka quando hai fatto 😉
    A presto!

  • CindyVonKrueher

    ecco fatto tutto, solo grazie alla tua guida, non mi resta che caricarlo sul mio blog ^_^
    non credo possa esistere articolo più semplice ed esplicativo del tuo… sei una grande ti ringrazio tanto 😀

  • admin L'autore dell'articolo

    @Cindy Von Krueher,
    ma grazie mille! Bravissima!! Così mi piacete un sacco! Appena ho un attimo passo a trovarti, a presto!

  • Serena

    Qualche settimana fa ho seguito tutta la procedura, inserendo la nuova intestazione sul mio blog (lucernariosulmondo.blogspot.it)… ora ho cambiato il layout e di conseguenza le dimensioni. Ho fatto una nuova intestazione con le nuove dimensioni, ma ora non riesco più a visualizzarla sul blg, potresti aiutarmi? Grazie!

  • blogghidee L'autore dell'articolo

    @Serena,
    ciao! Ho dato un’occhiata al tuo blog mi pare che tu abbia risolto e scusa il ritardo nella risposta!!! Avevo dato comunicazione che per un po’ di tempo non sarei riuscita a rispondere a tutti in velocità, sorry.
    A presto e grazie!!!