COMO ADICIONAR TOP SEMANAL
| .01 | Nome do Post |
| .02 | Nome do Post |
| .03 | Nome do Post |
| .04 | Nome do Post |
| .05 | Nome do Post |
| .06 | Nome do Post |
| .07 | Nome do Post |
| .08 | Nome do Post |
| .09 | Nome do Post |
| .10 | Nome do Post |
CONTADOR DE POSTAGEM E COMENTARIOS
Vá em Layout e depois em Adicionar um Gadget e clique em HTML/JavaScript
Copie o código abaixo
<center><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><div style="width:108px; height:43px;margin-bottom:5px; position:relative;font:12px
Arial,Verdana, Helvetica, sans-serif;"><span style="position: absolute; top: 4px; right: 15px;"><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></span><span style="position: absolute; bottom: 4px; right: 15px;"><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script></span><img src="https://dl.dropbox.com/u/6009047/count.png" /></div></center>
Depois cole o código acima em HTML/JavaScript, e salve.
Comentem!
Vá em layout, clique em Adicionar um Gadget, depois em HTML/SCRIPT e coque o código abaixo:
<!-- Descer -->
<p><a style="display: scroll; position: fixed; bottom: 5px; left: 5px;" title="Descer Página" href="#GoDown"><img style="border: 0;" src="http://images.comunidades.net/sup/supercreate/desceraoxat.png" alt="" /></a> <a id="GoDown" name="GoDown"></a></p>
<!-- Fim -->
Imagem que sera usada:http://images.comunidades.net/sup/supercreate/desceraoxat.png
<p><a style="display: scroll; position: fixed; bottom: 5px; left: 5px;" title="Descer Página" href="#GoDown"><img style="border: 0;" src="http://images.comunidades.net/sup/supercreate/desceraoxat.png" alt="" /></a> <a id="GoDown" name="GoDown"></a></p>
<!-- Fim -->
Imagem que sera usada:http://images.comunidades.net/sup/supercreate/desceraoxat.png
Vc pode trocar pela sua.
Comentem!
TROCAR LINKS DE NAVECAÇOE DE PAGINA POR IMAGEM
Hoje estarei ensinando a trocar os links que ficam no fim da página, que possibilita a navegação entre os posts por imagens.
Já estou usando aqui no Códigos Blog e agora vou fazer ensinar a você fazer isso também, a diferença é que vou fazer tudo, passo por passo para você fazer também no seu template.
1º - Salve o template como sempre, caso tenha problemas você tem o template salvo;
2º - Entre no blogger, e siga: "Layout", "Editar HTML", marque a janela: "Expandir modelos de widgets";
3º - Procure (Ctrl + F):
1º - Salve o template como sempre, caso tenha problemas você tem o template salvo;
2º - Entre no blogger, e siga: "Layout", "Editar HTML", marque a janela: "Expandir modelos de widgets";
3º - Procure (Ctrl + F):
<data:newerPageTitle/>
Substitua por:
<img alt='Página Anterior' border='0' src='http://img169.imageshack.us/img169/9415/anteriorhi3.gif'/>
4º - Procure (Ctrl +F):
<data:olderPageTitle/>
Substitua por:
<img alt='Próxima Página' border='0' src='http://img140.imageshack.us/img140/3741/postagens.jpg'/>
5º - Procure (Ctrl +F):
<data:homeMsg/>
Substitua por:
<img alt='Home' border='0' src='http://img524.imageshack.us/img524/8104/iniciocf8.gif'/>6º - Teste, se tudo está como deveria, salve!
Pronto! Se quiser usar imagens diferentes, faça a sua, hospede e substitua os links das imagens pelas novas.
COLOCANDO BUSCA NO BLOG
Vá em Modelo, Adicionar Elemento de Página e escolha HTML/JavaScript e cole este código:
<form id="searchthis" action="http://ENDEREÇO DO SEU BLOG/search" style="display: inline;" method="get">
<table style="width: 200px; height: 100%;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="middle">
<input id="b-query" name="q" type="text"/>
</td>
<td valign="middle" class="navbutton">
<input id="submit" tabindex="1" value="Busca" name="submit" type="submit"/>
</td>
</tr>
</tbody>
</table>
</form>
Coloque o endereço do seu blog onde está sinalizado mas não altere o /search que vem em seguida. Em width você estipula a largura da caixa de busca e em height a altura.
COMO PERSONALIZAR CONTADOR DE VISITA
Bom galera tou aqui com um tutorial bem legal e facil como cria um contador personalizado para seu blog
SIMPLES PEGUE ESSE CODIGO AQUI
<div style="background:url(endereço da imagem) left no-repeat; height: 100px; width: 256px;"><div style='float:left; padding-top:68px; padding-left:155px;'>código do contador de visitas</div></div>
FAÇA VOCE MESMO SEU AVATAR
COLOCAR BOTAO SEGUIR FLUTUANTE
1º - Faça Login no Blogger
2º - Ir em Design
3º - Clique em Adicionar um Gadget
4º - Depois clique em HTML/JavaScript
5º - Clique em Editar HTML e cole o seguinte código:
FAÇA VOCE MESMO SEU AVATAR
Ae pessoal eu to postando um tuto
de como fazer um avatar
2º Click em " Create! "
3º Ae vc escolhe o seu sexo e fassa sue avatar
COLOCAR BOTAO SUBIR AO TOPO
1° Procure por: ]]></b:skin>
E antes do ]]></b:skin> cole o seguinte código:
#toTop {width:50px; /* Largura do botão * /background: #000000; /* Cor do botão*/border:1px solid #FFF; /* Cor da borda */text-align:center; /* Alinhamento do texto */padding:5px; /* Distancia entre texto e borda */position:fixed; /* Posição que faz com que ele corra por toda a página*/bottom:5px;right:5px;cursor:pointer;color:#FFFFFF; /* Cor da letra */text-decoration:none;font-weight:700; /* Tamanho da letra */-moz-border-radius:5px; /* Definições para o angulo do botão */-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
Depois disso Procure por:
</body>
E acima cole o codigo abaixo:
<a href='#' id='toTop'>▲ Topo</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
COLOCAR BOTAO SEGUIR FLUTUANTE
2º - Ir em Design
3º - Clique em Adicionar um Gadget
4º - Depois clique em HTML/JavaScript
5º - Clique em Editar HTML e cole o seguinte código:
<a href="http://www.blogger.com/follow-blog.g?blogID=O Seu ID" style="display:scroll;position:fixed;top:10px;left:12px;" target="_blank" title="Clique Para Seguir Nome De Seu Blog"><img src="http://th1010.photobucket.com/albums/af230/daianepiva/th_seguir.png" /></a>
Observação: Na Sua Caixa De Endereço Do Navegador Você Vai Encontrar Isso:
http://www.blogger.com/rearrange?blogID=Aqui Vai Estar Seu ID
Onde Está Escrito Aqui Vai Estar Seu ID Você Copia O ID E Volta No Codigo e substitui com o seu ID . E Onde Está Escrito Nome De Seu Blog Você digita o nome do seu blog.
Caso Você Queira Mudar A Imagem Do Botão, substitua a onde está esse Link:
http://th1010.photobucket.com/albums/af230/daianepiva/th_seguir.png
por um outro endereço de imagem.
COMPREENDENDO O HTML DO SEU BLOG
Body: é o corpo do blog. É onde você muda o plano de fundo (Background), colocando uma cor ou uma imagem,se
preferir.
#header: é o cabeçalho do blog, onde costuma ficar o título do blog. É o topo do blog. Geralmente fazem parte do trecho de cabeçalho as seguintes variáveis:
#header-wrapper - corresponde a toda a área do cabeçalho.
#header-inner
#header - corresponde a coluna dentro do cabeçalho.
#header h1 - corresponde ao nome do cabeçalho (título do blog).
#header a - corresponde ao link do nome do cabeçalho.
#header .description - corresponde a descrição do blog que fica dentro do cabeçalho.
#outer-wrapper: é a área total das colunas. Geralmente abrange toda a área do cabeçalho, coluna de postagens, sidebar, footer.
#main-wrapper: é a coluna total da área de postagens nos templates mínima a na maioria dos templates modificados. Este trecho abrange tudo que estiver contido na coluna central de postagens: coluna de posts, rodapé dos posts, área de comentários, links de navegação.
Nos templates Designer de Modelo,este trecho está representado por: .main-outer
Veja mais em: Personalizar Área de Postagem (Main-Wrapper)
#sidebar-wrapper: é é a área total da coluna onde ficam os gadgets/widgets e o perfil. Geralmente fazem parte do trecho da sidebar as seguintes variáveis:
.sidebar - é o interior da Coluna
.sidebar ul - refere a lista de links inteira
.sidebar li - Se refere aos itens das listas de links
.sidebar .widget - é onde fica o conteúdo de cada gadget.
.sidebar h2 - se refere ao titulo dos gadgets.
Veja mais sobre sidebar em: Personalizando a sidebar
#newsidebar-wrapper: é a nova coluna. (geralmente os blogs com 3 colunas possuem este código).
#footer: é o rodapé do blog. Geralmente faz parte parte deste trechos as variáveis:
#footer
#footer-wrapper
.post: corresponde a coluna de postagens. Nesta coluna fica todo o espaço ocupado pela postagem (data, título , paragrafo, imagem do post, rodapé do post, link de comentários etc)Geralmente é representada pelas variáveis:
.post
.post-outer
.post-body (corpo do texto da postagem. É neste trecho que você define a fonte do texto de seus posts.)
Se quiser conhecer um pouco mais sobre a área da coluna de postagem, leia:
• Personalizando a área do Post - (Parte1)
• Personalizando a área do Post - (Parte2)
.post-footer corresponde a área de rodapé dos posts.
Geralmente fazem parte deste trecho as variaveis:
post-footer-line-1
post-footer-line-2
post-footer-line-3
Se quiser conhecer um pouco mais sobre a área do Rodapé dos seus posts:
• Adicionar elementos na linha do Rodapé
• Personalizar o Rodapé dos Posts
.comment-link: corresponde aos links de comentários na página inicial. Geralmente fica dentro da coluna do rodapé do post.
.post img: corresponde as imagens dentro do post.
.post-body img: correspondem as imagens publicada na postagem.
.post blockquote: corresponde aos trechos de textos destacados (citações).
#comments h4: corresponde ao titulo "Comentários" dentro da página interna.
Sobre a área de comentários, recomendo a leitura do artigo: Desmembrando a Área de Comentários
#blog-pager: corresponde aos links de navegação do blog. Fazem, parte deste trecho: #blog-pager-newer-link e #blog-pager-older-link.
Se quiser, confira algumas formas de personalização desta variável em:
• Alterar Link Postagens Mais Antigas e Recentes
• Customizar os Links de Navegação do Blogger
.feed-links: corresponde ao trecho "Assinar: Postagens (Atom)".
.profile: corresponde ao trecho do gadget "Perfil".
Padding: determina as margens internas, é a distância entre o conteúdo de determinado elemento e a borda.
Ex: padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
Margin: determina a distância de um elemento para outro.
Ex: margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
Se quiser conhecer um pouco mais sobre padding e margin, leia:
• Diferenças entre Margin e Padding
width: determina a largura do elemento.
height: determina a altura do elemento.
float:determina a flutuação do elemento(posição em que se encontra).
Exemplos:
float:left - elemento posicionado à esquerda.
float:right - elemento posicionado à direita.
float:center - elemento posicionado ao centro.
a:link : são os links ativos do seu blog
a:visited : São os Links que já foram visitados.
a:hover é a forma que o link ficará quando passamos o Mouse em cima dele.
Se quiser conhecer um pouco mais sobre links, leia:
• Conhecendo a Propriedade CSS Link
Ela tem o seguinte forma < > quando aberta.
Veja exemplos de algumas tags básicas abaixo:
Lembrando que toda Tag que for aberta < > deverá ser fechada no final </> , caso contrário o código não será aceito.
Body: é o corpo do blog. É onde você muda o plano de fundo (Background), colocando uma cor ou uma imagem,se preferir.
#header: é o cabeçalho do blog, onde costuma ficar o título do blog. É o topo do blog. Geralmente fazem parte do trecho de cabeçalho as seguintes variáveis:
#header-wrapper - corresponde a toda a área do cabeçalho.
#header-inner
#header - corresponde a coluna dentro do cabeçalho.
#header h1 - corresponde ao nome do cabeçalho (título do blog).
#header a - corresponde ao link do nome do cabeçalho.
#header .description - corresponde a descrição do blog que fica dentro do cabeçalho.
#outer-wrapper: é a área total das colunas. Geralmente abrange toda a área do cabeçalho, coluna de postagens, sidebar, footer.
#main-wrapper: é a coluna total da área de postagens nos templates mínima a na maioria dos templates modificados. Este trecho abrange tudo que estiver contido na coluna central de postagens: coluna de posts, rodapé dos posts, área de comentários, links de navegação.
Nos templates Designer de Modelo,este trecho está representado por: .main-outer
Veja mais em: Personalizar Área de Postagem (Main-Wrapper)
#sidebar-wrapper: é é a área total da coluna onde ficam os gadgets/widgets e o perfil. Geralmente fazem parte do trecho da sidebar as seguintes variáveis:
.sidebar - é o interior da Coluna
.sidebar ul - refere a lista de links inteira
.sidebar li - Se refere aos itens das listas de links
.sidebar .widget - é onde fica o conteúdo de cada gadget.
.sidebar h2 - se refere ao titulo dos gadgets.
Veja mais sobre sidebar em: Personalizando a sidebar
#newsidebar-wrapper: é a nova coluna. (geralmente os blogs com 3 colunas possuem este código).
#footer: é o rodapé do blog. Geralmente faz parte parte deste trechos as variáveis:
#footer
#footer-wrapper
.post: corresponde a coluna de postagens. Nesta coluna fica todo o espaço ocupado pela postagem (data, título , paragrafo, imagem do post, rodapé do post, link de comentários etc)Geralmente é representada pelas variáveis:
.post
.post-outer
.post-body (corpo do texto da postagem. É neste trecho que você define a fonte do texto de seus posts.)
Se quiser conhecer um pouco mais sobre a área da coluna de postagem, leia:
• Personalizando a área do Post - (Parte1)
• Personalizando a área do Post - (Parte2)
.post-footer corresponde a área de rodapé dos posts.
Geralmente fazem parte deste trecho as variaveis:
post-footer-line-1
post-footer-line-2
post-footer-line-3
Se quiser conhecer um pouco mais sobre a área do Rodapé dos seus posts:
• Adicionar elementos na linha do Rodapé
• Personalizar o Rodapé dos Posts
.comment-link: corresponde aos links de comentários na página inicial. Geralmente fica dentro da coluna do rodapé do post.
.post img: corresponde as imagens dentro do post.
.post-body img: correspondem as imagens publicada na postagem.
.post blockquote: corresponde aos trechos de textos destacados (citações).
#comments h4: corresponde ao titulo "Comentários" dentro da página interna.
Sobre a área de comentários, recomendo a leitura do artigo: Desmembrando a Área de Comentários
#blog-pager: corresponde aos links de navegação do blog. Fazem, parte deste trecho: #blog-pager-newer-link e #blog-pager-older-link.
Se quiser, confira algumas formas de personalização desta variável em:
• Alterar Link Postagens Mais Antigas e Recentes
• Customizar os Links de Navegação do Blogger
.feed-links: corresponde ao trecho "Assinar: Postagens (Atom)".
.profile: corresponde ao trecho do gadget "Perfil".
Padding: determina as margens internas, é a distância entre o conteúdo de determinado elemento e a borda.
Ex: padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
Margin: determina a distância de um elemento para outro.
Ex: margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
Se quiser conhecer um pouco mais sobre padding e margin, leia:
• Diferenças entre Margin e Padding
width: determina a largura do elemento.
height: determina a altura do elemento.
float:determina a flutuação do elemento(posição em que se encontra).
Exemplos:
float:left - elemento posicionado à esquerda.
float:right - elemento posicionado à direita.
float:center - elemento posicionado ao centro.
a:link : são os links ativos do seu blog
a:visited : São os Links que já foram visitados.
a:hover é a forma que o link ficará quando passamos o Mouse em cima dele.
Se quiser conhecer um pouco mais sobre links, leia:
• Conhecendo a Propriedade CSS Link
Ela tem o seguinte forma < > quando aberta.
Veja exemplos de algumas tags básicas abaixo:
Lembrando que toda Tag que for aberta < > deverá ser fechada no final </> , caso contrário o código não será aceito.
http://www.blogger.com/rearrange?blogID=Aqui Vai Estar Seu ID
Onde Está Escrito Aqui Vai Estar Seu ID Você Copia O ID E Volta No Codigo e substitui com o seu ID . E Onde Está Escrito Nome De Seu Blog Você digita o nome do seu blog.
Caso Você Queira Mudar A Imagem Do Botão, substitua a onde está esse Link:
http://th1010.photobucket.com/albums/af230/daianepiva/th_seguir.png
por um outro endereço de imagem.
Espero que tenham gostado e por favor deixem comentários!!!!
#header: é o cabeçalho do blog, onde costuma ficar o título do blog. É o topo do blog. Geralmente fazem parte do trecho de cabeçalho as seguintes variáveis:
#header-wrapper - corresponde a toda a área do cabeçalho.
#header-inner
#header - corresponde a coluna dentro do cabeçalho.
#header h1 - corresponde ao nome do cabeçalho (título do blog).
#header a - corresponde ao link do nome do cabeçalho.
#header .description - corresponde a descrição do blog que fica dentro do cabeçalho.
#outer-wrapper: é a área total das colunas. Geralmente abrange toda a área do cabeçalho, coluna de postagens, sidebar, footer.
#main-wrapper: é a coluna total da área de postagens nos templates mínima a na maioria dos templates modificados. Este trecho abrange tudo que estiver contido na coluna central de postagens: coluna de posts, rodapé dos posts, área de comentários, links de navegação.
Nos templates Designer de Modelo,este trecho está representado por: .main-outer
Veja mais em: Personalizar Área de Postagem (Main-Wrapper)
#sidebar-wrapper: é é a área total da coluna onde ficam os gadgets/widgets e o perfil. Geralmente fazem parte do trecho da sidebar as seguintes variáveis:
.sidebar - é o interior da Coluna
.sidebar ul - refere a lista de links inteira
.sidebar li - Se refere aos itens das listas de links
.sidebar .widget - é onde fica o conteúdo de cada gadget.
.sidebar h2 - se refere ao titulo dos gadgets.
Veja mais sobre sidebar em: Personalizando a sidebar
#newsidebar-wrapper: é a nova coluna. (geralmente os blogs com 3 colunas possuem este código).
#footer: é o rodapé do blog. Geralmente faz parte parte deste trechos as variáveis:
#footer
#footer-wrapper
.post: corresponde a coluna de postagens. Nesta coluna fica todo o espaço ocupado pela postagem (data, título , paragrafo, imagem do post, rodapé do post, link de comentários etc)Geralmente é representada pelas variáveis:
.post
.post-outer
.post-body (corpo do texto da postagem. É neste trecho que você define a fonte do texto de seus posts.)
Se quiser conhecer um pouco mais sobre a área da coluna de postagem, leia:
• Personalizando a área do Post - (Parte1)
• Personalizando a área do Post - (Parte2)
.post-footer corresponde a área de rodapé dos posts.
Geralmente fazem parte deste trecho as variaveis:
post-footer-line-1
post-footer-line-2
post-footer-line-3
Se quiser conhecer um pouco mais sobre a área do Rodapé dos seus posts:
• Adicionar elementos na linha do Rodapé
• Personalizar o Rodapé dos Posts
.comment-link: corresponde aos links de comentários na página inicial. Geralmente fica dentro da coluna do rodapé do post.
.post img: corresponde as imagens dentro do post.
.post-body img: correspondem as imagens publicada na postagem.
.post blockquote: corresponde aos trechos de textos destacados (citações).
#comments h4: corresponde ao titulo "Comentários" dentro da página interna.
Sobre a área de comentários, recomendo a leitura do artigo: Desmembrando a Área de Comentários
#blog-pager: corresponde aos links de navegação do blog. Fazem, parte deste trecho: #blog-pager-newer-link e #blog-pager-older-link.
Se quiser, confira algumas formas de personalização desta variável em:
• Alterar Link Postagens Mais Antigas e Recentes
• Customizar os Links de Navegação do Blogger
.feed-links: corresponde ao trecho "Assinar: Postagens (Atom)".
.profile: corresponde ao trecho do gadget "Perfil".
Padding: determina as margens internas, é a distância entre o conteúdo de determinado elemento e a borda.
Ex: padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
Margin: determina a distância de um elemento para outro.
Ex: margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
Se quiser conhecer um pouco mais sobre padding e margin, leia:
• Diferenças entre Margin e Padding
width: determina a largura do elemento.
height: determina a altura do elemento.
float:determina a flutuação do elemento(posição em que se encontra).
Exemplos:
float:left - elemento posicionado à esquerda.
float:right - elemento posicionado à direita.
float:center - elemento posicionado ao centro.
a:link : são os links ativos do seu blog
a:visited : São os Links que já foram visitados.
a:hover é a forma que o link ficará quando passamos o Mouse em cima dele.
Se quiser conhecer um pouco mais sobre links, leia:
• Conhecendo a Propriedade CSS Link
O QUE SÃO 'TAGS':
TAG significa etiqueta em inglês, é ela que informa ao navegador como determinado elemento deve ser exibido no seu blog.Ela tem o seguinte forma < > quando aberta.
Veja exemplos de algumas tags básicas abaixo:
<p> - parágrafo
<b> - negrito
<i> ou <em> - itálico
<u> - sublinhado
<br> - quebra de linha
<ul> e <ol> - são as tags que indicam listas
<a> - são as tags que indicam links
<span> - tags que servem para estilizar textoLembrando que toda Tag que for aberta < > deverá ser fechada no final </> , caso contrário o código não será aceito.
#header: é o cabeçalho do blog, onde costuma ficar o título do blog. É o topo do blog. Geralmente fazem parte do trecho de cabeçalho as seguintes variáveis:
#header-wrapper - corresponde a toda a área do cabeçalho.
#header-inner
#header - corresponde a coluna dentro do cabeçalho.
#header h1 - corresponde ao nome do cabeçalho (título do blog).
#header a - corresponde ao link do nome do cabeçalho.
#header .description - corresponde a descrição do blog que fica dentro do cabeçalho.
#outer-wrapper: é a área total das colunas. Geralmente abrange toda a área do cabeçalho, coluna de postagens, sidebar, footer.
#main-wrapper: é a coluna total da área de postagens nos templates mínima a na maioria dos templates modificados. Este trecho abrange tudo que estiver contido na coluna central de postagens: coluna de posts, rodapé dos posts, área de comentários, links de navegação.
Nos templates Designer de Modelo,este trecho está representado por: .main-outer
Veja mais em: Personalizar Área de Postagem (Main-Wrapper)
#sidebar-wrapper: é é a área total da coluna onde ficam os gadgets/widgets e o perfil. Geralmente fazem parte do trecho da sidebar as seguintes variáveis:
.sidebar - é o interior da Coluna
.sidebar ul - refere a lista de links inteira
.sidebar li - Se refere aos itens das listas de links
.sidebar .widget - é onde fica o conteúdo de cada gadget.
.sidebar h2 - se refere ao titulo dos gadgets.
Veja mais sobre sidebar em: Personalizando a sidebar
#newsidebar-wrapper: é a nova coluna. (geralmente os blogs com 3 colunas possuem este código).
#footer: é o rodapé do blog. Geralmente faz parte parte deste trechos as variáveis:
#footer
#footer-wrapper
.post: corresponde a coluna de postagens. Nesta coluna fica todo o espaço ocupado pela postagem (data, título , paragrafo, imagem do post, rodapé do post, link de comentários etc)Geralmente é representada pelas variáveis:
.post
.post-outer
.post-body (corpo do texto da postagem. É neste trecho que você define a fonte do texto de seus posts.)
Se quiser conhecer um pouco mais sobre a área da coluna de postagem, leia:
• Personalizando a área do Post - (Parte1)
• Personalizando a área do Post - (Parte2)
.post-footer corresponde a área de rodapé dos posts.
Geralmente fazem parte deste trecho as variaveis:
post-footer-line-1
post-footer-line-2
post-footer-line-3
Se quiser conhecer um pouco mais sobre a área do Rodapé dos seus posts:
• Adicionar elementos na linha do Rodapé
• Personalizar o Rodapé dos Posts
.comment-link: corresponde aos links de comentários na página inicial. Geralmente fica dentro da coluna do rodapé do post.
.post img: corresponde as imagens dentro do post.
.post-body img: correspondem as imagens publicada na postagem.
.post blockquote: corresponde aos trechos de textos destacados (citações).
#comments h4: corresponde ao titulo "Comentários" dentro da página interna.
Sobre a área de comentários, recomendo a leitura do artigo: Desmembrando a Área de Comentários
#blog-pager: corresponde aos links de navegação do blog. Fazem, parte deste trecho: #blog-pager-newer-link e #blog-pager-older-link.
Se quiser, confira algumas formas de personalização desta variável em:
• Alterar Link Postagens Mais Antigas e Recentes
• Customizar os Links de Navegação do Blogger
.feed-links: corresponde ao trecho "Assinar: Postagens (Atom)".
.profile: corresponde ao trecho do gadget "Perfil".
Padding: determina as margens internas, é a distância entre o conteúdo de determinado elemento e a borda.
Ex: padding: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
Margin: determina a distância de um elemento para outro.
Ex: margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda).
Se quiser conhecer um pouco mais sobre padding e margin, leia:
• Diferenças entre Margin e Padding
width: determina a largura do elemento.
height: determina a altura do elemento.
float:determina a flutuação do elemento(posição em que se encontra).
Exemplos:
float:left - elemento posicionado à esquerda.
float:right - elemento posicionado à direita.
float:center - elemento posicionado ao centro.
a:link : são os links ativos do seu blog
a:visited : São os Links que já foram visitados.
a:hover é a forma que o link ficará quando passamos o Mouse em cima dele.
Se quiser conhecer um pouco mais sobre links, leia:
• Conhecendo a Propriedade CSS Link
O QUE SÃO 'TAGS':
TAG significa etiqueta em inglês, é ela que informa ao navegador como determinado elemento deve ser exibido no seu blog.Ela tem o seguinte forma < > quando aberta.
Veja exemplos de algumas tags básicas abaixo:
<p> - parágrafo
<b> - negrito
<i> ou <em> - itálico
<u> - sublinhado
<br> - quebra de linha
<ul> e <ol> - são as tags que indicam listas
<a> - são as tags que indicam links
<span> - tags que servem para estilizar textoLembrando que toda Tag que for aberta < > deverá ser fechada no final </> , caso contrário o código não será aceito.
Assinar:
Postar comentários
Área do Visitante ( 
Estatísticas do Blog
0 comentários:
Postar um comentário