Template Passo a passo ...Passo a passo modelo


http://www.google.com/support/blogger/bin/answer.py?hl=en&topic=8930&answer=42068








  Template Passo a passo

Passo a passo modelo

Muitos de nossos artigos explicam o Blogger várias tags de modelos com grande detalhe, mas esta vai ser uma demonstração de como todos eles trabalham juntos para criar um modelo completo. Enquanto andamos através do código, vou explicar o que está acontecendo em cada seção. As tags do Blogger tudo será destaque, além de regular o HTML e CSS, por isso será fácil identificá-las. Here we go! 

<html> <head> <title><$ BlogPageTitle $></ title>
Este é o início do nosso modelo. Você normalmente quer usar o <$ BlogPageTitle $> para o seu título, uma vez que ele utiliza automaticamente o nome correto para qualquer página que você está. 
<style>
/ * Style modificados glish:
http://www.glish.com/css/ * /
body (margin: 0px 0px 0px 0px; font-family: trebuchet
ms, verdana, sans-serif; cor de fundo branco:;)
# Title (font-size: 63px; padding-left: 15px;
padding-top: 10px; text-transform: uppercase;
font-family: trebuchet ms, verdana, sans-serif;)
# Título a (text-decoration: none; color: inherit;)
# Descrição (padding: 0px; padding-top: 10px;
font-size: 12px; font-weight: normal)
. DateHeader (border-bottom: none; font-size: 15px;
text-align: left;
margin-top: 20px; margin-bottom: 14px; padding: 1px;
padding-left: 17px; cor: cinza;
font-family: trebuchet ms, verdana, sans-serif;)
. PostTitle (font-size: 18px; font-weight: bold)
. Post (padding-left: 20px; margin-bottom: 20px;
text-indent: 10px;
padding-left: 20px; line-height: 22px)
. PostFooter (margin-bottom: 15px; margin-left: 0px;
color: black; font-size: 10px)
# LeftContent (background-color: WhiteSmoke;
border-right: 2px solid # 000;
border-bottom: 0px solid # 000; float: left;
padding-bottom: 20px;
margin-right: 15px; padding: 0; width: 67%;
border-top: 0px solid # 000)
. SideBarTitle (font-weight: bold; font-size: 18px)
h1 (font-size: 14px; padding-top: 10px)
a (text-decoration: none)
a: hover (border-bottom: dashed 1px red)
# RightContent (font-size: 12px; height: 100%;
margin-left: 0px; text-decoration: none;
padding-left: 10px; background-color: white;)
. blogComments (font-size: 15px; text-align: left;
margin-top: 20px; margin-bottom: 14px; padding: 1px;
padding-left: 17px; color: gray; font-family: trebuchet
ms, verdana, sans-serif;)
. blogComment (margin-top: 10px; margin-bottom: 10px;
color: black; text-indent: 10px; padding-left: 20px;
line-height: 22px)
. deleted-comment (font-style: italic; color: gray;)
. assinatura (margin-bottom: 20px; margin-left: 0px;
margin-right: 10px; color: black;
font-size: 10px; display: inline)
# profile-container ()
. profile-datablock ()
. profile-img (display: inline;)
. profile-img (float: left; margin: 0 10px 0px 0;
border: 4px solid # ccc;)
# profile-container p ()
# profile-container perfil.-textblock ()
. profile-data strong (display: block;)
</ style>
Esta seção é a folha de estilo, que descreve as cores, fontes, bordas e outros imóveis de tudo em sua página. Para obter mais informações, consulte Como faço para alterar as cores ou fontes do meu modelo? e O que mais posso fazer com CSS? 
<! - Meta informações ->
<$ BlogMetaData $>
</ head>
No final da cabeceira, temos a <$ BlogMetaData $> tag. Isto é extremamente útil, pois insere automaticamente todas as meta-tags que você precisa para o seu blog em uma etapa fácil.
Agora estamos prontos para entrar no corpo do modelo. Esta é a parte que realmente vemos na janela do navegador quando visualizamos o blog. 
<body>

<div id="leftcontent">
<div id="title">
<ItemPage><a href = "<$ BlogURL $>"></ ItemPage>
<$ BlogTitle $>
<ItemPage></ a></ ItemPage> 
</ div>
O <$ BlogTitle $> sim é a parte que mostra o título do nosso blog, mas nós adicionamos um pouco de código extra para fazer um link para a página inicial. O <$ BlogURL $> tag é o que nos dá o endereço. No entanto, desde que nós não queremos incomodar ligando de volta para a página inicial, se já estamos nele, nós colocaremos o link <ItemPage> tags, então ele só aparecerá nas páginas de item.
Agora, para os cargos: 
<Blogger>
<BlogDateHeader>
<div class="DateHeader"><$ BlogDateHeaderDate $></ div>
</ BlogDateHeader> 

<div class="post">
<a name = "<$ BlogItemNumber $>"> </ A>

<BlogItemTitle><span class="posttitle">
<BlogItemURL><a href = "<$ BlogItemURL $>"></ BlogItemURL> 
<$ BlogItemTitle $></ a> </ span></ BlogItemTitle>

<$ BlogItemBody $>

<span class="PostFooter">
¶ <a href = "<$ BlogItemPermalinkURL $>"
title = "link permanente"> <$ BlogItemDateTime $></ a> 

<MainOrArchivePage> <BlogItemCommentsEnabled>
<a href = "<$ BlogItemCommentCreate $>" 
   <$ BlogItemCommentFormOnClick $>>
  <$ BlogItemCommentCount $> comentários </ a> 
</ BlogItemCommentsEnabled> </ MainOrArchivePage>

</ span>
</ div>
Observe o <Blogger> tag no início desta seção. Muito em breve vamos estar em cima de uma correspondência </ Blogger> tag. Qualquer coisa entre essas duas tags será repetido para cada post em sua página.
As etiquetas com cifrão ($) nesta seção referem-se a todos os dados que serão diferentes para cada post individual. Por exemplo, <$ BlogItemTitle $> imprime o título, e <$ BlogItemBody $> imprime o texto completo do post.
As tags sem cifrões indicam quando algo deve ser impresso na página ou não. Por exemplo <BlogItemTitle> e
</ BlogItemTitle> circundam o código eo texto que só vai aparecer se o item tiver um título. De igual modo texto entre <MainOrArchivePage> e </ MainOrArchivePage> só aparecerá na página principal ou nas páginas de arquivos. Estamos usando a tag para incluir os links de comentários, já que não precisam mostrar-los nas páginas item.
Falando em comentários, vamos precisar de algum código para exibir os comentários para as entradas de tê-los, por isso vamos ver que vem. Note que ainda estamos dentro do <Blogger> Search, uma vez que os comentários estão relacionados a mensagens individuais. 
<ItemPage> 

<div class="blogComments">
<BlogItemCommentsEnabled><a name="comments"> </ a>
Comentários:
<BlogItemComments> 
<div class="blogComment">
<a name = "<$ BlogCommentNumber $>"> </ a>
<$ BlogCommentBody $><br />
<div class="byline">
<a href = "<$ BlogCommentPermalinkURL $>"
title = "link permanente ">#</ a>
Enviado por <$ BlogCommentAuthor $> : 
<$ BlogCommentDateTime $>
</ div> 

<$ BlogCommentDeleteIcon $> 
</ div>
</ BlogItemComments> 

<$ BlogItemCreate $>
  
</ div>
</ BlogItemCommentsEnabled> 
<br /> <br />
<a href = "<$ BlogURL $>"> <<Home </ a>

</ div>
</ ItemPage>
</ Blogger>  

</ div>
Temos <ItemPage> e <BlogItemCommentsEnabled> tags aqui para que esse código só aparece nas páginas de postagem das entradas que permitem comentários. O <BlogItemComments> e </ BlogItemComments> tags são semelhantes às <Blogger>, Uma vez que contêm o código que será repetido em cada comentário na página. Dentro dessas tags, você pode ver que exibição de comentários se parece muito com a exibição de mensagens. Existe <$ BlogCommentBody $> para o texto do comentário, etc
Algumas outras tags funcionam de forma ligeiramente diferente. <$ BlogCommentDeleteIcon $> insere automaticamente um ícone de exclusão e link de cada comentário. <$ BlogItemCreate $> Acrescenta no link para adicionar um novo comentário. Para mais informações sobre todas as tags de comentário, você pode ler Neste artigo.
Assim que cobre tudo na secção principal do seu modelo. Vamos dar uma olhada na barra lateral agora. 
<div id="rightcontent">
<div id="Description"><$ BlogDescription $></ div>
O <$ BlogDescription $> tag é semelhante ao <$ BlogTitle $> tag vimos anteriormente. Ele irá exibir a descrição do seu blog. 
<p>

<div id="profile-container">
<div class="SideBarTitle"> ABOUT ME </ div>

<dl class="profile-datablock">
<dt class="profile-img">
  <img src = "<$ BlogOwnerPhotoUrl $>"
  width = "68" alt = "" />
</ dt>
<dd class="profile-data"> <strong> Nome: </ strong> 
  <$ BlogOwnerNickname $></ dd>
<dd class="profile-data"> <strong> Local: </ strong> 
  <$ BlogOwnerLocation $></ dd>

</ dl>
<p class="profile-textblock">
<$ BlogOwnerAboutMe $>
</ p>
<p class="profile-link">
<a href = "<$ BlogOwnerProfileUrl $>"> Ver o meu perfil </ a>
</ p>

</ div>
Esta seção contém informações do seu perfil, incluindo um link para a página com o perfil completo. Todas elas possuem nomes bem descritivos, como <$ BlogOwnerNickname $>, Então você pode dizer quais informações elas para fora.
Outra coisa comum para ter em sua barra lateral é uma lista de todos os seus links de arquivos. 
<div class="SideBarTitle"> ARQUIVOS </ div> 

<BloggerArchives>
<a href = "<$ BlogArchiveURL $>"><$ BlogArchiveName $></ a>
</ BloggerArchives> 

<br /> </ p>
O <BloggerArchives> tags são um pouco mais do tipo de repetição. Eles vão imprimir a linha de código entre eles para cada um dos documentos do arquivo.
Se há alguma coisa que você quer em sua barra lateral (outros links, mais texto, etc) você pode incluí-la aqui. Você pode copiar a formatação para o título arquivos se você quiser fazer mais cabeçalhos de correspondência.
Então, naturalmente, no final do modelo, temos o nosso onipresente Powered by Blogger botão: 
<br />
<p style="text-align:center">
<a href="http://www.blogger.com">
<img alt = "Powered by Blogger" border = "0"
http://buttons.blogger.com/bloggerbutton1.gif src = "">
</ a>

</ p>

</ div>

</ body>
</ html>
E isso é o fim do nosso modelo. Se você quiser usar este modelo ou modificá-lo, você pode encontrar lista com os nossos outros modelos como "Tekka".

FONTE DESTA PESQUISA:
http://www.google.com/support/blogger/bin/answer.py?hl=en&topic=8930&answer=42068



Artigos recomendados e discussões

Recursos de ajuda

FONTE DESTA PESQUISA:
http://www.google.com/support/blogger/bin/answer.py?hl=en&topic=8930&answer=42068
Tags
Reactions

Postar um comentário

2 Comentários

  1. claudine ribeiro10 de dezembro de 2009 às 14:53

    Olá amiga Edilene, maravilhosa explicação. Tenho dois problemas, o primeiro é que em vez de aparecer aparece modelo de layout e não sei como comsertar; o outro é que não consigo inserir nenhuma tag no html, pois só indica erro de formatação, eu uso o IE e já soube que ele faz isso.

        Bjs.

    ResponderExcluir
  2. flo10 de dezembro de 2009 às 15:58

    Claudine
    eu uso o mozzila
    e o google chrome

    e tem vez que tenho ate de mudadr de pc,
    pra dar certo,
    o IE 8
    num uso, da mui problemas
    qualquer coisa que eu puder,
    pode falar
    ok

    ResponderExcluir


Mensagem do formulário de comentário:
♥