Blogger è un logging popolare Web o blog, piattaforma utilizzata da persone che scrivono su argomenti di ogni genere.

Creare il proprio codice per un layout di Blogger, o il modello, il design prevede l'utilizzo di un editor di grafica per la creazione di immagini di sfondo, barre laterali e altri elementi grafici; un editor di testo per scrivere il codice e una certa conoscenza del linguaggio di programmazione HTML e Cascading Style Sheets (CSS).

Il passo più importante per la creazione di un layout di Blogger è quello di avere un certo tipo di visione mentale di ciò che si desidera creare. Il vostro obiettivo sarà quello di tradurre quella immagine mentale in codice.

istruzione

1 Creare la grafica per il layout di Blogger utilizzando un editor di grafica per la vostra scelta. Anche se la grafica non sono necessari, si potrebbe desiderare di creare un'immagine di sfondo, intestazione posta o barra laterale grafica.

2 Aprire un editor di testo di vostra scelta e iniziare la creazione del framework CSS. La porzione CSS del layout governerà elementi visivi di base come il tipo di font, dimensione e colore.

Ecco un esempio di ciò che il codice CSS per il layout di Blogger può apparire come:

corpo [background-color: # 000000; margin: 0 auto; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 12px;}

titolo [font-size: 24px; color: # 055; }

Il codice precedente crea 12 punti, di carattere Trebuchet MS che è nero per il corpo principale, e il carattere turchese 24 punti per il titolo di Blogger. Vedere la sezione Risorse per un tutorial su come creare CSS.

3 Legare il CSS configurato insieme in HTML.

Ecco un esempio di come si può raggiungere questo obiettivo:

<Div id = 'main-wrapper'>

<B: section = class 'main' id = showaddelement 'principale' = 'no'>

<B: widget di id = = titolo 'Blog1' bloccato 'vero' = 'Blog Messaggi' type = 'Blog' />

</ B: section>

</ Div>

Ricordatevi di fare riferimento a modelli di Blogger che contengono i widget che si desidera includere nel layout. I widget sono una parte importante del layout blogger in quanto contengono le caratteristiche che si desidera il layout per includere. Per ulteriori informazioni su widget Blogger, si prega di consultare la sezione Risorse.

4 Configurare i widget. Questa fase finale è forse la parte più in termini di tempo della vostra creazione codice layout di Blogger.

Ecco un esempio di ciò che il codice di configurazione del widget può apparire come:

<div class='post-footer'>

& Lt; p class = 'post-footer-line post-footer-line-1 & prime;> & lt; span class =' ​​post-autore '>

& Lt; b: if cond = 'dati: top.showAuthor'>

& Lt; i dati: top.authorLabel /> & lt; i dati: post.author/>

& Lt; / b: if>

& Lt; / span> & lt; span class = 'post-timestamp'>

& Lt; b: if 'di dati: top.showTimestamp' = cond>

& Lt; i dati: top.timestampLabel />

& Lt; b: if cond = 'dati: post.URL'>

& Lt; a class = 'timestamp-link' espr: 'dati: post.URL' href = title = 'Link permanente'> & lt; i dati: post.timestamp /> & lt; / a>

& Lt; / b: if>

& Lt; / b: if>

& Lt; / span> & lt; span class = 'post-commento-link'>

& Lt; b: se '! Dati: blog.pageType = "voce"' = cond>

& Lt; b: if cond = 'di dati: post.allowComments'>

& Lt; a class = 'commento-link' espr: 'Dati: post.addCommentUrl' = href espr: onclick = 'dati: post.addCommentOnclick'> & lt; b: se i dati = cond ': post.numComments == 1 & prime; > 1 & lt; i dati: top.commentLabel /> & lt; b: altro /> & lt; i dati: post.numComments /> & lt; i dati: top.commentLabelPlural /> & lt; / b: if> & lt; / a>

& Lt; / b: if>

& Lt; / b: if>

& lt; / span> & lt; span class = "post-icone">

& Lt;! - Link e-mail post ->

& Lt; b: if cond = 'dati: post.emailPostUrl'>

& Lt; span class = 'oggetto-azione'>

& Lt; a espr: 'Dati: post.emailPostUrl' = href espr: title = 'dati: top.emailPostMsg'>

& Lt; span class = 'email-post-icona'> & lt; / span>

& Lt; / a>

& Lt; / span>

& Lt; / b: if>

& Lt;! - Matita rapida ->

& Lt; b: include 'post' di dati = name = 'postQuickEdit' />

& Lt; / span> & lt; / p>

& Lt; p class = 'post-footer-line post-footer-line-2 & prime;> & lt; span class = "post-etichette'>

& Lt; b: if cond = 'di dati: post.labels'>

& Lt; i dati: postLabelsLabel />

& Lt; b: 'Dati: post.labels' valori loop = 'label' var =>

& Lt; a espr: 'Dati: label.URL' = href rel = "tag '> & lt; i dati: label.name /> & lt; / a> & lt; b: se i dati = cond': label.isLast =" vero " '>, & lt; / b: if>

& Lt; / b: ciclo>

& Lt; / b: if>

& Lt; / span> & lt; / p>

Il codice di cui sopra definisce i controlli per il piè di pagina, visualizzazione autore e l'ora, le etichette, i collegamenti di commento e di più.

Si può scegliere di copiare modello di widget di un altro layout e modificarlo invece di scrivere il proprio da zero. Per fare questo, fare clic sul collegamento "Espandi i modelli widget" in un altro blogger di layout, evidenziare e copiare.