Código Blogger 3 - Elementos do Modelo Widget

Twitter

BlogBlogs

Digg

Delicious

Rec6

Enfim... vamos ver quais são os elementos do Modelo Widget.

Esses elementos foram separados por mim, de maneira arbitrária, para que pudéssemos estudar cada parte em separado. Essa separação não tem nada a ver com HTML, CSS, XML ou qualquer outra coisa. É apenas pra que você possa entender melhor.

Obs.: depois de cada começo de tag '<' eu coloquei uma aspa ' para que o código não fosse executado, na real, essa aspa ' não existe.

Comecemos pela começo:

<'?xml version="1.0" encoding="UTF-8" ?>
<'!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<'html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Esta parte não te interessa, são apenas algumas declarações formais e coisas que você não precisará alterar, pelo menos não agora. Portanto, ignore.

Note apenas que seu blog/site começa com essa declaração:

<'html .... >

E acaba com (última coisa do seu modelo):

<'/html>

Esses são os delimitadores de tudo que acontece no seu site, blog ou o que quer que seja. Tudo deve ser feito entre essas duas TAGs.

Vamos para a segunda parte:

<'head>
<'b:include data='blog' name='all-head-content'/>
<'title><'data:blog.pageTitle/><'/title>
<'b:skin><'![CDATA[/* ----------------------------------------------- Blogger Template Style Name: Minima Designer: Douglas Bowman URL: www.stopdesign.com Date: 26 Feb 2004 Updated by: Blogger Team ----------------------------------------------- */

Nesta parte, você tem o começo do HEAD do seu blog. O HEAD contém informações que NÃO aparecem diretamente no seu blog, mas que o organiza e preparam os elementos que podem ser vistos na sua página.

Preste atenção em dois elementos:

1)

<'title> ... <'/title>

Aqui é onde você escolhe o título para o seu Blog. Esse título aparecerá nas abas do navegador e nos mecanismos de busca.

Você pode trocar o elemento <'data:blog.pageTitle/> pelo nome seco do seu blog, ficando assim: <'title>BlogStop Brasil<'/title>

2)

<'b:skin><'![CDATA[/*

Essa TAG será fechada lá em baixo, acima da TAG BODY, dessa forma:

]]><'/b:skin>

Dentro desse código, estarão todas as informações de estilo do seu blog. Em outras palavras, de maneira prática, você encaixará as declarações CSS dentro dessas suas TAGs.

Depois nós temos:

/* Variable definitions
====================
<'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">
<'variable name="linkcolor" description="Link Color" type="color" default="#58a" value="#5588aa">
<'variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#666" value="#666666">
<'variable name="descriptioncolor" description="Blog Description Color" type="color" default="#999" value="#999999">
<'variable name="titlecolor" description="Post Title Color" type="color" default="#c60" value="#cc6600">
<'variable name="bordercolor" description="Border Color" type="color" default="#ccc" value="#cccccc">
<'variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#999" value="#999999">
<'variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#666" value="#666666">
<'variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#999" value="#999999">
<'variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<'variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<'variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<'variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<'variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<'variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left">
<'variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right">
*/

/* Use this with templates/template-twocol.html */

Essa parte são definições do próprio Blogger para as cores e fontes do seu blog. Logo logo você já poderá excluir tudo isso. Apenas ignore.

Depois disso, vamos dar de cara com o CSS, começando pelas definições para a TAG BODY. Prepare-se que é aqui que você vai começar a trabalhar.