Mostrando postagens com marcador Dicas. Mostrar todas as postagens
Preâmbulo
Muita, muita gente mesmo me pergunta como fazer um template para o Blogger e decidi então explicar, passo a passo, o meu método. Que isto fique claro já agora: vou ensinar aqui como eu faço, pois não tenho à menor idéia do método de outros blogueiros que também criam templates. Este tutorial vai ser longo, por isso se dividirá em várias partes. Posteriormente publicarei como faço para converter temas do Wordpress para o Blogger.
Antes de tudo é necessário algum conhecimento em HTML e CSS. Existem diversos tutoriais sobre o assunto; uma rápida pesquisa no Google trará excelentes resultados logo na primeira página. Recomendo o site do Maujor e o Apostilando, onde é possível baixar diversas apostilas sobre os dois temas.
Também que fique claro que não pretendo aqui dar aulas sobre HTML e CSS e as explicações serão dadas da maneira mais simples e acessível possível. Para quem pretende se aprofundar no assunto, procure os mestres nos sites que já indiquei e em outros tantos.
Que programa usar para criar o template?
Na verdade eu não uso programa nenhum. Faço modificações diretamente em um blog de testes e vou visualizando, até que fique ao meu gosto. Para criar ou editar as imagens que utilizo, uso tanto o Photofiltre Studio 09 quanto o Photoshop. Uma opção de programa gratuito é a versão free do Photofiltre, um programa francês que pode ser traduzido para o Português. Após instalar o programa, faça o download deste documento e descompacte-o dentro da pasta do Photofiltre, em Arquivos de Programas. Feito isso, vá até a pasta do Photofiltre e apague o arquivo EN, como mostra a imagem:
Abra o programa e ele estará traduzido para o Português.
Introdução
Tendo escolhido um programa de edição de imagens, crie um blog de testes, onde você fará o seu primeiro template. Eu criei um que vou chamar Aula Template e escolhí para ele o modelo Mínima que é o mais fácil de modificar. Agora vamos conhecer a estrutura da página onde se encontra o meu blog. Clique em Editar HTML. O que você verá é isso:
O trecho destacado diz ao navegador qual a linguagem de marcação que está sendo utilizada na página (XHTML) e você não deve modificar nada que está contido ali. É o início do nosso documento HTML e a respectiva tag de fechamento no final (role toda a página) é .
Um documento HTML se compõe da seguinte estrutura básica:
cabeçalho: aqui está contido o estilo da página - CSS
corpo - aqui está contida a estrutura da página, seus elementos.
Note que todas as tags devem ser fechadas respeitando uma hierarquia. O não fechamento de qualquer tag resultará em erro e rejeição da estrutura.
Início do código CSS
O código CSS, que dá estilo à página, começa com : . Tudo o que estiver contido entre estas duas tags refere-se ao estilo da página (aparência) e não à sua estrutura. Não é possível criar um novo elemento (uma coluna, por exemplo) com CSS. O CSS irá apenas determinar a aparência deste bloco, deste elemento.
Imediatamente após o fechamento da tag do CSS, encontra-se , fechando o cabeçalho da página e imediatamente após está , dando início ao corpo do documento:
É entre e que se criam os blocos que serão mostrados na página: colunas, menus, etc.
Para começar, vamos nos deter apenas em modificar a aparência da página atual e deixemos para criar novos elementos mais para frente.
Conhecendo o CSS
CSS é uma sigla em inglês para Cascading Style Sheet, que foi traduzido para folha de estilo em cascata e é um mecanismo para adicionar estilo (fontes, cores, etc) para documentos web.
Regra CSS é uma declaração que segue uma linguagem própria e que define como será aplicado estilo a um ou mais elementos HTML . Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais simples, compõe-se de três partes: um seletor, uma propriedade e um valor, que devem ser apresentados conforme mostrado abaixo:
seletor { propriedade: valor; }
Seletor: genericamente, é o elemento HTML para o qual a regra será válida (por exemplo: , , ,
Muita, muita gente mesmo me pergunta como fazer um template para o Blogger e decidi então explicar, passo a passo, o meu método. Que isto fique claro já agora: vou ensinar aqui como eu faço, pois não tenho à menor idéia do método de outros blogueiros que também criam templates. Este tutorial vai ser longo, por isso se dividirá em várias partes. Posteriormente publicarei como faço para converter temas do Wordpress para o Blogger.
Antes de tudo é necessário algum conhecimento em HTML e CSS. Existem diversos tutoriais sobre o assunto; uma rápida pesquisa no Google trará excelentes resultados logo na primeira página. Recomendo o site do Maujor e o Apostilando, onde é possível baixar diversas apostilas sobre os dois temas.
Também que fique claro que não pretendo aqui dar aulas sobre HTML e CSS e as explicações serão dadas da maneira mais simples e acessível possível. Para quem pretende se aprofundar no assunto, procure os mestres nos sites que já indiquei e em outros tantos.
Que programa usar para criar o template?
Na verdade eu não uso programa nenhum. Faço modificações diretamente em um blog de testes e vou visualizando, até que fique ao meu gosto. Para criar ou editar as imagens que utilizo, uso tanto o Photofiltre Studio 09 quanto o Photoshop. Uma opção de programa gratuito é a versão free do Photofiltre, um programa francês que pode ser traduzido para o Português. Após instalar o programa, faça o download deste documento e descompacte-o dentro da pasta do Photofiltre, em Arquivos de Programas. Feito isso, vá até a pasta do Photofiltre e apague o arquivo EN, como mostra a imagem:
Abra o programa e ele estará traduzido para o Português.
Introdução
Tendo escolhido um programa de edição de imagens, crie um blog de testes, onde você fará o seu primeiro template. Eu criei um que vou chamar Aula Template e escolhí para ele o modelo Mínima que é o mais fácil de modificar. Agora vamos conhecer a estrutura da página onde se encontra o meu blog. Clique em Editar HTML. O que você verá é isso:
O trecho destacado diz ao navegador qual a linguagem de marcação que está sendo utilizada na página (XHTML) e você não deve modificar nada que está contido ali. É o início do nosso documento HTML e a respectiva tag de fechamento no final (role toda a página) é .
Um documento HTML se compõe da seguinte estrutura básica:
cabeçalho: aqui está contido o estilo da página - CSS
corpo - aqui está contida a estrutura da página, seus elementos.
Note que todas as tags devem ser fechadas respeitando uma hierarquia. O não fechamento de qualquer tag resultará em erro e rejeição da estrutura.
Início do código CSS
O código CSS, que dá estilo à página, começa com : . Tudo o que estiver contido entre estas duas tags refere-se ao estilo da página (aparência) e não à sua estrutura. Não é possível criar um novo elemento (uma coluna, por exemplo) com CSS. O CSS irá apenas determinar a aparência deste bloco, deste elemento.
Imediatamente após o fechamento da tag do CSS, encontra-se , fechando o cabeçalho da página e imediatamente após está , dando início ao corpo do documento:
É entre e que se criam os blocos que serão mostrados na página: colunas, menus, etc.
Para começar, vamos nos deter apenas em modificar a aparência da página atual e deixemos para criar novos elementos mais para frente.
Conhecendo o CSS
CSS é uma sigla em inglês para Cascading Style Sheet, que foi traduzido para folha de estilo em cascata e é um mecanismo para adicionar estilo (fontes, cores, etc) para documentos web.
Regra CSS é uma declaração que segue uma linguagem própria e que define como será aplicado estilo a um ou mais elementos HTML . Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais simples, compõe-se de três partes: um seletor, uma propriedade e um valor, que devem ser apresentados conforme mostrado abaixo:
seletor { propriedade: valor; }
Seletor: genericamente, é o elemento HTML para o qual a regra será válida (por exemplo: , , ,
, , etc...);
Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, background, color,etc...).
Valor: é a característica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)
Um exemplo prático pode ser encontrado no topo do código do seu template de testes:
body {
background:$bgcolor
Onde body é o seletor (o elemento HTML que receberá o estilo) , background a propriedade deste elemento e $bgcolor o valor
Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. Ex:
body{
background: $bgcolor;
margin:0; }
(fonte das informações: Maujor)
No topo da folha de estilos do seu blog de testes você encontrará Variable definitions, que são valores que podem ser modificados no Painel Fontes e Cores do Blogger. Substituindo valores como #ffffff (cor branca) por uma variável ($bgcolor, por exemplo) você poderá alterar esta cor no painel de Fontes e Cores sem precisar mexer no código do template. Quanto mais variáveis forem criadas, maior a facilidade de mudar cores e fontes dos elementos da página, através do painel. Muitas vezes não se consegue mudar a cor ou fonte de um determinado template por que o autor não usou as variáveis, especificando um determinado valor diretamente em uma propriedade. Por exemplo:
body{
background: #ffffff;}
determina que o fundo da página será branco e isto só poderá ser alterado no código.
body{
background: $bgcolor;}
aqui o valor é uma variável e poderá ser alterada no painel do Blogger (Fontes e Cores).
Uma mesma variável pode ser usada em várias propriedades, contanto que se deseje que as cores mudem de maneira idêntica. Por exemplo:
body{
background: $bgcolor;}
sidebar-wrapper{
background: $bgcolor;}
Ou seja, a mesma cor escolhida no painel Fontes e Cores para Background Color será aplicada nos dois casos (fundo da página e coluna lateral igualmente brancos ou verdes, etc.)
Se você prestar atenção nas variáveis do template Mínima, verá que são poucas as opções e se você pretende futuramente mudar as cores do seu template sem precisar tornar a alterar o código, crie tantas variáveis quanto achar interessante.
Note porém que deve ser respeitada a sintaxe para cada tipo de variável:
Variável Cor:
ou seja:
Variável Fonte:
ou seja:
Sobre fontes irei me estender mais nos próximos capítulos....
Vamos começar então criando uma nova variável do tipo color, para começar:
o nome que criei, como exemplo, para esta variável é 'cordasidebar' (um nome qualquer, pois lembre-se que esta variável pode ser utilizada em qualquer propriedade, não apenas no background da sidebar), descrevi-a como Cor do Background da Sidebar (é o que irá aparecer no painel Fontes e Cores), mantive o valor #fff (branco) para default e escolhi o valor hexadecimal #CC99FF que corresponde ao lilás. Cole todo este trecho entre qualquer outra variável de sua página, como mostra a imagem:
Salve a modificação. Agora vamos ver como esta variável irá se apresentar no Painel. Clique em Fonte e Cores e se você fez tudo certinho até aqui, irá ver a nova variável assim:
Pois bem, agora que a nossa variável existe, podemos aplicá-la a qualquer propriedade de qualquer seletor onde é possível aplicar cor. Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.
Vou aplicar esta variável na propriedade background de dois seletores, header e sidebar:
#header-wrapper {
width:660px;
background: $cordasidebar;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#sidebar-wrapper {
width: 220px;
background: $cordasidebar;
float: $endSide;
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 */
}
Note que originalmente, no template Mínima, não existe a propriedade background para nenhum dos dois seletores, é preciso criá-las, como fiz aqui.
Agora que você determinou a variável na propriedade background dos dois seletores, salve e retorne ao painel fontes e cores. Note que tanto o cabeçalho quanto a sidebar estão com a mesma cor de fundo:
Nota: Para fugir das cores do padrão do painel Fontes e Cores, determine outros valores para sua variável, que podem ser escolhidas em uma tabela como essa. Copie o código html e acrescente em value, como já foi explicado.
Para finalizar esta primeira parte, como lição de casa :-) fica a sugestão de criar variáveis do tipo color para cada um destes seletores: body, outer-wrapper, header, main-wrapper, sidebar-wrapper e footer. Não se esqueça de que a propriedade background deve ser criada para todos estes seletores (menos body, que já contém).
Por hoje é só.
Descrição: Editor de Imagens, Fotos e Banners Online.
Nossa Avaliação Do Conteúdo:
Screen:
Um dos melhores sites para editar imagens ou fotos online é o Pixlr que é bem semelhante ao Photoshop e permite editar banners, fotos ou qualquer tipo de imagens, tudo online sem precisar fazer download ou instalar nada no seu computador. Entre as varias opções que já falamos para editar ou criar banners e fotos sem duvida esse é um dos melhores.
O primeiro passo é abrir uma imagem do seu computador ou criar uma nova imagem, ou seja, uma imagem vazia para você criar o que desejar, depois é só explorar o site com as muitas opções que ele oferece.
Depois de criar suas imagem pode usar como quiser no seu blog, por exemplo nas postagens, banners para parcerias ou onde mais possa imaginar. Sugerimos fazer testes e usar o menu filtro porque nele encontrará muitos efeitos interessantes nas suas imagens.
Como você pode ver na imagem acima o site permite que você selecione uma parte da imagem para usar um efeito, no caso testamos selecionando um trecho da imagem e na barra de menu usamos a opção filtro >> água agitada.
Mas isso é apenas uma demonstração que você não precisa usar os efeitos na imagem inteira, mas selecionar a parte desejada. Isso produz ótimos resultados nas suas imagens. E naturalmente quando mais tempo você mexer no site achará mais opções interessantes para criar banners e imagens personalizadas para seu blog.
Nossa Avaliação Do Conteúdo:
Screen:
Um dos melhores sites para editar imagens ou fotos online é o Pixlr que é bem semelhante ao Photoshop e permite editar banners, fotos ou qualquer tipo de imagens, tudo online sem precisar fazer download ou instalar nada no seu computador. Entre as varias opções que já falamos para editar ou criar banners e fotos sem duvida esse é um dos melhores.
O primeiro passo é abrir uma imagem do seu computador ou criar uma nova imagem, ou seja, uma imagem vazia para você criar o que desejar, depois é só explorar o site com as muitas opções que ele oferece.
Depois de criar suas imagem pode usar como quiser no seu blog, por exemplo nas postagens, banners para parcerias ou onde mais possa imaginar. Sugerimos fazer testes e usar o menu filtro porque nele encontrará muitos efeitos interessantes nas suas imagens.
Como você pode ver na imagem acima o site permite que você selecione uma parte da imagem para usar um efeito, no caso testamos selecionando um trecho da imagem e na barra de menu usamos a opção filtro >> água agitada.
Mas isso é apenas uma demonstração que você não precisa usar os efeitos na imagem inteira, mas selecionar a parte desejada. Isso produz ótimos resultados nas suas imagens. E naturalmente quando mais tempo você mexer no site achará mais opções interessantes para criar banners e imagens personalizadas para seu blog.
Descrição: Para fazer botões no seu site ou blog o jeito mais fácil é usar um estilo CSS para colocar essa imagem do botão como fundo de um texto(seus links).
Nossa Avaliação Do Conteúdo:
Nossa Avaliação Do Conteúdo:
Calma parece um pouco complicado, mas são poucas linhas de códigos e depois colocar ou modificar os botões será uma tarefa muito simples e rápida.
Antes de começar precisamos achar ou criar 2 imagens para usar como botões, elas precisam ser do mesmo tamanho porque usaremos uma quando o blog aparece e a outra quando colocamos o mouse sobre o link. Depois disso você precisa hospedar as imagens em algum lugar sugiro o ImageShack.
Agora vamos começar colocar os novos botões no seu blog, primeiro vamos colocar o estilo CSS, entre na pagina editar html, procure por body{...tem varias coisas aqui....}, antes da palavra body coloque o código abaixo:
.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(http://img254.imageshack.us/img254/6578/outa.jpg);
}
Assim fica bem fácil localizar esse código dos botões quando quiser fazer alterações nele, sua pagina editar html ficará assim:
/* Primary layout */
.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(http://img254.imageshack.us/img254/6578/outa.jpg);
}
body {background-color: $mainBgColor;
Então clique para salvar, agora vamos colocar os links onde usaremos esses botões, entre na pagina layout, clique em adicionar gadget, html/javascript e cole esse código:
Apenas faça as alterações colocando o nome e endereço dos sites que quiser, pode colocar quantos sites desejar não existe limite. Agora é só salvar e visualizar seu blog esses links já aparecerão com os botões que você fez.
Já parece tudo pronto, mas faltou explicar como alterar esses botões, o código que publicamos foi apenas um exemplo, os valores que estão no código são referentes ao tamanho do botão que usamos, então quando usar suas imagens faça os ajustes necessários.
text-indent: 5px; margem esquerda do texto
width: 210px; largura do botão
height: 30px; altura do botão
line-height: 30px; altura da linha(deve ser igual à altura do botão)
Sobre a largura do botão ainda temos que verificar se o texto de nossos links não serão grandes demais para o botão pois se o texto ocupar duas linhas a imagem do botão se repetirá e certamente o efeito visual disso é péssimo para o layout, neste caso você deve reduzir o texto do link ou refazer o botão mais largo.
Outro detalhe é o porquê usamos uma cor de fundo se já fizemos o botão com uma imagem, a resposta para isso é simples: é melhor prevenir do que remediar quer dizer em caso da imagem não carregar por qualquer motivo aparecerá uma cor de fundo mesmo assim que sugerimos usar uma cor parecida com a cor do botão.
A utilidade disso é, por exemplo, se o fundo do seu blog for preto e usar um botão branco, com texto preto, se o botão não aparece por algum motivo o texto do link pode ficar invisível devido à cor de fundo do blog, então colocando uma cor de fundo no botão temos a certeza que pelo menos essa cor sempre aparecerá junto com o link.
Alguns de nossos visitantes perguntaram com fazer os links para enviar postagens do blog para o Twitter, Facebook e Google Buzz como fazemos atualmente no final de nossos tutoriais usando somente links de texto que parecem botões, então publicamos o código e vamos mostrar como é fácil usar esses links. Assim você também poderá divulgar seu blog e ganhar mais visitas do Facebook, Twitter e Google Buzz.
Entre na pagina editar html, clique para expandir o modelo e coloque esse código logo após body{...}
.redes a{display: block;padding: 3px;width: 150px;border: 1px solid #FC6;margin-top: 5px;margin-right: auto;margin-bottom: 5px;margin-left: auto;}
.redes a:hover{background-color: #FF6;border: 1px solid #F00;}
Isso é a formatação dos botões veja aqui Como fazer e colocar botões no blog
Fim !
Mais Uma Vez Estamos Aí Pra Postar Mais Uma Dica Bacana, Essa Porém Ela é Mais Um Utensílio Para Seu Blog.
Nossa Avaliação:
Plataforma:Dicas
Descrição: Suponhamos Que Quando O Visitante Quer Algo E Não Encontra Em Seu Blog, Ele Fica Com Raiva e Já Sai Dá Página Então Essa Dica é Para Que Isso Não Aconteça!
Então Vamos Lá:
Você Vai Fazer Uma Postagem No Seu Blog e Vai Clicar Em Editar HTML Na Postagem e Não Em Design.
Na Aba Editar HTML Da Postagem, Cole O Código Abaixo Já Personalizado Com As Informações De seu Blog:
Custom SUA URL AQUI">NOME DE SEU SITE AQUI |Widget by SUA URL AQUI">SUA DESCRIÇÃO AQUI
Personalize e Cole Na Aba Editar HTML De Sua Postagem.
Descrição: Muito Simples Ver Quem Plagiou Seu Conteudo, Basta Vir Em CopyScape Colocar Sua URL e Eles Aparecem, Muito Simples.
Avaliação Do Conteúdo:
Descrição: Após Muitos Pedidos De Nossos Queridos Visitantes, Resolvi Postar Esse Tutorial Que Sua Função é Exibir Uma Caixinha De Feed Para O Visitante Poder Assinar Colocando Seu E-Mail. Essa Caixinha Aparece Automaticamente Em Mais Ou Menos 10 Em 10 Minutos.
Vamos Para O Que Interessa!
No Painel De Seu Blog Clique Em Design, Adicionar um Gadget, HTML JavaScript. No Conteúdo Do HTML JavaScript Coloque Esse Código:
<style type="text/css">
#topbar
{
PADDING-TOP: 5px;
MARGIN-TOP: 23px;
PADDING-RIGHT: 5px;
PADDING-LEFT: 0px;
MARGIN-RIGHT: -3px;
VISIBILITY: hidden;
WIDTH: 363px;
HEIGHT:131;
FONT-FAMILY: arial;
POSITION: absolute;
background:url(http://img89.imageshack.us/img89/8543/dagondesignsitemapgener.png) no-repeat;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 5 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="frombottom" //enter "fromtop" or "frombottom"
function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name)
{
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0)
{
offset = document.cookie.indexOf(search)
if (offset != -1)
{
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar()
{
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar()
{
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id)
{
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else
{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop")
{
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else
{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">
<a href="javascript:closebar();"><img border="0" title="Fechar janela" rel="nofollow" src="http://i54.tinypic.com/214bgub.jpgg" style="float: right;margin-right:5px;margin-top:-1px;" /></a>
<img width="48" vspace="4" hspace="4" border="0" align="left" src="http://i56.tinypic.com/24e5ri0.jpg" title="Assine nosso Feed" style="margin-left:4px;" />
<center><font color="#000000"><b>Fique sempre atualizado! <br />Cadastre-se e receba nossos downloads em seu e-mail.</b> </font><form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify?uri=Nome De Seu Feed" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Nome De Seu Feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" value="Digite seu e-mail..." id="subbox" onfocus="if (this.value == 'Digite seu e-mail...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Digite seu e-mail...';}" name="email" size="26" /><input type="hidden" value="Nome Do Site!" name="uri" /><input type="hidden" name="loc" value="pt_BR" /><input class="Assinar2" type="submit" value="Assinar" /></form>
</center>
<span style="font-weight: bold; text-indent: -9999px;"><span style="visibility: hidden;"><center><p>Atenção: É Preciso Confirmar o Cadastro no E-mail.</p></center></span></span>
</div>
#topbar
{
PADDING-TOP: 5px;
MARGIN-TOP: 23px;
PADDING-RIGHT: 5px;
PADDING-LEFT: 0px;
MARGIN-RIGHT: -3px;
VISIBILITY: hidden;
WIDTH: 363px;
HEIGHT:131;
FONT-FAMILY: arial;
POSITION: absolute;
background:url(http://img89.imageshack.us/img89/8543/dagondesignsitemapgener.png) no-repeat;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 5 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="frombottom" //enter "fromtop" or "frombottom"
function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name)
{
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0)
{
offset = document.cookie.indexOf(search)
if (offset != -1)
{
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar()
{
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar()
{
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id)
{
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else
{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop")
{
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else
{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">
<a href="javascript:closebar();"><img border="0" title="Fechar janela" rel="nofollow" src="http://i54.tinypic.com/214bgub.jpgg" style="float: right;margin-right:5px;margin-top:-1px;" /></a>
<img width="48" vspace="4" hspace="4" border="0" align="left" src="http://i56.tinypic.com/24e5ri0.jpg" title="Assine nosso Feed" style="margin-left:4px;" />
<center><font color="#000000"><b>Fique sempre atualizado! <br />Cadastre-se e receba nossos downloads em seu e-mail.</b> </font><form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify?uri=Nome De Seu Feed" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Nome De Seu Feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" value="Digite seu e-mail..." id="subbox" onfocus="if (this.value == 'Digite seu e-mail...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Digite seu e-mail...';}" name="email" size="26" /><input type="hidden" value="Nome Do Site!" name="uri" /><input type="hidden" name="loc" value="pt_BR" /><input class="Assinar2" type="submit" value="Assinar" /></form>
</center>
<span style="font-weight: bold; text-indent: -9999px;"><span style="visibility: hidden;"><center><p>Atenção: É Preciso Confirmar o Cadastro no E-mail.</p></center></span></span>
</div>
Troque: Nome De Seu Feed Que Está Em Vermelho Pelo Nome De Seu Feed. Após Isso Salve O Gadget(Não Coloque Nome Nesse Gadget, Deixe Em Branco!).
É Isso Valeu e Até A Próxima!
Nossa Avaliação:
Plataforma: Tutoriais
Descrição: Muitas pessoas gostam de ver um Blog/Site todo arrumado que inspire o leitor para voltar mais vezes. Vai aqui uma dica pra você blogueiro que não sabe colocar imagem no Rodapé da sua Página.
Vamos lá.
Vá no Painel do seu blog, clique em Design > Editar HTML dê um CTRL+F e digite a palavra
</body>
Feito isso você vai pegar o código abaixo e vai colar acima do trecho </body>.
<div class="separator" style="clear: both; text-align: center;">
<a href="http://uscacadores.blogspot.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="189" src="LINK DA SUA IMAGEM AQUI" width="995" /></a></div>
Onde está de vermelho escrito LINK DA SUA IMAGEM AQUI você vai colar a sua imagem do Rodapé depois disso salve e visualize e veja como ficou.
Até mais pessoal
Plataforma: Tutoriais
Descrição:Já me perguntaram como criar uma caixa personalizada para exibir os códigos quando publicados dentro do post.
A caixa de código é muito utilizada por blogs que publicam códigos para serem copiados, como é o caso do Mundo Blogger.
É um recurso muito útil, pois facilita que o leitor diferencie o que é texto e o que é código.
Alguns usuários publicam os códigos dentro do blockquote, mas existe uma forma bem melhor e mais personalizada, sem precisar usar o blockquote.
Eu particularmente prefiro deixar o "blockquote" somente para destacar textos, ou fazer alguma observação.
Desta forma cada tipo de conteúdo terá a sua própria caixinha: o que for citação = blockquote, e o que for código = caixa exclusiva para códigos.
Para criarmos a caixa de códigos, precisaremos incluir códigos CSS no template.
Vou disponibilizar 2 modelos de caixa, assim é só você escolher qual prefere usar no seu blog e aplicar os estilos de acordo com o seu gosto.
Neste tutorial veremos o modelo de caixa simples, e no próximo artigo, veremos um outro modelo de caixa mais personalizada.
Vamos ao procedimento:
1. Criar caixa simples para exibir códigos no Blogger:
Entre na aba "design" >>"editar html", não precisa clicar em "expandir modelos de widgets" e procure por:
E cole logo ACIMA dela:
code{
overflow:auto; /* barra de rolagem*/
background:#XXXXXX url(ENDEREÇO-DA-IMAGEM) ; /* edite cor de fundo*/
border:1px solid #XXXXXX; /* edite cor e tipo de borda */
color:#XXXXXX; /* cor da fonte*/
font-size:80%; /* tamanho da fonte */
height:100px; /* edite a altura máxima da caixa*/
display:block;
white-space:pre;
text-align:left;
word-wrap:break-word;
padding:0 10px 5px 20px;
}No código acima eu determinei que a caixa tenha uma barra de rolagem.
O comando overflow: auto; faz como que a barra de rolagem apareça automaticamente, apenas se altura da caixa ultrapassar os 100px. Se você quiser, edite a altura máxima da caixa.
Se você não quiser barra de rolagem, simplesmente apague este trecho do código.
Se quiser acrescentar uma imagem ao plano de fundo, coloque a url da sua imagem onde está "ENDEREÇO-DA-IMAGEM".
Se quiser utilizar apenas cor para o plano de fundo, sem imagem alguma, apague este trecho:
url(ENDEREÇO-DA-IMAGEM)
Tabela de cores HTML
Plataforma:Tutoriais
Descrição:Geralmente, quando vamos fazer grandes modificações no blog, recorremos a opção de torná-lo visível apenas para o autor do blog, o que pode deixar os leitores bastante confusos (já me aconteceu mais de uma vez...). Seus leitores podem pensar que o blog 'acabou' ou que precisarão solicitar permissão para voltar a acessá-lo. Para evitar qualquer transtorno e deixar um aviso claro aos seus leitores de que a interrupção é temporária, segue este dica que encontrei no blog Randomness:
Acrescente esta linha depois de <body>:
<span class="item-control blog-admin">
e antes de </body>:
</span>
O que fazemos é incluir todo o conteúdo do blog em uma classe utilizada pelo próprio Blogger para mostrar somente ao autor os ícones de Editar Postagens e Widgets (o ícone da ferramenta).
Para que possamos então apresentar uma imagem de aviso, acrescente logo após <body> (e antes do primeiro código que passei):
<center><img src="URL_imagen"/></center>
Escolha uma imagem adequada para o aviso, hospede e copiei o link (endereço) fornecido e inclua no código, substituindo o trecho em vermelho.
Créditos : BomDesigner
