Tutorial Básico do Blogspot - Dicas da Net

Dicas da Net

Tudo sobre o Mundo da Tecnologia.

domingo, 16 de novembro de 2008

Tutorial Básico do Blogspot

Nesse tutorial vou ensinar para que serve cada parte de um código do blogspot.com. Como exemplo vou usar o template Minima Com três Colunas(uma principal e mais duas). Não irei me aprofundar muito nos detalhes, vou apenas dar uma explicada por cima, no final do post tem alguns links onde você pode encontrar maiores detalhes sobre as principais partes do código.

Variable definitions(Definições váriaveis): São básicamente os códigos de cor, tamanho e tipo de fundo, fonte e outras frescuras. Acho que dá para saber o que cada uma faz com a descrição que tem no código, certo? Bom então vou explicar como elas facilitam a vida. Ao invés de vocês configurar cada cor de fonte do seu blog(título do blog, título do post, da sidebar, etc..), você apenas “suga” as informações das DV( Definições váriaveis), chamando elas pelo nome EX: color:$linkcolor;(em destaque o nome da Definição).


Exemplo de código:


====================

<Variable name=”bgcolor” description=”Page Background Color”

type=”color” default=”#fff” value=”#ffffff”>

<Variable name=”textcolor” description=”Text Color”

type=”color” default=”#333″ value=”#333333″>


Definições do Body: São as definições básicas do “corpo” do seu blog, o que não tiver uma configuração própria acaba usando essa configuração, recomendo que o que estiver sendo “sugado” das DV seja editado apenas no item, pois você pode descofigurar o template editando lá em cima ;)(o que estiver em vermelho não faz parte do código, mas sim da explicação):


Exemplo de código:

body {

margin: 0; (Margin determina a distância de um elemento para outro no template, por exemplo, a distância entre o header e a coluna)

background: #1C1C1C; (cor do fundo)

font: 10px Arial, Sans-Serif; (tamanho da fonte)

text-align: center; (alinhamento da Fonte)

}

a:link {

color:$linkcolor; (cor do link)

text-decoration:none; (Decoração do link, nesse caso não há)

}

a:visited {

color:$visitedlinkcolor; (cor do link que já foi visitado, geralmente é usado apenas no IEca)

text-decoration:none; (Decoração do link, nesse caso não há)

}

a:hover {

color:$titlecolor; (cor do link quando o mouse passar sobre ele)

text-decoration:underline; (Decoração do link, nesse caso sublinhado)

}

a img {

border-width:0; (Número da borda das imagens do blog, quanto maior o número, maior o tamanho)

}


Header: Nada mais nada menos que o cabeçalho do seu blog:


#header-wrapper { (nesse caso são aquelas linhas que envolvem o cabeçalho)

width:740px; (largura do header)

margin:0 auto 10px; (preciso repetir?)

border:1px solid $bordercolor; (preciso repetir?)

}

#header-inner { (seria os elementos dentro do header)

background-position: center; (posição da imagem do fundo, nesse caso centralizada)

margin-left: auto; (preciso repetir?)

margin-right: auto; (preciso repetir?)

}


#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}


#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em; (Padding é o espaço entre o conteúdo deste elemento para as bordas)

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}


Outer-Wrapper: Até onde eu sei aqui você controla o tamanho total do seu blog, e mais umas frescuras não muito úteis:

#outer-wrapper {

width: 740px; (detalhe: a soma do tamanho de todas as colunas deve dar menos que esse número, pois se for maior a última decerá para baixo)

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}


main-wrapper: São as configurações básicas dá coluna dos posts:


#main-wrapper {

border: 1px solid $bordercolor;

margin-left: 0px;

width: 500px;

float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}


Posts: Preciso explicar?

Comments: Sem comentários, não?

Sidebar Content: Conteúdo da SideBar, como widget e outras bobeiras.

.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

margin: 5px;

}

.sidebar ul { ( “lista de coisas da sidebar, é o que “organiza” ela)

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

.sidebar li { (”Itens da lista”)

margin:0;

padding:0 0 .25em 15px;

text-indent:-15px;

line-height:1.5em;

}


.sidebar .widget, .main .widget {

border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}

.main .Blog {

border-bottom-width: 0;

}


Profile: São as configurações do seu perfil no blog…

.profile-img {

float: left;

margin: 0 5px 5px 0;

padding: 4px;

border: 1px solid $bordercolor;

}

.profile-data {

margin:0;

text-transform:uppercase;

letter-spacing:.1em;

font: $postfooterfont;

color: $sidebarcolor;

font-weight: bold;

line-height: 1.6em;

}

.profile-datablock {

margin:.5em 0 .5em;

}

Footer: É a parte inferior a todo o seu blog, não sei bem para que serve, mas até onde controla os itens que você colocar nela(pelo editor no blog)

#footer {

width:660px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}


O resto do código é o da tag <body> onde ele chama todos esses itens acima ;)


Esse foi um tutorial básico! Ao longo do ano vou postando tutoriais mais aprofundados no assunto, e até ensino como editar os códigos sem destruir seu blog.

Nenhum comentário:

Postar um comentário

Tire suas dúvidas, deixe um comentário!