Template da zero con Blogghidee

Un template dall’aspetto professionale, ma personalizzato con Blogger. Gratis! La mia nuova idea è quella di permettervi di imparare creando insieme un template personale. Utilizzando tutte le chicche e i trucchi che ho imparato fino ad ora. Condividere mi tiene occupata…

Template da zero 2 by Blogghidee

Cosa vi serve? Un blog su piattaforma Blogger e un po’ di tempo, se sarete bravi ci metterete soltanto mezz’ora. All’opera.

Oggi ho pensato di utilizzare il template offerto in Visualizzazione dinamica, con l’aggiunta di qualche fashion tips. Notate bene che adopererò la nuova interfaccia di Blogger, per prendere dimestichezza, dal prossimo mese sarà sostituita, quindi tanto vale incominciare da subito. Su, non fate quella faccia: è semplice.

SALVATE IL VOSTRO TEMPLATE PRIMA DI PROCEDERE.

PASSO 1creare un blog su Blogger. Se ce l’avete già procedete avanti.
PASSO 2 – Scegliere il nuovo dalla bacheca cliccate su MODELLO > sotto appariranno tutti i modelli scegliete la prima e cliccate su PERSONALIZZA.
PASSO 3 – Aggiungiamo un gadget cool, un’icona sul lato destro del layout che si aprirà con i vostri gadget, per fare questo, cliccate sul menu AVANZATO (dovete scorrere dal menu a tendina) e aggiungete questo pezzetto di codice:

#gadget-dock {right: 0; }

Controllate su Anteprima, dovrebbe materializzarsi l’icona dei gadget espandibile, bella non è vero!?!

Ora si può personalizzare con i colori, perciò aggiungete anche questo pezzo di codice e fate le vostre prove:

.gadget-icons { background-color: green; color: black; }
.gadget-title { background-color: green; }
.gadget-selected .gadget-icons { background-color: yellow; }

PASSO 4Salvate.
PASSO 5AGGIUNGERE UNA TESTATA
Andate su DESIGNER MODELLI > cliccate su AVANZATO e cercate nel menu AGGIUNGI CSS. Ora aggiungete questo codice corrispondente alla testata e il colore che ho evidenziato in rosa è il nero.

TESTATA#header .header-drawer.sticky, #header .header-drawer { top: 234px; }
#header .header-bar{ height: 165px; }
#header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer { top: 165px; }
#header-container { height: 205px; }
.viewitem-panel .viewitem-inner { top: 380px; padding-bottom: 120px !important;}
#header-container #header.header .header-bar span.title{ background: #000; margin-left: auto !important; margin-right: auto !important; height: 165px; }TESTATA FINE

Io ho aggiunto un po’ di codice ancora per spostare un po’ il titolo e ingrandire il carattere perciò incollate anche questo subito sotto, ho solo cambiato il valore size del carattere e aggiunto margini e distanze, su questi valori potete sperimentare anche voi, per ottenere il risultato che preferite:

#header .header-bar .title h1, #header .header-bar .title h3 { display: inline; margin:0 5px 0 10px; padding:45px 0 0 20px; height: 65px; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); white-space: nowrap; font-size: 60px; }

PASSO 6 – Cambiare il carattere del titolo e della descrizione
Siete ancora su DESIGNER MODELLI, cliccate su TITOLO BLOG e vedrete materializzarsi una vasta scelta di caratteri, per fare il blog proprio come il mio, scegliete IMPACT, grassetto 200% e colore nero d’impatto.
Per la descrizione scegliete COVERED BY YOUR GRACE, colore #e6f4f4 e al 50%, per renderlo un po’ più piccolo.

PASSO 7Cambiare colore sfondo intestazione
E’ facilissimo, se volete vedere com’è il vostro template con un altro colore di sfondo nell’intestazione, andate subito su DESIGNER MODELLI > cliccate su HEADER e cambiate il colore, vedrete all’istante il cambiamento. Lo stesso dicasi per il colore di HEADER BAR, che corrisponde alla barra di navigazione che permette di visualizzare il blog in tutte le visualizzazioni dinamiche messe a disposizione da BLOGGER.

PASSO 8 – Per vedere il modello in azione ho creato seguendo i miei passi un template di prova. Andate a curiosare e fatemi sapere se vi è piaciuto, se non vi piace fate pure a me di scrivermi, non ho nessuna voglia di sentire critiche, davvero, non sto scherzando. Solo cose positive, please. Se mi conoscete davvero sapete anche perché.

DEMO DIMOSTRATIVA

Template da zero 2 header-bar by Blogghidee

 

In questo tutorial c’è un sacco di roba, sembra niente e invece cari miei.

  1. Creazione blog in Dynamic View.
  2. Aggiunta di una testata personale.
  3. Cambio di colore di sfondo della testata.
  4. Scelta del  colore del carattere e del formato della testata e distanze.
  5. Aggiunta di un’icona espandibile e selezionabile sul lato destro del blog.

Fonte per l’aggiunta della testata nella forma dynamic view, un giovane davvero in gamba: thanks e il supporto Google sempre pieno di info strategiche, vi consiglio di bazzicare e naturalmente tante prove.
http://www.southernspeakers.net/2011/10/add-header-in-blogger-dynamic-view.html

 

 

Spread the love

Discussion

  1. admin
  2. Blu

Leave a Reply

This blog is kept spam free by WP-SpamFree.