Muito usado, principalmente quando se esta realizando atualização e/ou migração de servidores. Pense na necessidade de copiar arquivos de configuração de uma máquina que já tenha os serviços funcionando, para uma nova máquina que você esteja montando.
Para colocar uma imagem no lugar do ícone do blogspot na barra de endereços do navegador, primeiro você precisa converter e hospedar uma imagem no formato .ico, então vamos começar convertendo uma imagem normal(.jpg, .gif ou .png) em .ico para isso vamos usar o site Converticon 2.1, quando entrar no site clique no botão Get Started, vai abrir uma janela para você procurar a imagem no seu computador, veja embaixo da linha aonde vai o nome do arquivo caso o tipo de arquivo estiver em icon(ico) troque para image(png, gif, jpeg) e encontre a imagem. Quando você clicar na imagem ela já aparecerá na tela, então clique em Export sugerimos escolher 32 x 32 ou 16 x16 e clique em save as. Esta parte já está pronta, convertemos uma imagem normal em uma imagem para ícone da barra de endereços.
Colocar uma lista dos últimos comentários recebidos no blog é muito simples, é igual adicionar qualquer feed. Entre na página layout, clique para adicionar um gadget e na pagina surgir escolha a opção feed.
Na tela que aparece coloque esse endereço, mas colocando o nome do seu blog nele:
http://NOMEDOSEUBLOG.blogspot.com/feeds/comments/default
Depois clique em continuar e escolha as opções que vai mostrar junto com o link dos últimos comentários (numero de itens, autores do item, datas do item), agora é só apertar o botão salvar e já está pronto. Visualize seu blog e aparecerá a lista dos últimos comentários recebidos pelo seu blog.
Os marcadores do blog por ser uma espécie de guia ou menu principal merecem uma formatação diferente para seus links, então vamos modificar o estilo dos marcadores do blog. Isso é semelhante a colocar barra de rolagem nos marcadores que já falamos anteriormente, alias você pode fazer as duas coisas ao mesmo tempo. Agora vamos mostrar como colocar uma imagem ou ícone ao lado dos marcadores, que na verdade é uma imagem de fundo, e formatar seu estilo, mudar o tipo de letra, cor e tamanho.
Entre na pagina editar HTML e clique para Expandir modelos de widgets, então procure os marcadores do seu blog, clique ctrl+F e digite o titulo que usa nos marcadores é o jeito mais fácil de achar, neste blog chama guia rápido.
Na linha
Para colocar os marcadores do blog em um menu suspenso, menu de salto ou por qualquer outro nome que você conheça, mas é a forma de menu que a maiorias dos blogs usa para seus arquivos. Entre na página editar HTML, clique para Expandir modelos de widgets e procure pelo código dos seus marcadores (procure pelo titulo que usa neles é mais fácil identificar, no caso deste blog procuramos por guia rápido). Você vai encontrar algo assim:
Então apague esse trecho:
Às vezes queremos adicionar muitos blogs na lista de atualizações que mostramos(lista de blogs) e fica ocupando espaço demais em nossa pagina, uma boa solução para esse problema é colocar uma barra de rolagem em nossa lista de blogs. Para fazer isso é bem simples:
Entre na pagina editar HTML e clique para expandir os modelos de widgets, então procure pelo inicio de sua lista de blogs, um jeito fácil de achar é procurando pelo titulo que usa na sua lista em nosso caso usamos o nome Meus outros Blogs, mas no seu blog estará o titulo que usa na sua lista, vejo o código:
Cuidado para não se confundir e achar que já tem uma div fechada, essa que já estava no blog pertencia ao código original, então precisamos adicionar mais uma(essa que está em negrito, não estava no modelo original do blog). Feito isso é só clicar para visualizar e depois salvar se estiver tudo correto. Essa é uma boa maneira de poupar espaço e ainda dá um novo visual com a barra de rolagem na lista de blogs.
Já vimos e publicamos outros códigos para colocar uma imagem no lugar do ícone na barra de endereços, mas eles apresentam um problema com o Internet Explorer, vamos corrigir isso mostrando um outro código, repare que são duas vezes a mesma coisa mudando somente o formato da imagem .ico e .png:
Crie uma imagem no formato .png e hospede no ImageShack depois converta a imagem para o formato de ícone usando o site Converticon 2.1 e hospede o arquivo do ícone(.ico) no site MerryPic, se tiver duvidas sobre como fazer isso veja mais detalhes sobre como converter e hospedar arquivo no formato ícone(.ico), então coloque os endereços no lugar indicado no código acima, cuidado para pegar a url correta de cada imagem, estão em direct link pois as outras são paginas que mostram sua imagem(ícone) e se usar qualquer outras delas o código não funcionará.
Depois entre na pagina editar html, encontre ]]> e coloque o código logo abaixo, ficará desse jeito:
]]>
Agora é só clicar para visualizar e depois salvar se estiver tudo correto. Apenas mais um lembrete, no internet Explorer o ícone demora um pouco até aparecer e às vezes só vai funcionar depois que você carregar a página novamente.
Depois que publicamos essa explicação o site de hospedagem apresentou alguns problemas, então sugerimos usar o Free FavIcon.
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). 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. Veja aqui alguns programas grátis para editar imagens, eles são bons para fazer os botões e outras imagens que precise no seu blog. Depois disso você precisa hospedar as imagens em algum lugar sugerimos 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:
Uma curiosidade interessante de ser mostrada no blog é o numero total de postagens feitas e também o numero de comentários recebidos, então montamos esse código fizemos de um jeito que a formatação do texto será igual ao resto do seu blog, assim faz parecer que o numero postagens e comentários fazem parte do layout do blog, o código para colocar no blog é:
Apenas altere onde está escrito seu blog no código, isso aparece 2 vezes e você deve modificar as duas, senão o código não funcionará. Para colocar no seu blog entre na página layout, adicionar gadget, html/javascript e cole o código já com o endereço do seu blog nele. Outra coisa que podemos alterar é a formatação, para isso vamos adicionar essa linha antes do código:
Quando o assunto é fazer mudanças num blog o mais importante que precisamos saber é como funciona a formatação do blog, ou seja, como definimos onde as coisas vão aparecer, larguras das colunas, quantas colunas o blog tem, quais cores vamos usar, tipo, tamanho e cores das letras, imagens ou cores de fundo, bordas e outras coisas, isso tudo é feito com estilos CSS.
Falar sobre todos esses assuntos de uma só vez é praticamente impossível então vamos por partes, hoje vamos falar sobre formatação do texto. Veja o exemplo abaixo:
.post{font-family: "Comic Sans MS";
color: #0000CC;
font-size: 12pt;
font-style: italic;
line-height: 120%;
font-weight: bold;
text-decoration: none;
}
O inicio dele é o nome do estilo no exemplo acima .post, ou seja, esse estilo será aplicado nas postagens do blog, também poderíamos usar em qualquer outra parte: #sidebar é a coluna, body é a pagina inteira e assim por diante.
Agora vamos mostrar o que faz cada uma das linhas:
font-family: "Comic Sans MS";
Tipo de letra, poderia ser qualquer outra: arial, verdana, Times New Roman, mas não use fontes que você baixou da internet, porque o blog vai usar as fontes disponíveis no computador da pessoa que está visitando o blog, ou seja se essa pessoa não tiver a fonte que você escolheu ele vai usar outra e isso pode prejudicar sua formatação.
color: #0000CC;
aqui temos o cor do texto, para alterar é só trocar o código da cor.
font-style: italic;
Essa linha faz a fonte itálica, se não quiser apague essa linha ou coloque a palavra normal no lugar de italic
font-weight: bold;
Isso faz texto em negrito, se não quiser apague essa linha ou coloque a palavra normal no lugar de bold, se apagar a linha e o texto continuar em negrito é necessário deixar essa linha, mas com a palavra normal no lugar de bold, isso acontece, por exemplo, se outro estilo CSS já estiver usando bold, por exemplo, se usou texto em negrito no body{...} a pagina inteira ficará em negrito então onde queremos texto normal é preciso colocar font-weight: normal, essa mesma explicação vale para qualquer coisa feita em CSS, como por exemplo, o texto em itálico.
font-size: 12pt;
O numero 12 é o tamanho da letra
line-height: 120%;
120 é a altura da linha, ou seja, se aumentar esse valor terá um espaçamento maior entre as linhas do texto.
text-decoration: none;
Essa linha tira o sublinhado do texto, principalmente usado em links.
Se quiser criar uma formatação para um determinado texto pode usar como nome do estilo qualquer palavra, como .especial{....} o ponto antes da palavra especial faz parte do código, você pode usar esse estilo dentro de uma postagem ou nas colunas do blog inserindo o texto através da pagina layout, adicionar gadget, html/javascript e colocando o código
Essa é uma versão mais fácil de usar para colocar uma imagem seguindo o cursor do mouse no seu blog. Tudo que você precisa fazer é colocar a url de uma imagem no lugar indicado no código e pronto essa imagem vai aparecer junto com o ponteiro do mouse e se move junto com o mouse para qualquer lugar na tela.
Cuidado para não apagar nada além do endereço da imagem, pois se apagar uma das aspas o código não funciona. Para colocar esse efeito no seu blog entre na pagina layout, adicionar gadget, html/javascript e cole o código já modificado com a imagem que você quiser, esse gadget com o código pode ficar em qualquer parte da página que funcionará na página toda, ou seja, a imagem segue o mouse por todo o blog.
Se for utilizar uma imagem redonda ou outro formato sugerimos que use uma imagem no formato gif com fundo transparente, porque o fundo da imagem vai aparecer também, mesmo que seja da mesma cor de fundo do seu blog, quando passar o mouse sobre o texto ou qualquer outra coisa dá pra notar o real formato da imagem, por isso achamos que o gif transparente é melhor opção.
Algumas vezes quando entramos na pagina fontes e cores do blogspot encontramos algo que não funciona, por exemplo, você muda a cor de fundo naquela pagina, salva, mas não acontece nada no seu blog. A razão disso é que muitas vezes ao fazer alterações no layout modificamos diretamente o html e a partir daí essa pagina de cores não funcionará mais.
Entre na pagina editar html e veja logo no começo do código tem:
/* Variable definitions
====================
E muitas outras variáveis parecidas com esta, cada uma delas é responsável por uma cor no seu blog, isso são variáveis que o blog usa para facilitar modificar as cores de varias coisas no blog, então veja mais abaixo:
body {
background:$bgcolor;
margin:0;
Esse :$bgcolor; no lugar da cor de fundo(background) é a variável o que faz funcionar a pagina cores e fontes. Note que no começo do primeiro trecho tem name="bgcolor" o cifrão é apenas um complemento do código. Então se algum dos links para modificar cores não está funcionando o problema deve ser esse, o html foi modificado.
Para corrigir isso é bem simples basta colocar novamente a variável no lugar da cor de fundo como usamos no exemplo acima, apague o código da cor que está lá e coloque: $bgcolor.
Além de corrigir esses erros é possível mudar o texto que aparece na pagina cores e fontes, onde está escrito Page Background Color, você pode colocar Cor de Fundo, é mais fácil de identificar. Ainda é possível criar novas variáveis, copiando o código de uma delas e trocar o name e description, colocando mais uma variável na lista como no exemplo abaixo:
E depois na parte do html onde controla a cor da coluna principal modificar assim:
#main-wrapper { background:$fundotexto;
width: 410px;
E já está pronto, quando entrar na pagina cores e fontes verá que apareceu Fundo das postagens junto com as outras coisas que já podia modificar a cor, e agora pode trocar a cor de fundo por essa pagina. Um detalhe final que ainda não comentamos foi a parte fff e ffffff que aparece no código, isso são as cores padrão, elas não tem muita importancia pois você mudará para qualquer outra cor assim que entrar na pagina fontes e cores.
