Template da zero number 1 by Blogghidee

Bene oggi si riparte, questa volta un template un po’ colorato: partiamo.

Template da zero 1 by Blogghidee

PASSO 1 – scelta del modello semplice da DESIGNER MODELLI > ultima scelta a sinistra, quella a tutta banda, per intenderci.

PASSO 2 – Cambio dei colori della colonna laterale in azzurro da DESIGN > DESIGNER MODELLI > AVANZATO >
SFONDI: su SFONDO ESTERNO colore #f06ea5 , su SFONDO PRINCIPALE: nero, su SFONDO INTESTAZIONE #00ff00 (verde)
LINK: Colore LINK: #f84fb5;  Colore LINK VISITATI: stesso di prima; Colore LINK AL PASSAGGIO MOUSE: bianco;
TITOLO BLOG: carattere Walter Turncoat, dimensione 60px, colore #f80095.
Dopo aggiungeremo un’ombreggiatura solida al titolo, per renderlo più bello e una spaziatura dal margine.
TESTO SCHEDE: carattere IMPACT, dimensione 20px, colore: bianco; colore selezionato #f84fb5.
SFONDO SCHEDE: colore nero su entrambi. Oppure colore rosa delle sfondo e selezione uguale.
TITOLO POST: carattere: COPSE, 22 px.
GADGET: carattere GEORGIA, Colore TITOLO bianco.
INTESTAZIONE DATA: colore sfondo: nero.

PASSO 3: ora passiamo alle modifiche CSS, andate su AVANZATO da DESIGNER MODELLI e aggiungete questo codice:

.content-inner { padding:10px 10px; }

.Header h1 { text-shadow: 2px 0px 3px #000; margin-left:55px; }

.post-body {
color: white;
  font-size: 130%;
  line-height: 1.4;
  position: relative;
}

Cosa abbiamo fatto? Su Content-inner ho avvicinato l’intestazione ai lati esterni del blog. E su Header h1, che corrisponde al titolo dell’intestazione ho aggiunto un’ombreggiatura e l’ho distanziato dal bordo.
SALVATE le modifiche effettuate.

PASSO 4: creare una navigazione al di sotto intestazione. E’ semplice. Occorre solo creare delle pagine. Perciò:

clicchiamo in alto su TORNA SU BLOGGER e ritorneremo nella bacheca principale, ora clicchiamo su POST > e su MODIFICA PAGINE > ora clicchiamo su CREA PAGINA. Scriviamo un titolo, ad esempio ABOUT ME, con un testo che ci descriva, non tantissimo: meglio essere sintetici, ma puntando su ciò che vi preme di più far sapere di voi.

Dalla schermata che appare spuntiamo la casella SCHEDE BLOG per far apparire la pagina come un menu di navigazione. Clicchiamo su SALVA E PUBBLICA et voilà!

PUBBLICA POST e la paginetta sarà pubblicata sotto forma di MENU BAR.
Aggiungendo altre pagine, aggiungeremo altre pagine nel menu di navigazione con corrispondente link. Come? Facile, clicchiamo di nuovo su MODIFICA PAGINE > NUOVA PAGINA e ripetete tutto d’accapo.

VISUALIZZATE ANTEPRIMA blog per vedere il risultato.

Io ci toglierei tutte quelle righe, non mi vanno oggi. Così andiamo su DESIGN > MODIFICA HTML e clicchiamo su ESPANDI SU MODELLI WIDGET, spuntando l’apposita casellina.

Ora CTRL F (tasti da premere insieme dalla tastiera pc) e si apre una casella di ricerca nel vostro schermo digitate questo: tabs-inner .widget li a, scorrete fino ad arrivare a questo codice, cancellate tutto ciò che ho evidenziato in giallo:

/* Tabs
———————————————– */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}
.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}
.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);
  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}
.tabs-inner .widget li a {
  display: inline-block;
  padding: .6em 1em;
  font: $(tabs.font);
  color: $(tabs.text.color);
  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}
.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

Dovrebbe essere rimasto solo un bordino bianco al di sotto del nostro menu bar. Se non volessimo neppure quella, cancelliamo anche

border-bottom: $(tabs.border.width) solid $(tabs.border.color);

Controlliamo su ANTEPRIMA BLOG e ora SALVA MODELLO. Et voilà.

PASSO 5: creiamo un footer a tre colonne e cambiamo il colore.
Andiamo su DESIGN > DESIGNER MODELLI > LAYOUT e scegliamo il disegno corrispondente ad una grafica nel footer con tre colonne. APPLICA AL BLOG.

Per vedere in azione bisogna aggiungere dei gadget, ora aggiungeremo alcuni gadget di blogger. Andiamo su DESIGN > LAYOUT PAGINA, vediamo in basso la parte finale del BLOG con alcuni box con scritto AGGIUNGI GADGET, clicchiamo sopra e scorriamo fino al box INFORMAZIONI PERSONALI.

Lo vedrete immediatamente aggiungersi. Ora clicchiamo di nuovo su AGGIUNGI GADGET centrale e scorriamo fino ad arrivare ad ETICHETTE, scegliamo NUVOLA e il resto lasciamolo così. Quando avremo pubblicato degli articoli e avremo scelto delle parole chiave per ognuno di essi verranno visualizzate come etichette in questo box.

Ora aggiungiamo l’ultimo gadget, sempre cliccando su AGGIUNGI GADGET, questa volta il box più a destra. E inseriamo un orologio, che dite? Cerchiamo AGGIUNGI HTML JAVA SCRIPT e andiamo su questo sito a trovare un orologio di nostro gusto: il clock number 9 dal sito http://www.csalim.com. Copiate il codice e incollate nel box aperto poc’anzi.

PASSO 6: allarghiamo un po’ il blog, andiamo su DESIGN > DESIGNER MODELLI > MODIFICA LARGHEZZE e trasciniamo il cursore fino ad arrivare a 980 e sidebar a 290. Ok fatto.

E’ a sfondo nero. Va molto bene.

Ok per oggi è tutto, domani aggiungo qualche altra cosa.

Ah dimenticavo clicca DEMO DIMOSTRATIVA per vedere com’è.

 

 

 

 

 

Spread the love

Leave a Reply

This blog is kept spam free by WP-SpamFree.