Vasco
Corinthians
Botafogo
Fluminense 
Flamengo
São Paulo
Internacional
Figueirense
Santos
Grêmio
Coritiba
Atlético-GO
Palmeiras
Código da Caixa de Seguidores do Twitter - Fan Box
Já mostramos vários acessórios para integrar o twitter ao blog e assim conseguir mais visitas e mais seguidores no twitter, então agora vamos mostrar um código para exibir uma caixa com seus seguidores do twitter no seu blog que é semelhando a caixa de fãs do facebook. Se desejar conhecer outras formas de usar o twitter no seu blog veja aqui mais Ferramentas e Acessórios para o Twitter.
Esse é um código bem simples de instalar, você só precisa entrar na pagina design, adicionar gadget, escolher a opção html/javascript e colar essas linhas de html:
42 Esse é um código bem simples de instalar, você só precisa entrar na pagina design, adicionar gadget, escolher a opção html/javascript e colar essas linhas de html:
Botões de Compartilhamento Fixos no Canto da Pagina - Redes Sociais
Achar as melhores formas de divulgar o blog nas redes sociais é muito importante para todos os blogueiros e neste sentido recebemos vários comentários perguntando sobre como fixar os botões de compartilhamento no canto da pagina como fazemos atualmente aqui no Dicas para Blogs. Então vamos mostrar como deixar os botões das redes sociais sempre em destaque no seu blog.
Na verdade apenas usamos juntas duas coisas já conhecidas dos blogueiros:
Fixar botões no canto da pagina
Botão para as redes sociais - AddThis
Na verdade apenas usamos juntas duas coisas já conhecidas dos blogueiros:
Fixar botões no canto da pagina
Botão para as redes sociais - AddThis
Balão com Número de Comentários ao Lado do Título da Postagem
Uma forma de conseguir mais comentários no seu blog pode ser mostrar o numero de comentários dentro de um balão ou alguma outra imagem no inicio da postagem, ou seja, ao lado do titulo de cada post do blog. Isso pode ser uma maneira de incentivar os visitantes a deixarem seu comentário ou pelo menos ler o que os outros já falaram sobre aquele assunto.
Leia também:
Como ter Mais Comentários, Mais Visitas
Ganhar Tempo e Conseguir mais Visitas no Blog
Trabalhe Melhor - Organize-se e Ganhe Tempo
Leia também:
Como ter Mais Comentários, Mais Visitas
Ganhar Tempo e Conseguir mais Visitas no Blog
Trabalhe Melhor - Organize-se e Ganhe Tempo
Ampliar Imagens na Pagina do Blog - Zoom nas Imagens
Existem varias maneiras de colocar uma ferramenta de zoom nas imagens das postagens do seu blog, isso é mostrar a imagem publicada em tamanho original (geralmente maior do que aparece no post), por exemplo: Fazer o efeito LightBox - Imagens em Destaque Mas usamos um código bem simples que despertou a curiosidade de alguns leitores que nos escreveram por email. Então vamos mostrar o código para fazer a imagem da postagem aparecer no inicio do blog logo abaixo do título.
Você pode ver uma demostração disso clicando aqui para ver nosso tutorial com dicas para criar um blog de sucesso.
Você pode ver uma demostração disso clicando aqui para ver nosso tutorial com dicas para criar um blog de sucesso.
Erros no Blogger - Códigos Duplicados
Trabalhar com códigos HTML, javascript, CSS e outros pode ser muito complicado, principalmente porque quando procuramos tutoriais sobre esses códigos todos os sites dizem coloque tal código no seu HTML, mas o que nenhum diz é que devemos fazer uma limpeza de vez em quando para retirar códigos inúteis e assim deixar o blog mais rápido e também evitar erros em nossa pagina.
Limpar Histórico de Internet - Evite erro no Blog
Porque os códigos não funcionam no blog
Limpar Histórico de Internet - Evite erro no Blog
Porque os códigos não funcionam no blog
Retirar espaço em Branco após Comentários do Blogger
Uma dica muito simples de fazer e com um resultado muito bom é retirar aquele espaço em branco que fica abaixo dos formulários dos comentários do blogger, caso você use os comentários junto na pagina da postagem como fazemos atualmente.
Além deste veja aqui outros tutoriais relacionados aos comentários do blogspot:
Mostrar comentários recentes
Moderar Comentários do Blogger
Colocar emoticons nos comentários do blog
Além deste veja aqui outros tutoriais relacionados aos comentários do blogspot:
Mostrar comentários recentes
Moderar Comentários do Blogger
Colocar emoticons nos comentários do blog
Fazer Resumo da Postagem com Miniaturas das Imagens
Que tal mostrar apenas os resumos das postagens no blog com uma miniatura da imagem somente alterando algumas linhas de html no seu blogger e sem usar nenhum código javascript. Isso é muito bom e certamente é bem mais fácil de fazer que as versões anteriores para fazer resumo das postagens:
Postagem expansível com miniatura da imagem
Mostrar resumo da postagem
O procedimento é bem simples, você entra na pagina editar html, marque a opção para expandir modelos de widgets e procura por post.body, deve estar deste jeito no seu blog: <data:post.body />
Postagem expansível com miniatura da imagem
Mostrar resumo da postagem
O procedimento é bem simples, você entra na pagina editar html, marque a opção para expandir modelos de widgets e procura por post.body, deve estar deste jeito no seu blog: <data:post.body />
Criar Página com Arquivos do Blogger - Índice do Site
Já fizemos diversas publicações sobre como classificar ou separar as postagens do seu blogspot:
Postagens mais comentadas
Mostrar Postagens mais Comentadas de Cada Marcador do Blog
Criar um Índice do blog - Mostrar links de todos os posts (mostra todos os links em ordem de postagens mas sem as datas de publicação)
Mas uma delas que ainda não falamos é como criar uma pagina com os arquivos do seu blog, uma espécie de índice do blog com as datas, títulos e links de todas suas postagens. Essa pode ser uma maneira interessante de fazer seus visitantes conhecerem a história do seu blog, vendo todas as postagens publicadas.
Postagens mais comentadas
Mostrar Postagens mais Comentadas de Cada Marcador do Blog
Criar um Índice do blog - Mostrar links de todos os posts (mostra todos os links em ordem de postagens mas sem as datas de publicação)
Mas uma delas que ainda não falamos é como criar uma pagina com os arquivos do seu blog, uma espécie de índice do blog com as datas, títulos e links de todas suas postagens. Essa pode ser uma maneira interessante de fazer seus visitantes conhecerem a história do seu blog, vendo todas as postagens publicadas.
Numeração nas Páginas do Blogger - Código Atualizado
Veja o código atualizado para colocar numeração nas paginas do blogspot, anteriormente já publicamos um código Colocar numeração nas paginas do blog mas ele apresentou alguns erros, então encontramos essa versão mais recente deste hack que cria numeração de paginas no blog. Não é muito difícil de instalar apenas precisa de alguns cuidados para evitar os erros nos códigos na hora de editar o HTML do seu blog, veja aqui Porque os códigos não funcionam no blog.
Mudar o Texto disse.. ao lado do Nome do Autor do Comentário
Quem utiliza os templates padrões do blogger já deve ter notado que sempre que alguém posta um comentário no seu blog aparece ao lado do nome do autor do comentário a palavra "disse...". Para alguns isto não é problema, mais existem muitos blogueiros que gostariam de personalizar esta mensagem ou até mesmo removê-la, o melhor de tudo para estas pessoas é que isso é perfeitamente possível e além do mais é super simples de fazer.
Personalizar títulos do menu do blog
Efeito na tag Alt - Personalizar texto sobre a imagem
Personalizar Contador de Visitas - Contador com Outra Imagem
Veja a imagem abaixo para entender melhor do que eu estou falando:
Personalizar títulos do menu do blog
Efeito na tag Alt - Personalizar texto sobre a imagem
Personalizar Contador de Visitas - Contador com Outra Imagem
Veja a imagem abaixo para entender melhor do que eu estou falando:
Mostrar Postagens mais Comentadas de Cada Marcador do Blog
Os marcadores do blogspot são muito úteis para separar as postagens por categorias ou tipos de assuntos, isso todos já sabem. Temos muitas opções nos marcadores do blogger, mas uma coisa interessante que podemos fazer é mostrar uma lista com as postagens mais comentadas de um marcador especifico do blogger.
Esse código é diferente da lista com as postagens mais comentadas do blog que já publicamos, pois aqui você mostrará somente as postagens com mais comentários de um dos marcadores do seu blog.
Esse código é diferente da lista com as postagens mais comentadas do blog que já publicamos, pois aqui você mostrará somente as postagens com mais comentários de um dos marcadores do seu blog.
Fazer Menu com Imagens ao lado dos Links
Quando fazemos uma lista de links no blog podemos colocar uma imagem ao lado de cada link para ficar mais bonito, isto pode ser feito colocando setinhas ao lado dos links ou alguma outra imagem que podem ser gifs animados como utilizamos muitas vezes em nossos blogs. Veja também como fazer um menu horizontal.
Esse tutorial mostrará como colocar imagens do lado dos links utilizando um menu feito com um gadget de html/javascript, mas se quiser pode ver aqui como aplicar esse mesmo estilo de formatação em qualquer gadget do seu blog, por exemplo, nos marcadores ou qualquer outro.
Esse tutorial mostrará como colocar imagens do lado dos links utilizando um menu feito com um gadget de html/javascript, mas se quiser pode ver aqui como aplicar esse mesmo estilo de formatação em qualquer gadget do seu blog, por exemplo, nos marcadores ou qualquer outro.
Lista de Posts com Assuntos Relacionados no Blog
Uma boa técnica para conseguir mais pageviews (fazer as pessoas olharem mais paginas do blog) é mostrar uma lista de links com os assuntos relacionados no final de cada postagem, já mostramos anteriormente como assuntos relacionados com miniaturas das imagens e também assuntos relacionados e classificação das postagens com estrelas no mesmo acessório.
Mas o código que vamos mostrar a seguir exibi somente os links sem imagens e pode ser uma boa opção para mostrar os assuntos relacionados sem precisa carregar imagens o que ajuda o blog ficar com a navegação mais rápida entre as paginas do seu blog.
Mas o código que vamos mostrar a seguir exibi somente os links sem imagens e pode ser uma boa opção para mostrar os assuntos relacionados sem precisa carregar imagens o que ajuda o blog ficar com a navegação mais rápida entre as paginas do seu blog.
Personalizar Contador de Visitas - Contador com Outra Imagem
Como colocar um contador de visitas dentro de outra imagem, essa foi uma pergunta que recebemos por e-mail e achei bem interessante a idéia. No site que enviaram como exemplo ele colocou o contador de visitantes online dentro de outro banner e o efeito visual ficou muito bom como podem ver na imagem mais abaixo.
Fazer isso não é tão difícil apenas precisa de um código CSS simples para posicionar a imagem de fundo e o contador no lugar certo. O primeiro passo é criar e hospedar uma imagem, depois pegue o endereço da imagem (....). E também criar ou copiar o código do contador que deseja incluir nesta imagem, isso pode ser feito com qualquer contador ou imagem.
Fazer isso não é tão difícil apenas precisa de um código CSS simples para posicionar a imagem de fundo e o contador no lugar certo. O primeiro passo é criar e hospedar uma imagem, depois pegue o endereço da imagem (....). E também criar ou copiar o código do contador que deseja incluir nesta imagem, isso pode ser feito com qualquer contador ou imagem.
Mostrar Somente os Títulos das Postagens
Mostre somente os títulos das postagens nas paginas dos marcadores ou paginas mais antigas do blog, deixando as postagens completas(ou resumo das postagens) somente na pagina inicial e nas paginas individuais de cada post do blog. Você também pode alterar a quantidade de posts por pagina dos marcadores.
Já testamos esse código e funcionou perfeitamente nas paginas estáticas do blogger (também conhecidas como paginas extras). A utilidade de mostrar apenas os títulos das postagens é o carregamento mais rápido das paginas e, além disso, podemos ganhar mais pageviews (visualizações de pagina) que é uma das técnicas de SEO para mostrar aos buscadores(pesquisa Google principalmente) que o seu blog é relevante ou seja as pessoas entraram nele e visitaram mais paginas.
Já testamos esse código e funcionou perfeitamente nas paginas estáticas do blogger (também conhecidas como paginas extras). A utilidade de mostrar apenas os títulos das postagens é o carregamento mais rápido das paginas e, além disso, podemos ganhar mais pageviews (visualizações de pagina) que é uma das técnicas de SEO para mostrar aos buscadores(pesquisa Google principalmente) que o seu blog é relevante ou seja as pessoas entraram nele e visitaram mais paginas.
Colocar Imagens nas Opções das Enquetes
Recebemos uma pergunta interessante em um comentário em uma de nossas postagens. E esse tutorial é uma resposta para a pergunta como criar enquetes usando imagens. Na verdade é uma adaptação que fizemos utilizando o serviço de enquetes grátis do site enquetes.com.br, veja aqui como criar sua enquete.
Depois que criar sua enquete o site fornece um código html (Opção 3 - formulário com a enquete em formato HTML) ou javascript (Opção 2 - formulário com a enquete e recursos Java) ambos funcionam no blogger e pode ser colocado pela pagina designer > adicionar gadget > html/javascript para colocar no seu blog, mas antes de colocar o código no blog vamos trocar os textos por imagens nas opções da pesquisa (enquete).
Depois que criar sua enquete o site fornece um código html (Opção 3 - formulário com a enquete em formato HTML) ou javascript (Opção 2 - formulário com a enquete e recursos Java) ambos funcionam no blogger e pode ser colocado pela pagina designer > adicionar gadget > html/javascript para colocar no seu blog, mas antes de colocar o código no blog vamos trocar os textos por imagens nas opções da pesquisa (enquete).
Anúncios Adsense dentro das Postagens do Blog
Recebemos uma pergunta em nossos comentários sobre como colocar anúncios Google dentro das postagens do blogger isso pode parecer difícil, mas é muito fácil e rápido de fazer. Além disso pode ajudar a melhorar seus lucros com Adsense e você pode escolher a posição que o anuncio Google aparecerá em suas postagens.
Primeiro entre na pagina do Google Adsense(Configurar Anuncios do Adsense - Video Tutorial)
Primeiro entre na pagina do Google Adsense(Configurar Anuncios do Adsense - Video Tutorial)
Imagens Lado a Lado, Fazer Colunas nos Gadgets
Algumas pessoas que visitam nosso blog perguntaram sobre como colocar imagens uma ao lado da outra como fizemos com os links para nossa comunidade no Orkut, Facebook e Vídeos do Youtube que temos em nosso menu. Existem varias maneira de fazer aquilo usando códigos CSS ou tabelas em HTML(que já mostramos em outra postagem: Dividir um gadget em duas colunas), mas preferimos mostrar como fazer utilizando as divs.
Usar outros Tipos de Fontes (letras) no Blog
Você pode usar outros tipos de fontes (formato de letras) nos textos ou em qualquer parte do seu blog, isso é possível utilizando o site Google Font Directory, ele é um site que hospeda diversos tipos de fontes que podemos usar em nossos blogs para poder variar um pouco e fugir dos modelos de fontes mais comuns como, por exemplo: Arial, Verdana, Times Roman. E poder dar uma nova aparência ao blog com novos tipos de letras.
Links para divulgar blog no Twitter, Facebook, Orkut, Google Buzz
Existem muitas formas para fazer a divulgação do seu blog e uma delas é dar opções dos seus visitantes enviarem seus links das postagens do seu blog para redes sociais(veja também: Botão para as redes sociais - AddThis e assim gerar mais visitas. Então hoje vamos mostrar um código simples de usar que permite que seus visitantes divulguem seu qualquer pagina do seu blog para o Orkut, Twitter, Facebook e Google BuzzFormulário de Contato Google Docs - Notificações por E-mail
Já falamos sobre usar os formulários do Google Docs como forma de contato no seu blog ou site (afinal ele serve para qualquer pagina de internet) e desta forma dar mais uma opção de comunicação entre você e seus leitores, claro que isso não impede que deixe seu endereço de email no blog, pois algumas pessoas acham o contato por email mais seguro e confiável.
Deixamos para falar de algumas das configurações do Formulário de Contato do Google Docs neste outro tutorial para não misturar assuntos demais, por isso se quiser ver os primeiros passos sobre criar e instalar um formulário para enviar e-mail no seu blog veja aqui: Criar Formulario de Contato para Blog com Google Docs, justamente por já ter mostrado como criar o formulário, vamos fazer esse tutorial considerando que você já tenha um formulário pronto.
12 Deixamos para falar de algumas das configurações do Formulário de Contato do Google Docs neste outro tutorial para não misturar assuntos demais, por isso se quiser ver os primeiros passos sobre criar e instalar um formulário para enviar e-mail no seu blog veja aqui: Criar Formulario de Contato para Blog com Google Docs, justamente por já ter mostrado como criar o formulário, vamos fazer esse tutorial considerando que você já tenha um formulário pronto.
Criar Formulario de Contato para Blog com Google Docs
Já publicamos vários tutoriais falando sobre como fazer e colocar um formulário de contato no seu blog, afinal é muito importante para os blogueiros interagir com seus leitores e nem todos os assuntos podem ser tratados nos comentários do blog.
Diversos Formulários - Colocar Formulário de Contato no Blogger
JotForm- Formulário de Contato no Blogger - Enviar Email
Uma boa maneira é usar um formulário para enviar as mensagens diretamente para seu email ou colocar o próprio endereço de email no seu blog, mas neste caso sugerimos não utilizar o hotmail, pois muita gente pode adicionar você no MSN e certamente não é possível atender a todos online.
Diversos Formulários - Colocar Formulário de Contato no Blogger
JotForm- Formulário de Contato no Blogger - Enviar Email
Uma boa maneira é usar um formulário para enviar as mensagens diretamente para seu email ou colocar o próprio endereço de email no seu blog, mas neste caso sugerimos não utilizar o hotmail, pois muita gente pode adicionar você no MSN e certamente não é possível atender a todos online.
Achar e baixar imagens, fotos, icones para Blog
Já faz tempo que os blogueiros trocam o favicon (imagem da barra de endereço) do blog, mas há pouco tempo o blogger colocou essa função na sua pagina design o que facilitou muito a troca desta imagem sem precisar mexer com códigos, mas ainda restou um problema como achar ou fazer icones no tamanho certo?
Por isso vamos mostrar mais um site onde você pode encontrar e baixar icones para usar no seu blog. Claro que você mesmo pode fazer sua imagem, mas devido ao tamanho dela é um pouco complicado.
Por isso vamos mostrar mais um site onde você pode encontrar e baixar icones para usar no seu blog. Claro que você mesmo pode fazer sua imagem, mas devido ao tamanho dela é um pouco complicado.
Escolher Melhores Palavras Chave - Técnicas de SEO
Quando vamos escrever ou escolher os títulos das novas postagens devemos pensar em quais são as melhores palavras chave a serem utilizadas e assim conseguir mais visitas para o blog. Existe uma ferramenta do Google que ajuda muito na hora de saber quais as palavras mais pesquisadas na internet e quais tem mais ou menos concorrência.
Usar Twitter em Português - Configurar Idioma do Twitter
Você já verificou se os sites que mais usa têm a versão em português? Geralmente os blogueiros usam serviços de diversos sites: feedburner, adsense, twitter, facebook e muitos outros, mas esquecemos de procurar se esses sites têm a opção em português. Recentemente o Twitter lançou sua opção para usuários da língua portuguesa e outros sites já têm isso também.
Ferramentas e Acessórios para o Twitter
Fazer sorteio entre os seguidores do Twitter ou Retweets
Para usar o Twiiter em português é muito simples só precisa clicar menu ao lado do seu nome no twitter e entrar em configurações (settings).
Ferramentas e Acessórios para o Twitter
Fazer sorteio entre os seguidores do Twitter ou Retweets
Para usar o Twiiter em português é muito simples só precisa clicar menu ao lado do seu nome no twitter e entrar em configurações (settings).
Usar Melhor Descrição e Palavras Chave - Keywords e Description
Usar meta tags (keywords e description) para criar uma descrição do site ou blog e palavras chave é bem comum, mas muita gente faz isso uma vez e pronto. Nunca modifica (atualiza) essas palavras chaves e descrição do site com isso perdendo boas oportunidades que aparecem em certas épocas do ano. Veja uma maneira mais interessante de aproveitar as meta tags. Se ainda não conhece bem o funcionamento destes códigos veja os links abaixo:
Personalizar e Otimizar Título do Blog - Aparecer no Google
Descrição e Palavras Chave - Meta Tags
E aproveite para saber Quais as Palavras Chaves mais Pesquisadas no Google, esse é um serviço gratuito e pode ajudar a conseguir mais visitas e escolher melhor as palavras chaves para seu blog.
Personalizar e Otimizar Título do Blog - Aparecer no Google
Descrição e Palavras Chave - Meta Tags
E aproveite para saber Quais as Palavras Chaves mais Pesquisadas no Google, esse é um serviço gratuito e pode ajudar a conseguir mais visitas e escolher melhor as palavras chaves para seu blog.
Tradução do Blog com Bandeiras ou Links - Escolha os Idiomas
Existem diversas ferramentas de tradução para blog com as bandeiras dos países, mas o difícil é achar uma que tenha a tradução para os idiomas que você deseja ou precisa colocar no seu blog, então vamos mostrar hoje como criar seu próprio tradutor com bandeirinhas (Gadget para tradução com imagens das bandeiras) podendo escolher quais idiomas vai usar e também escolher as imagens das bandeiras ou ainda se prefere colocar somente links de texto para a tradução do blog para outra língua.
Como Evitar Punições do Google e Aparecer nos Resultados das Buscas
Recentemente o Google e o Blogger passaram por algumas mudanças e aconteceram varias punições do Google alguns blogs chegaram a ser banidos dos resultados das buscas do Google e claro perdendo muitas visitas com isto. Então vamos dar algumas dicas para evitar as punições do Google. A maior parte delas está publicado nas paginas de Ajuda do Ferramentas do Google para webmasters por isso vamos fazer um resumo e colocar os links para aqueles que desejarem ver os textos completos.
Como ter Mais Comentários, Mais Visitas
Ferramentas para Webmasters - Sitemaps
Erros na Indexação do Blog - Restringido por robots.txt
Como ter Mais Comentários, Mais Visitas
Ferramentas para Webmasters - Sitemaps
Erros na Indexação do Blog - Restringido por robots.txt
Colocar Anúncios nas Imagens das Postagens do Blog
Como a maior parte dos blogueiros mostra anúncios e quer ganhar dinheiro com blogs http://www.blogger.com/img/blank.gifou sites o jeito mais usado para ter lucros na internet é usando o Google Adsense, mas sempre é bom ter mais uma opção para fazer isso então você pode mostrar anúncios também nas imagens que publica no seu blog, muitos estão chamando isso do Adsense para Imagens, mas isso é apenas uma maneira de falar, pois o Pixazza não tem ligação direta com o Adsense, pelo menos não por enquanto.
Outras dicas para ganhar dinheiro na internet:
Colocar Anúncios do Google Adsense no Blog
Como Funciona o Google Adsense - Ganhar mais Dinheiro
Aumentar o lucro com o Blog
Mas vamos direto ao assunto e mostrar como você pode usar as imagens publicadas no seu blog para ganhar dinheiro na internet
Outras dicas para ganhar dinheiro na internet:
Colocar Anúncios do Google Adsense no Blog
Como Funciona o Google Adsense - Ganhar mais Dinheiro
Aumentar o lucro com o Blog
Mas vamos direto ao assunto e mostrar como você pode usar as imagens publicadas no seu blog para ganhar dinheiro na internet
Mostrar Ruas da Cidade no Blog: Google Maps - Street View
Você pode mostrar ruas, avenidas enfim varias partes da sua cidade no seu blog ou ainda lugares interessantes de qualquer parte do mundo utilizando o Google Maps com a função Street View. Aproveite e conheça a Busca Google de Gadgets certamente achará acessórios interessantes para seu blog.
Esse serviço é totalmente gratuito e fácil de utilizar no seu blog, o site do Google Maps já dá o código pronto e você pode utilizar nas postagens ou mesmo na sidebar do seu blog. Apenas queremos lembrar que isso deixa seu blog lento e demorar um pouco mais para carregar a pagina (veja como testar a velocidade do blog), porque utiliza muitas imagens. Portanto veja se realmente vale à pena usar no seu blog.
Esse serviço é totalmente gratuito e fácil de utilizar no seu blog, o site do Google Maps já dá o código pronto e você pode utilizar nas postagens ou mesmo na sidebar do seu blog. Apenas queremos lembrar que isso deixa seu blog lento e demorar um pouco mais para carregar a pagina (veja como testar a velocidade do blog), porque utiliza muitas imagens. Portanto veja se realmente vale à pena usar no seu blog.
Configurações do Blogger - Formatação
No Blogger as paginas de configurações podem conter alguns detalhes que passam despercebidos pela maioria e às vezes gastamos muito tempo procurando erros do blog nos lugares errados, nem tudo apresenta problemas no seu blogspot é culpa de códigos HTML, javacript ou CSS, algumas coisas são configurações incorretas.
Porque os códigos não funcionam no blog
Problemas com imagens que não aparecem
Onde colocar os códigos no blog
Por exemplo, o numero de postagens da pagina inicial do seu blog está variando? Você fez a configuração não mexeu mais lá, mas mesmo assim em certos dias que tem mais postagens na sua pagina inicial do que em outros. Isso não é um erro do Blogger.
Porque os códigos não funcionam no blog
Problemas com imagens que não aparecem
Onde colocar os códigos no blog
Por exemplo, o numero de postagens da pagina inicial do seu blog está variando? Você fez a configuração não mexeu mais lá, mas mesmo assim em certos dias que tem mais postagens na sua pagina inicial do que em outros. Isso não é um erro do Blogger.
Editor de Fotos e Imagens Online Grátis
Todos os blogueiros usam e precisam editar imagens para seus blogs, então vamos dar mais uma dica de site para editar imagens online, claro que o melhor é ter um programa instalado no seu computador assim poderá aprender mais sobre ele e trabalhar melhor, mas certamente pode criar imagens ou banners online é muito útil também.
Já fizemos outros tutoriais falando sobre sites online com programas de edição de imagem parecidos com o photoshop e outros recursos:
Como Fazer Imagens e Banners Online
Editor de Imagens Online
Como Fazer Gifs Animados Online para o Blog, Orkut e outros
Editar imagens online - PiZap
E também uma enquete sobre qual o melhor programa grátis para editar imagens. Então achamos que vale a pena olhar e comparar esses sites e programas grátis para editar imagens somente assim você saberá com qual deles consegue melhores resultados.
Já fizemos outros tutoriais falando sobre sites online com programas de edição de imagem parecidos com o photoshop e outros recursos:
Como Fazer Imagens e Banners Online
Editor de Imagens Online
Como Fazer Gifs Animados Online para o Blog, Orkut e outros
Editar imagens online - PiZap
E também uma enquete sobre qual o melhor programa grátis para editar imagens. Então achamos que vale a pena olhar e comparar esses sites e programas grátis para editar imagens somente assim você saberá com qual deles consegue melhores resultados.
Hospedar Arquivos Grátis no Google Sites
Além das imagens muitas vezes precisamos ou queremos hospedar outros tipos de arquivos para usar no blog, mas nem sempre é fácil achar uma boa hospedagem grátis de arquivos e preferencialmente que seja simples de usar e confiável.
Hospedar Arquivos para Download
Hospedagem de sites gratis
Hospedagem de Imagens
Contudo podemos resolver isso utilizando o Google Sites, eles permitem muitos tipos de arquivos, inclusive mp3(musica), js(códigos javascript), e outros.
Hospedar Arquivos para Download
Hospedagem de sites gratis
Hospedagem de Imagens
Contudo podemos resolver isso utilizando o Google Sites, eles permitem muitos tipos de arquivos, inclusive mp3(musica), js(códigos javascript), e outros.
Quais as Palavras Chaves mais Pesquisadas no Google
Todos querem saber como aparecer no primeiro lugar nos resultados do Google e a resposta para isso é simples: use as palavras certas no seu site ou blog, alguns códigos para otimizar seu blog e você estará nos primeiros lugares do Google, mas justamente por ser uma resposta simples e todos saberem torna tão difícil a missão de fazer seu blog aparecer nos primeiros resultados do Google , mas claro que é possível. Veja a seguir algumas dicas de como melhorar sua posição nos resultados do Google:
Descrição e Palavras Chave - Meta Tags
Aparecer na Pesquisa de imagens Google
Otimizar título do blog
Ganhar Tempo e Conseguir mais Visitas no Blog
Sobre escolher melhor os títulos temos mais uma dica para ajudá-lo, você poderá facilmente saber quais são as palavras mais pesquisadas no Google tanto na busca padrão do Google ou busca de imagens, além disso, poderá escolher o período da pesquisa, escolher qual país ou região e muito mais.
Descrição e Palavras Chave - Meta Tags
Aparecer na Pesquisa de imagens Google
Otimizar título do blog
Ganhar Tempo e Conseguir mais Visitas no Blog
Sobre escolher melhor os títulos temos mais uma dica para ajudá-lo, você poderá facilmente saber quais são as palavras mais pesquisadas no Google tanto na busca padrão do Google ou busca de imagens, além disso, poderá escolher o período da pesquisa, escolher qual país ou região e muito mais.
Como configurar blog no UolHost usando ou não o www
Configurar um blog no UolHost corretamente é relativamente fácil mas tem alguns detalhes que precisamos prestar atenção, veja o procedimento para configurar seu blog corretamente usando o UolHost. Se você precisar de ajuda para registrar o domínio veja aqui um tutorial sobre como registrar domínio no Uolhost. Depois que fizer as configurações do dominio no seu blog e estiver tudo funcionando veja também Como Criar e Configurar um Subdominio no Blog.Agora vamos começar a configuração do dominio, primeiro faça login no site do UolHost e clique em ver meus dominios/mudar autoridade DNS
Selecione o domínio que deseja colocar no seu blog, clique no menu ações disponíveis e escolha a opção gerenciar zona DNS
Novamente selecione o domínio desejado, no menu mais ações use a opção gerenciar DNS
Agora vamos criar um direcionamento para o Blogspot preencha os campos da seguinte forma:Tipo: cname
Entrada: www
Valor: ghs.google.com
E clique no botão criar.
No tutorial do próprio UolHost diz que isso é o suficiente porém se fizer somente isso e tentar usar o domínio sem colocar o www ele não encontrará o seu blog, é necessário criar outro redirecionamento para o domínio sem usar o www, então agora crie um no direcionamento com essas informações:
Tipo: A
Entrada: @
Valor: 74.125.95.121
Não tente colar esse numero precisará digitar mesmo.
Agora sim a configuração do UolHost está completa e seu blog funcionará corretamente digitando o endereço de qualquer forma.Depois de terminada essa parte no Uolhost, vamos configurar o blog para usar esse domínio, entre na pagina do blogger, clique em configurações depois na guia publicação do blog que usará o domínio, clique no link escrito domínio personalizado e depois ir para configurações avançadas.
Digite o domínio que configurou usando o www depois digite as letras de confirmação e clique em salvar configurações, depois marque a opção Redirecionado frasescurtas.com.br para www.frasescurtas.com.br, claro que mostrará o endereço do seu blog e não do Frases Curtas que é o blog que estamos configurando para fazer esse tutorial e salve novamente. E já está tudo pronto.
Veja como exemplo o blog Frases Curtas que configuramos o domínio se digitar qualquer um dos endereços abaixo irá para a mesma pagina na internet:
http://frasecurta.blogspot.com
http://frasescurtas.com.br
http://www.frasescurtas.com.br
Então após terminar todas essas configurações no seu blog talvez seja necessário aguardar um pouco para funcionar corretamente os tópicos de ajuda do Blogger e UolHost dizem até 24 horas para tudo certar funcionando perfeitamente, mas nos domínios que já registrei até hoje em pouco mais de uma hora estava tudo certo. Em caso de duvidas entre com contato com o atendimento do UolHost, usei e achei bom o serviço de atendimento.
Para terminar queremos dizer para não entrarem em desespero com a queda de visitas na primeira semana após colocar o domínio no blog é normal, até agora os domínios que coloquei nos primeiros dias as visitas caem quase pela metade, mas depois de uma semana ou pouco mais voltaram ao normal.
Veja também:
Colocar marcadores no blog
Fixar botões no canto da pagina
Formatar menu jump
Informações sobre parcerias
Usar endereço .com.br no blogspot
Hospedagem de sites gratis
Além dos blogs é possível criar um site na internet sem gastar nada, pois existem vários sites que fazem o serviço de hospedagem gratuitamente, veja mais detalhes clicando nos links abaixo:
http://www.50webs.com
60 Mega de espaço
Bandwidth ilimitada
FTP
Você pode usar um domínio próprio se quiser
http://www.000webhost.com
1500 Mega de espaço
Bandwidth 100 GB
FTP
Permite usar ou não domínio próprio
http://vila.bol.uol.com.br
Site em português
15 Mega de espaço
não aceita FTP
Mas um aviso importante para aqueles que pretendem iniciar um site pela primeira vez é que o modo de atualização é bem diferente dos blogs, não existe pagina para postagem, ou seja, cada atualização será feita diretamente no HTML da pagina inteira, por isso só é recomendável para aqueles que sabem HTML, CSS, e preferencialmente tenham programas para editar paginas de internet.
Veja também:
Formulário em PHP para enviar email
Hospedagem gratuita para imagens
Hospedar arquivos para Download
http://www.50webs.com
60 Mega de espaço
Bandwidth ilimitada
FTP
Você pode usar um domínio próprio se quiser
http://www.000webhost.com
1500 Mega de espaço
Bandwidth 100 GB
FTP
Permite usar ou não domínio próprio
http://vila.bol.uol.com.br
Site em português
15 Mega de espaço
não aceita FTP
Mas um aviso importante para aqueles que pretendem iniciar um site pela primeira vez é que o modo de atualização é bem diferente dos blogs, não existe pagina para postagem, ou seja, cada atualização será feita diretamente no HTML da pagina inteira, por isso só é recomendável para aqueles que sabem HTML, CSS, e preferencialmente tenham programas para editar paginas de internet.
Veja também:
Formulário em PHP para enviar email
Hospedagem gratuita para imagens
Hospedar arquivos para Download
Formulário para envio de email em PHP
Essa dica é mais útil para quem tem sites do que para os blogueiros, por que é um formulário que envia email feito em duas partes, um arquivo HTML e outro php. Você só precisa criar os dois arquivos e salvar na mesma pasta onde hospeda seu site e pronto.Primeiro salve o código abaixo com o nome contato.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.form_botao {
background-color: #CCCCCC;
font: 15px Verdana;
border: 1px solid #0000FF;
margin: 3px;
}
.form_campos {
background-color: #FFFFFF;
font: 15px Verdana;
border: 2px solid #000066;
}
td {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 3px;
}
.style1 {
font-size: 18pt;
font-family: "Comic Sans MS";
letter-spacing: 2px;
word-spacing: 5px;
}
-->
</style>
</head>
<body>
<form action="falar.php" method="post" name="formulario" id="formulario">
<div align="left">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center" scope="col"><span class="style1">Fale Conosco</span></td>
</tr>
<tr>
<td align="right" scope="col">Nome</td>
<td scope="col"><input class="form_campos" type="text" name="nome" size="34" /></td>
</tr>
<tr>
<td align="right" scope="col">E-mail</td>
<td scope="col"><input class="form_campos" type="text" name="e-mail" size="34" /></td>
</tr>
<tr>
<td align="right" scope="col">Site/Blog</td>
<td scope="col"><input class="form_campos" type="text" name="endereco" size="34" id="endereco" /></td>
</tr>
<tr>
<td align="right" scope="col">Assunto</td>
<td scope="col"><input class="form_campos" type="text" name="assunto" size="34" id="assunto" /></td>
</tr>
<tr>
<td align="right" scope="col">Mensagem</td>
<td scope="col"><textarea class="form_campos" name="mensagem" cols="34" rows="4"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center" scope="col"><input class="form_botao" type="submit" name="Enviar" value="Enviar " />
<input class="form_botao" type="reset" name="Limpar" value="Limpar" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Depois com esse outro trecho crie um arquivo com o nome falar.php e salve na mesma pasta onde está o contato.html
<?
$hoje_tmp = getdate();
$hoje = ($hoje_tmp[hours].":".$hoje_tmp[minutes].":".$hoje_tmp[seconds]);
$nome = $_POST["nome"]; //trata a variável nome
$endereco = $_POST["endereco"]; //trata a variável estado
$email = $_POST["e-mail"]; //trata a variável e-mail
$assunto = $_POST["assunto"]; //trata a variável assunto
$mensagem = $_POST["mensagem"]; //trata a variável mensagem
global $email; //transforma em variavel global a variável e-mail
$enviou = mail("dicasparablogs@gmail.com", // aqui voce coloca o seu e-mail
"$assunto",
"Nome: $nome
Endereco: $endereco
E-mail: $email
Assunto: $assunto
Mensagem: $mensagem",
"From: $email <$nome>");
if ($enviou){
header('location:http://www.acessoriosparablogs.com.br/sucessomail.html');
}
else {
header('location:http://www.acessoriosparablogs.com.br/erromail.html');
}
?>
Note que tem uma linha onde está o nosso email:
$enviou = mail("dicasparablogs@gmail.com", // aqui você coloca o seu e-mail, então troque para o endereço de email que você desejar.
Outra coisa é no final do código tem:
if ($enviou){
header('location:http://www.acessoriosparablogs.com.br/sucessomail.html');
}
else {
header('location:http://www.acessoriosparablogs.com.br/erromail.html');
}
?>
Isso são as paginas para as quais o site será redirecionado em caso de sucesso ou erro no envio do email, então altere os endereços. Agora que já criou os dois arquivos só precisa fazer upload dos arquivos, mas tenha os dois precisam estar na mesma pasta no servidor onde você tem seu site.
Outra coisa importante é que nem sempre esses formulários funcionam em hospedagens grátis, já ouvi varias queixas sobre isto, mas o problema não está nos códigos, mas na disponibilidade de serviço do local onde você hospeda seu site.
Copiamos e modificamos esses códigos a partir da pagina de ajuda do UolHost e estamos usando em nosso novo site Acessórios para Blogs, mas esse site ainda está no inicio e falta muita coisa a fazer nele, portanto pedimos a compreensão de quem visitar nosso novo site quando ao pouco conteúdo e alguma possível falha nos links ou qualquer outra coisa.
Veja também:
Enviar atualizações do seu blog por email
Formulários. 9
Achar e baixar imagens, fotos, icones para Blog
Já faz tempo que os blogueiros trocam o favicon (imagem da barra de endereço) do blog, mas há pouco tempo o blogger colocou essa função na sua pagina design o que facilitou muito a troca desta imagem sem precisar mexer com códigos, mas ainda restou um problema como achar ou fazer icones no tamanho certo?
Por isso vamos mostrar mais um site onde você pode encontrar e baixar icones para usar no seu blog. Claro que você mesmo pode fazer sua imagem, mas devido ao tamanho dela é um pouco complicado.
Por isso vamos mostrar mais um site onde você pode encontrar e baixar icones para usar no seu blog. Claro que você mesmo pode fazer sua imagem, mas devido ao tamanho dela é um pouco complicado.
Escrever sobre Fotos e Imagens - Criar Marca d'agua
O plagio é um grande problema da internet, mas como proteger suas fotos e imagens na internet, qual a melhor maneira de impedir copias das imagens no seu blog? Essas são perguntas que não tem resposta ou pelo menos não tem uma resposta 100% segura, apesar de usa alguns códigos para impedir cópias como, por exemplo:
Proteger os textos do blog contra copias
Impedir Seleção de texto e imagens
Leia também: Como saber quem copiou meu blog
Algumas pessoas sempre acham um jeito de copiar as imagens. Então uma boa opção é escrever sobre a imagem colocando o endereço do seu blog antes de enviar para internet ou colocar o endereço do seu perfil no Orkut, Facebook ou qualquer outra rede social no caso de postar fotos em algumas delas. Isso não impedirá a copia, mas ninguém quer mostrar uma imagem no seu blog com o endereço de outro escrito nela.
Proteger os textos do blog contra copias
Impedir Seleção de texto e imagens
Leia também: Como saber quem copiou meu blog
Algumas pessoas sempre acham um jeito de copiar as imagens. Então uma boa opção é escrever sobre a imagem colocando o endereço do seu blog antes de enviar para internet ou colocar o endereço do seu perfil no Orkut, Facebook ou qualquer outra rede social no caso de postar fotos em algumas delas. Isso não impedirá a copia, mas ninguém quer mostrar uma imagem no seu blog com o endereço de outro escrito nela.
Colocar Efeitos em Fotos e Imagens: Bordas, Desenhos, Texto, Editar Cores
Já falamos sobre diversos sites e programas para criar, editar e modificar imagens, fazer banners e tudo mais relacionado com edição de fotos e imagens online, mas achamos outro site bem interessante que reúne muitos recursos na mesma pagina.
Sobre edição de fotos e imagens leia também:
Editor de Fotos e Imagens Online Grátis
Programa para editar imagem ou fotos grátis
Nele é possível criar bordas nas imagens, colocar imagens (corações, bichos e muitos outros efeitos em suas imagens), escrever sobre as fotos, enfim uma quantidade incrível de possibilidade para editar e modificar suas fotos, além de ser útil para os blogueiros isso também é muito interessante para quem gosta de enviar imagens nos recados do Orkut, assim poderá criar suas imagens como desejar e depois salvar no computador e usar como quiser.
Sobre edição de fotos e imagens leia também:
Editor de Fotos e Imagens Online Grátis
Programa para editar imagem ou fotos grátis
Nele é possível criar bordas nas imagens, colocar imagens (corações, bichos e muitos outros efeitos em suas imagens), escrever sobre as fotos, enfim uma quantidade incrível de possibilidade para editar e modificar suas fotos, além de ser útil para os blogueiros isso também é muito interessante para quem gosta de enviar imagens nos recados do Orkut, assim poderá criar suas imagens como desejar e depois salvar no computador e usar como quiser.
Efeitos Estrelinhas Caindo do Ponteiro do Mouse
Achamos um código para colocar estrelinhas caindo do cursor do mouse (sinal de +) para usar no blog, ele é bem simples de colocar e funcionou bem nos testes que fizemos com vários navegadores: Internet Explorer, Firefox e Google Chrome. Se quiser veja outras formas de personalizar o cursor do mouse no blog:
Trocar o cursor do mouse por uma imagem
Imagem no cursor do mouse
Caso tenha duvidas sobre onde colocar os códigos no blog não se preocupe, pois é bem simples de colocar esse efeito de estrelas seguindo o ponteiro do mouse.
Trocar o cursor do mouse por uma imagem
Imagem no cursor do mouse
Caso tenha duvidas sobre onde colocar os códigos no blog não se preocupe, pois é bem simples de colocar esse efeito de estrelas seguindo o ponteiro do mouse.
Mostrar Somente os Títulos das Postagens
Mostre somente os títulos das postagens nas paginas dos marcadores ou paginas mais antigas do blog, deixando as postagens completas(ou resumo das postagens) somente na pagina inicial e nas paginas individuais de cada post do blog. Você também pode alterar a quantidade de posts por pagina dos marcadores.
Já testamos esse código e funcionou perfeitamente nas paginas estáticas do blogger (também conhecidas como paginas extras). A utilidade de mostrar apenas os títulos das postagens é o carregamento mais rápido das paginas e, além disso, podemos ganhar mais pageviews (visualizações de pagina) que é uma das técnicas de SEO para mostrar aos buscadores(pesquisa Google principalmente) que o seu blog é relevante ou seja as pessoas entraram nele e visitaram mais paginas.
Já testamos esse código e funcionou perfeitamente nas paginas estáticas do blogger (também conhecidas como paginas extras). A utilidade de mostrar apenas os títulos das postagens é o carregamento mais rápido das paginas e, além disso, podemos ganhar mais pageviews (visualizações de pagina) que é uma das técnicas de SEO para mostrar aos buscadores(pesquisa Google principalmente) que o seu blog é relevante ou seja as pessoas entraram nele e visitaram mais paginas.
Personalizar gadgets do Blog
Esse tutorial vai mostrar como é simples formatar o texto dos links dos marcadores do blog e isso pode ser utilizado para formatar qualquer gadget do seu blogger, pois o modo de fazer é o mesmo e funcionará bem em qualquer texto que esteja dentro de um gadget.
Primeiro vamos entrar na pagina editar HTML e procurar pelos marcadores do blog, aperte ctrl+F no seu teclado que aparecerá uma caixa para procurar texto na pagina, então digite o título dos seus marcadores em nosso caso utilizamos o título guia rápido.
Primeiro vamos entrar na pagina editar HTML e procurar pelos marcadores do blog, aperte ctrl+F no seu teclado que aparecerá uma caixa para procurar texto na pagina, então digite o título dos seus marcadores em nosso caso utilizamos o título guia rápido.
Efeito na tag Alt - Personalizar texto sobre a imagem
Veja como criar um efeito na tag alt, aquela que faz aparecer um texto quando colocamos o mouse sobre uma imagem. E o melhor é um código fácil de ser utilizado no blog. Com esse código o texto que aparece seguirá os movimentos do mouse sobre a foto. Além disso, podemos formatar o texto, escolher a cor da caixinha da caixinha de texto alt.
Personalizar pesquisa (cores e imagens da caixa de busca)
Esse tutorial mostrará como criar e personalizar uma pesquisa dentro do seu blog, vamos usar imagens e cores diferentes para fazer o campo de busca, trocar o botão pesquise por uma imagem a sua escolha e explicar como fazer essa pesquisa dentro do blog combinar com o seu template. Vamos trocar a imagem de fundo, cores do campo de busca e usar uma imagem como botão de pesquisa, mas os resultados dela serão os mesmos da pesquisa google para o seu blog.
Como fazer Apresentação de Slides com Banners
Vamos criar uma apresentação de slides com banners no seu blog, o código é um pouco longo, mas depois de instalar você verá que adicionar mais banners ou trocar os que já colocaram é muito simples de fazer é igual a mudar um banner comum. Já publicamos outro código pode ser utilizado para mostrar os banners deslizando pela pagina que também pode criar um bom efeito visual no seu blog.
Veja aqui uma demostração em nosso outro site com uma apresentação de slides com banners se você quiser ver o código em funcionamento, lá também poderá fazer o download dos arquivos javascript usados neste código.
Veja aqui uma demostração em nosso outro site com uma apresentação de slides com banners se você quiser ver o código em funcionamento, lá também poderá fazer o download dos arquivos javascript usados neste código.
Fazer o efeito LightBox - Imagens em Destaque
O efeito Light Box é mais simples do que parece de ser colocado no blog, esse efeito faz que ao clicar numa imagem ela apareça sobre o pagina inteira do blog e cobrindo o restante da tela com um tom de cor mais escura. Vamos mostrar numa imagem para ficar mais fácil de entender.
Como e onde editar fotos online
Já publicamos uma lista com programas grátis para editar imagens e fotos, mas também é possível modificar as fotos ou imagens diretamente pela internet sem precisar baixar nada e gratuitamente. Veja alguns sites onde você pode modificar suas fotos com apenas alguns cliques:http://www.change-images.com
Na pagina inicial tem um menu que algumas opções que são muito simples de usar, por exemplo:
Resize Images: modificar o tamanho da foto
Convert Images: converte para outros formatos de arquivo (gif, jpg, png, ico, pdf e outros)
Photo Frames: coloca vários estilos de molduras nas imagens.
http://www.photofunia.com
Esse também é muito fácil de mexer e serve para se divertir com as imagens principalmente para dar alguns efeitos especiais no seu álbum de fotos no Orkut. Entre outras coisas tem a possibilidade de transformar sua foto numa parece, ou aparecer na íris do olho, ou ainda o site faz uma montagem para sua imagem parecer estar numa galeria, até em forma de vestido... enfim gostei muito da diversidade de efeitos. São interessantes para postagens de blogs, mas acho que as pessoas que gostam de fotos e Orkut acharam muito mais legais.
http://www.pizap.com
Já falei desse site uma vez, mas vale à pena repetir, ele permite fazer modificações na sua foto colocando outros olhos, cabelo, boca e tudo mais. É possível escrever sobre as fotos, colocar aqueles bolões de texto ou pensamentos igual das revistas em quadrinhos. Adicionar alguns efeitos e até pintar sobre a imagem.
Espero que gostem e se divirtam com esses sites, embora sejam para editar fotos e não fazer templates, banners e outras coisas para blogs são bem interessantes e sempre podemos aproveitar algumas coisas onde menos esperamos... Se preferir veja uma lista de programas gratuitos para fazer alterações e criar suas imagens.
Sites indicados por pessoas que visitam esse blog:
Photoshop Online
PicNik
Trocar o cursor do mouse por uma imagem
Muita gente procura como mudar ou trocar o cursor do mouse por uma imagem, encontramos um jeito bem fácil de fazer isso. Usando os cursores que o site Totally Free Cursors oferece, e como o próprio nome diz são grátis.
Você só precisa entrar no site e escolher qual imagem quer usar no lugar do cursor do mouse, veja que no menu tem muitas opções, quando achar uma que goste, clique sobre ela, então vai aparecer uma pagina com o código desse cursor, onde além de pegar o código poderá visualizar o cursor em funcionamento.
A pagina diz MySpace Codes, mas testei e funcionou perfeitamente aqui no blogspot e apareceu a imagem em vez do ponteiro do mouse, apenas quando passar o mouse sobre vídeos e alguns anúncios o cursor volta ao modelo padrão, mas na maior parte fica com a imagem que escolheu.
Então copie esse código e coloque no seu blog pela pagina layout, adicionar gadget, html/javascript e cole o código que pegou no site. Não importa o lugar da pagina que ficará isso ele funcionará normalmente.
Veja também como colocar uma imagem seguindo o ponteiro do mouse.
Você só precisa entrar no site e escolher qual imagem quer usar no lugar do cursor do mouse, veja que no menu tem muitas opções, quando achar uma que goste, clique sobre ela, então vai aparecer uma pagina com o código desse cursor, onde além de pegar o código poderá visualizar o cursor em funcionamento.
A pagina diz MySpace Codes, mas testei e funcionou perfeitamente aqui no blogspot e apareceu a imagem em vez do ponteiro do mouse, apenas quando passar o mouse sobre vídeos e alguns anúncios o cursor volta ao modelo padrão, mas na maior parte fica com a imagem que escolheu.
Então copie esse código e coloque no seu blog pela pagina layout, adicionar gadget, html/javascript e cole o código que pegou no site. Não importa o lugar da pagina que ficará isso ele funcionará normalmente.
Veja também como colocar uma imagem seguindo o ponteiro do mouse.
Mudar a cor de fundo com um clique
Um efeito interessante é permitir que o visitante do blog escolha a cor de fundo da pagina apenas clicando na cor que mais gosta, dependendo do publico do seu blog essa é uma boa maneira para despertar a curiosidade das pessoas sobre o blog e o melhor de tudo o código para fazer isso é muito simples e fácil de usar.
Entre na pagina layout, adicionar gadget, html/javascript e coloque esse código:
<a href="#" onclick="document.bgColor='#0000ff'">Azul</a><br />
<a href="#" onclick="document.bgColor='#FFFF00'">Amarelo</a><br />
<a href="#" onclick="document.bgColor='#000000'">Preto</a><br />
Veja que as três linhas são basicamente iguais, portanto para usar outras cores ou dar mais opções só precisa alterar o texto com o nome da cor e o código da cor de fundo, no caso da primeira linha #0000ff e azul, cuidado para não apagar as aspas nem outros sinais do código senão ele não funcionará.
Outra coisa que você precisa alterar é na pagina editar html, procure por: body{....} se dentro das chaves do body tiver algo definindo a cor de fundo você precisará apagar senão o código para mudar a cor de fundo não funcionará, veja se tem background-color ou background-image: url(......) e se encontrar apague.
Infelizmente para usar esse efeito no seu blog ele sempre aparecerá com o fundo branco, pois se definir outra cor de fundo não conseguirá fazer o código que indicamos funcionar e alterar a cor da pagina.
Você também poderá fazer isso com imagens usando o código abaixo:
<a href="#" onclick="document.body.background='imagem 1'"><img src="imagem 1" border="0" /></a><br />
<a href="#" onclick="document.body.background='imagem 2'"><img src="imagem 2" border="0" /></a><br />
<a href="#" onclick="document.body.background='imagem 3'"><img src="imagem 3" border="0" /></a><br />
Se preferir salve uma miniatura da imagem para usar como link para troca de imagem de fundo, isso é util dependendo do tamanho da imagem de fundo original que for utilizar no seu blog.
Veja também:
Botões fixos no canto da pagina
Formatar menu jump
Parcerias
Colocar um domínio no blog
Erros nos códigos
Entre na pagina layout, adicionar gadget, html/javascript e coloque esse código:
<a href="#" onclick="document.bgColor='#0000ff'">Azul</a><br />
<a href="#" onclick="document.bgColor='#FFFF00'">Amarelo</a><br />
<a href="#" onclick="document.bgColor='#000000'">Preto</a><br />
Veja que as três linhas são basicamente iguais, portanto para usar outras cores ou dar mais opções só precisa alterar o texto com o nome da cor e o código da cor de fundo, no caso da primeira linha #0000ff e azul, cuidado para não apagar as aspas nem outros sinais do código senão ele não funcionará.
Outra coisa que você precisa alterar é na pagina editar html, procure por: body{....} se dentro das chaves do body tiver algo definindo a cor de fundo você precisará apagar senão o código para mudar a cor de fundo não funcionará, veja se tem background-color ou background-image: url(......) e se encontrar apague.
Infelizmente para usar esse efeito no seu blog ele sempre aparecerá com o fundo branco, pois se definir outra cor de fundo não conseguirá fazer o código que indicamos funcionar e alterar a cor da pagina.
Você também poderá fazer isso com imagens usando o código abaixo:
<a href="#" onclick="document.body.background='imagem 1'"><img src="imagem 1" border="0" /></a><br />
<a href="#" onclick="document.body.background='imagem 2'"><img src="imagem 2" border="0" /></a><br />
<a href="#" onclick="document.body.background='imagem 3'"><img src="imagem 3" border="0" /></a><br />
Se preferir salve uma miniatura da imagem para usar como link para troca de imagem de fundo, isso é util dependendo do tamanho da imagem de fundo original que for utilizar no seu blog.
Veja também:
Botões fixos no canto da pagina
Formatar menu jump
Parcerias
Colocar um domínio no blog
Erros nos códigos
Colocar bordas nas imagens do blog
É possível colocar uma borda em todas as imagens das postagens de uma só vez e ainda dar um efeito diferente nesta borda quando o mouse está sobre a imagem. Isso é uma alteração bem fácil e modifica um pouco o template, podendo deixar o blog mais bonito. Veja como ficou nosso banner com bordas(ao lado).Para colocar uma borda em todas as imagens das postagens entre na pagina editar html e coloque no junto dos outros estilos css esse código:
.post img{border: 1px solid #000000;padding: 1px;}
.post a:hover img{border: 1px solid #6699FF;}
Se tiver duvidas sobre onde colocar procure por body{.... e coloque na linha acima dele, assim fica fácil achar para futuras alterações, o código acima é só uma das possibilidades de bordas você pode ver aqui informações mais detalhadas sobre como modificar o estilo das bordas.
A parte padding:1px faz que a borda não fique colada na imagem, você pode retirar essa parte do código ou aumentar a distancia para deixar as imagens do seu blog com uma melhor aparência. Queremos lembrar as bordas somente mudam de aparência se a imagem tiver um link nelas, senão mesmo com o mouse sobre elas continuaram com a mesma borda.
Veja também:
Conseguir mais visitas
Google Analytics
Formulario em PHP
Efeitos em links
Lista de banners ou links em ordem aleatória
Imagem no título da postagem
Vamos colocar um ícone ou imagem ao lado do titulo das postagens, isso serve para deixar bem localizado o inicio de cada um dos textos afinal tem alguns modelos de template que as coisas ficam juntas demais, portanto seria bom ter algo que destacasse o inicio de cada um dos posts do blog.Fazer isso é bem simples entre na pagina editar HTML e procure por H3{... } ou o estilo que controla o titulo do blog que também pode ser h2 em alguns casos, em nosso blog de Dicas de Sites é assim:
post h3 a, .post h3 a:visited, .post h3 strong{….}
Para ter certeza que está modificando o estilo certo antes de começar faça um teste, coloque border: 1px solid #000000; dentro das chaves no estilo que você acha que é o certo no seu modelo isso faz aparecer uma borda preta em volta do estilo, então clique para visualizar o blog se apareceu a borda nos títulos da postagem é porque este é o lugar certo. Caso o fundo do seu blog seja preto ou escuro faça o teste usando ffffff em vez de 000000 para a borda ficar branca.
Agora vamos colocar uma imagem ao lado do título da postagem insira o seguinte código:
background-image: url(http://img195.imageshack.us/img195/668/iconebig.jpg);
background-repeat: no-repeat;text-indent: 30px;
background-position: left top;
Você só precisa hospedar uma imagem e colocar o endereço no lugar desta que está no exemplo, cuidado na hora de fazer a imagem para que ela não seja grande demais senão aparecerá somente uma parte dela. Outro ajuste necessário é o valor 30px no final da segunda linha, isso é um recuo de texto, ou seja, quando maior o numero mais espaço terá o texto da margem esquerda no caso de não usar o texto centralizado, então é só modificar esse numero para que o título não fique sobre a imagem. Agora é só visualizar e se ficou como você queria salvar as alterações no blog.
Veja também:
Personalizar menu jump
Fixar botões no canto da pagina
Colocar marcadores no blog
Usar domínio próprio no blog
Aumentar lucro com o blog
Alterar cores, tamanho, letra do menu jump
Vamos mostrar como mudar as cores, tamanho e tipo de fonte do menu jump, além disso, é possível escolher a cor de fundo desse menu suspenso inteiro ou colocar cores diferentes em cada opção. Veja o menu abaixo:O código para colocar um menu de salto no blog é o seguinte:
<script language="JavaScript" type="text/javascript">
function openDir( form ) {
var newIndex = form.fieldname.selectedIndex;
if ( newIndex == 0 ) {
alert( "Please select a location!" );
} else {
cururl = form.fieldname.options[ newIndex ].value;
window.location.assign( cururl );
}
}
</script>
<form name="form" id="form">
<select style="width:300px; font-family:'Comic Sans MS'; font-size:14pt; background:#FFFFCC" name="fieldname" onchange="openDir( this.form )">
<option>Nossos Sites</option>
<option value="http://frasecurta.blogspot.com">Frases Curtas</option>
<option style="background:#66FFFF" value="http://jornaljd.blogspot.com">Meu Jornal</option>
<option value="http://dicasdesitesuteis.blogspot.com/">Dicas de Sites Úteis</option>
</select>
</form>
Note que tem algumas coisas a mais neste código na linha <select... tem style="width:300px; font-family:'Comic Sans MS'; font-size:14pt; background:#FFFFCC" isso altera o estilo do menu inteiro, usamos a mesma formatação em CSS que usamos em qualquer texto, então é a mesma coisa que formatar um texto em qualquer outra parte do blog. O valor 300 é a largura, então cuidado para não colocar uma largura maior que a da coluna onde ficará o menu.
Outra coisa é a linha com o link para o Meu Jornal, nela encontramos style="background:#66FFFF” isso faz mudar a cor de fundo somente deste item do menu jump. Se quiser pode usar cores diferentes que cada um dos itens do menu.
Alterar a quantidade de links é fácil basta adicionar mais linhas seguindo o modelo <option value="http://dicasdesitesuteis.blogspot.com/">Dicas de Sites Úteis</option>, e claro trocando o nome e endereço do site.
Para colocar no blog entre na pagina layout, adicionar gadget, html/javascript e cole o código. Esse menu é bem simples de usar, mas precisa de cuidado para não apagar por engano as aspas ou qualquer outro sinal do código senão ele não funcionará corretamente.
Durante essa explicação falamos em menu de salto, menu jump, menu suspenso que na verdade todos são a mesma coisa apenas é conhecido por nomes diferentes.
Veja também:
Código das cores
Abri menu jump em nova janela
Colocar fundo semi transparente no blog
Para colocar um fundo no blog semi transparente, quando mesmo através do fundo das postagens é possível ver em parte o fundo do blog, é simples basta colocar uma linha de código na pagina editar HTML, mas vamos explicar um pouco mais detalhado como isso funciona.
Entre na pagina editar HTML e procure por:
#outer-wrapper {
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}
No seu blog será diferente o que está dentro das chaves, mas o importante é localizar #outer-wrapper, então coloque junto com os códigos que já estão lá isso aqui:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.7;
Fica deste jeito:
#outer-wrapper {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.7;
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}
Os valores 0.7 e 70 são apenas exemplos então pode mudar como desejar, mas mantenha a proporção (0.5 e 50 ou 0.9 e 90....). A grande questão desse código é que não existe fundo semi transparente, o que ele faz na verdade é deixar tudo semi transparente. Quero dizer o fundo e também as letras e imagens, mas algumas coisas podem ficar com opacidade normal(não transparente) principalmente conteúdos externos.
Se preferir pode usar somente para a coluna principal(postagens) ou só nos menus do blog para isso em vez de fazer o que dissemos no estilo outer-wrapper faça em #main (são as postagens) ou #sidebar(colunas do blog).
Após colocar o código clique para visualizar e se ficou do jeito que você queria então salve as alterações. Se revolver ficar fazendo vários testes para ver qual jeito fica melhor sugerimos salvar durante esses testes assim caso erre em alguma coisa não precisará começar tudo novamente.
Veja também:
Trocar imagem quando o mouse está sobre ela
Imagens semi transparentes
Endereço correto da imagem
Fixar uma postagem na pagina inicial do blog
Entre na pagina editar HTML e procure por:
#outer-wrapper {
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}
No seu blog será diferente o que está dentro das chaves, mas o importante é localizar #outer-wrapper, então coloque junto com os códigos que já estão lá isso aqui:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.7;
Fica deste jeito:
#outer-wrapper {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.7;
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}
Os valores 0.7 e 70 são apenas exemplos então pode mudar como desejar, mas mantenha a proporção (0.5 e 50 ou 0.9 e 90....). A grande questão desse código é que não existe fundo semi transparente, o que ele faz na verdade é deixar tudo semi transparente. Quero dizer o fundo e também as letras e imagens, mas algumas coisas podem ficar com opacidade normal(não transparente) principalmente conteúdos externos.
Se preferir pode usar somente para a coluna principal(postagens) ou só nos menus do blog para isso em vez de fazer o que dissemos no estilo outer-wrapper faça em #main (são as postagens) ou #sidebar(colunas do blog).
Após colocar o código clique para visualizar e se ficou do jeito que você queria então salve as alterações. Se revolver ficar fazendo vários testes para ver qual jeito fica melhor sugerimos salvar durante esses testes assim caso erre em alguma coisa não precisará começar tudo novamente.
Veja também:
Trocar imagem quando o mouse está sobre ela
Imagens semi transparentes
Endereço correto da imagem
Fixar uma postagem na pagina inicial do blog
Fixar botões no canto da pagina
Colocamos neste blog alguns botões no canto da pagina para adicionar aos favoritos, assinar feed, atualizações por email e para nossa comunidade no orkut, e varias pessoas perguntaram como fazer isso. O código é bem simples e até já publicamos aqui, mas numa forma simplificada trata-se do mesmo código usado para voltar ao topo da pagina.
A única diferença foi que acrescentamos mais coisas dentro dele, veja abaixo:
<style type="text/css">
<!--
.menufixo img{padding: 5px;display: inline
}
-->
</style>
<div style="background-color:#FFFFFF; border-left:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; right:0px;"><div class="menufixo">
<a href="#"><img border="0" src="IMAGEM TOPO DA PÁGINA"/></a>
<script language="JavaScript" type="text/JavaScript">
function favoritos() {
if ( navigator.appName != 'Microsoft Internet Explorer' )
{ window.sidebar.addPanel("Dicas para Blogs","http://www.dicasparablogs.com.br",""); }
else { window.external.AddFavorite("http://www.dicasparablogs.com.br","Dicas para Blogs"); } }
</script><a href="javascript:void(favoritos());" title="Adicione aos Favoritos"><img border="0" src="IMAGEM FAVORITOS"/></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=dicaparablog&loc=pt_BR" target="_blank" title="Atualizações por Email"><img border="0" src="IMAGEM ATUALIZAÇÕES POR EMAIL"/></a>
<a href="http://www.orkut.com.br/Main#Community.aspx?cmm=46751209" target="_blank" title="Comunidade no Orkut"><img border="0" src="IMAGEM COMUNIDADE NO ORKUT"/></a>
<a href="http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html" target="_blank" title="Dicas para Blogs"><img border="0" src="http://img16.imageshack.us/img16/9066/iconeblogh.gif"/></a>
</div></div>
Coloque esse código pela pagina layout, adicionar gadget, html/javascript, não importa o lugar da pagina, ele aparecerá sempre no canto inferior direito do seu blog. O começo do código não precisa de alterações, mas se quiser pode modificar:
padding:5px – distancia entre as imagens
background-color:#FFFFFF; - cor de fundo
border-left:1px solid #000000; - borda lateral
border-top:1px solid #000000; - borda superior
Depois desse trecho são apenas links com imagens como fazemos em qualquer outra parte do blog, antes de colocar no blog faça as alterações necessárias nos trechos em negrito.
Quanto a enviar atualizações por email aqui tem a explicação sobre como fazer isso usando o feedburner.
Deixamos o código apenas com as indicações de onde vão as imagens porque se deixássemos o código pronto, provavelmente quando muitas pessoas começassem usar o código as imagens iriam parar de aparecer porque sites de hospedagem grátis excluem ou bloqueiam imagens acessadas muitas vezes(milhares de vezes por dia, mas isso depende de qual site usa) então é mais seguro e confiável cada um hospedar as imagens.
Clique com o botão direito do mouse sobre cada uma das imagens acima e escolha a opção salvar imagem depois só precisa hospedá-las, recomendamos usar o Imageshack. Colocamos um link para essa postagem no final do código e pedimos para que não retirem isso do código a fim de facilitar que outros blogueiros que gostem da idéia tenham facilidade em encontrar esse código.
Veja também:
Adicionar aos favoritos
Hospedar imagens
Colocar ou modificar bordas
A única diferença foi que acrescentamos mais coisas dentro dele, veja abaixo:
<style type="text/css">
<!--
.menufixo img{padding: 5px;display: inline
}
-->
</style>
<div style="background-color:#FFFFFF; border-left:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; right:0px;"><div class="menufixo">
<a href="#"><img border="0" src="IMAGEM TOPO DA PÁGINA"/></a>
<script language="JavaScript" type="text/JavaScript">
function favoritos() {
if ( navigator.appName != 'Microsoft Internet Explorer' )
{ window.sidebar.addPanel("Dicas para Blogs","http://www.dicasparablogs.com.br",""); }
else { window.external.AddFavorite("http://www.dicasparablogs.com.br","Dicas para Blogs"); } }
</script><a href="javascript:void(favoritos());" title="Adicione aos Favoritos"><img border="0" src="IMAGEM FAVORITOS"/></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=dicaparablog&loc=pt_BR" target="_blank" title="Atualizações por Email"><img border="0" src="IMAGEM ATUALIZAÇÕES POR EMAIL"/></a>
<a href="http://www.orkut.com.br/Main#Community.aspx?cmm=46751209" target="_blank" title="Comunidade no Orkut"><img border="0" src="IMAGEM COMUNIDADE NO ORKUT"/></a>
<a href="http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html" target="_blank" title="Dicas para Blogs"><img border="0" src="http://img16.imageshack.us/img16/9066/iconeblogh.gif"/></a>
</div></div>
Coloque esse código pela pagina layout, adicionar gadget, html/javascript, não importa o lugar da pagina, ele aparecerá sempre no canto inferior direito do seu blog. O começo do código não precisa de alterações, mas se quiser pode modificar:
padding:5px – distancia entre as imagens
background-color:#FFFFFF; - cor de fundo
border-left:1px solid #000000; - borda lateral
border-top:1px solid #000000; - borda superior
Depois desse trecho são apenas links com imagens como fazemos em qualquer outra parte do blog, antes de colocar no blog faça as alterações necessárias nos trechos em negrito.
Quanto a enviar atualizações por email aqui tem a explicação sobre como fazer isso usando o feedburner.
Deixamos o código apenas com as indicações de onde vão as imagens porque se deixássemos o código pronto, provavelmente quando muitas pessoas começassem usar o código as imagens iriam parar de aparecer porque sites de hospedagem grátis excluem ou bloqueiam imagens acessadas muitas vezes(milhares de vezes por dia, mas isso depende de qual site usa) então é mais seguro e confiável cada um hospedar as imagens.
Clique com o botão direito do mouse sobre cada uma das imagens acima e escolha a opção salvar imagem depois só precisa hospedá-las, recomendamos usar o Imageshack. Colocamos um link para essa postagem no final do código e pedimos para que não retirem isso do código a fim de facilitar que outros blogueiros que gostem da idéia tenham facilidade em encontrar esse código.
Veja também:
Adicionar aos favoritos
Hospedar imagens
Colocar ou modificar bordas
Criar um menu expansível no blog
Hoje vamos fazer um menu expansível ou então colocar algum conteúdo que só é mostrado ao clicar no título, ele funciona da seguinte maneira aparece somente o título do menu e quando clicamos ele desliza mostrando seu conteúdo e se clicar novamente ele volta a desaparecer. Você pode usar para colocar o que você quiser: texto, uma lista de links, imagens... Para colocar esse menu expansível no blog dá um pouco de trabalho, mas vale à pena, pois o efeito visual dele é muito bom.
Entre na pagina editar html e ache </head> então coloque isso antes dela:
<script src="https://sites.google.com/site/tutoriaisblogger/menu-expan.js" type="text/javascript"></script>
Após isso vá um pouco mais acima e junto com os outros estilos CSS cole esse trecho:
.CollapsiblePanel {
padding: 3px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.CollapsiblePanelTab {
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: italic;
}
.CollapsiblePanelContent {
padding: 5px;
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-weight: normal;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
}
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #FFCC99;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;}
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
text-decoration: underline;
color: #0000FF;}
Para modificar as cores que usamos veja como formatar texto, modificar bordas e fazer botões e modifique os estilos CollapsiblePanelContent(conteúdo), CollapsiblePanelOpen .CollapsiblePanelTab(título quando o conteúdo é mostrado) e CollapsiblePanelTab (link para mostrar o conteúdo), reparem que usamos o código as bordas separadamente para cada lado(left, right, top, bottom) isso para fazer parecer uma caixa quando expandimos o menu, então modifique como desejar. Então clique para salvar, por enquanto ainda não aparecerá nada no seu blog.
Entre na pagina designer, adicionar gadget, html/javascript e cole esse código:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div tabindex="0" class="CollapsiblePanelTab">título do menu</div>
<div class="CollapsiblePanelContent">Conteúdo Oculto</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
//-->
</script>
Onde está escrito título do menu é o texto que aparecerá no seu blog, quando alguém clicar nele vai abrir o resto do menu e mostrar tudo que tem dentro daquele menu. Portanto onde escrevemos conteúdo oculto você deve colocar o que desejar links, imagens, enfim qualquer coisa, apenas no caso de imagens cuidado com a largura da coluna do blog onde estará o menu, pois se a imagem for mais larga que o blog provavelmente terá problemas.
Então se for usar mais de desses menus com conteúdo oculto não precisa apenas repetir a ultima parte do código que é para ser colocada pela pagina layout, o restante que fizemos na pagina editar html não precisa de alterações. Mas necessário fazer alguns ajustes, repare que no inicio aparece:
<div id="CollapsiblePanel1" class="CollapsiblePanel1">
e no final:
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
Onde tem CollapsiblePanel1 continue a contagem modificando no inicio e no final para CollapsiblePanel2 e assim por diante, tome cuidado para não se esquecer de alterar nenhum deles(um no começo e duas vezes no final), outro detalhe é cuidado para não confundir a letra l com o numero 1 quando for modificar a contagem, aconteceu comigo quando estava escrevendo essa explicação. E assim poderá usar quantas vezes quiser o menu expansível no seu blog. Você poderá ver isso em funcionamento em nossa página de duvidas frequentes.
Fizemos uma atualização neste tutorial: 24/04/2010
Veja também:
Como colocar menu com sub menu no blog
Barra de rolagem na lista de blogs
Usar palavras chave e descrição no blog para ganhar mais visitas
Entre na pagina editar html e ache </head> então coloque isso antes dela:
<script src="https://sites.google.com/site/tutoriaisblogger/menu-expan.js" type="text/javascript"></script>
Após isso vá um pouco mais acima e junto com os outros estilos CSS cole esse trecho:
.CollapsiblePanel {
padding: 3px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.CollapsiblePanelTab {
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: italic;
}
.CollapsiblePanelContent {
padding: 5px;
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-weight: normal;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
}
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #FFCC99;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;}
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
text-decoration: underline;
color: #0000FF;}
Para modificar as cores que usamos veja como formatar texto, modificar bordas e fazer botões e modifique os estilos CollapsiblePanelContent(conteúdo), CollapsiblePanelOpen .CollapsiblePanelTab(título quando o conteúdo é mostrado) e CollapsiblePanelTab (link para mostrar o conteúdo), reparem que usamos o código as bordas separadamente para cada lado(left, right, top, bottom) isso para fazer parecer uma caixa quando expandimos o menu, então modifique como desejar. Então clique para salvar, por enquanto ainda não aparecerá nada no seu blog.
Entre na pagina designer, adicionar gadget, html/javascript e cole esse código:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div tabindex="0" class="CollapsiblePanelTab">título do menu</div>
<div class="CollapsiblePanelContent">Conteúdo Oculto</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
//-->
</script>
Onde está escrito título do menu é o texto que aparecerá no seu blog, quando alguém clicar nele vai abrir o resto do menu e mostrar tudo que tem dentro daquele menu. Portanto onde escrevemos conteúdo oculto você deve colocar o que desejar links, imagens, enfim qualquer coisa, apenas no caso de imagens cuidado com a largura da coluna do blog onde estará o menu, pois se a imagem for mais larga que o blog provavelmente terá problemas.
Então se for usar mais de desses menus com conteúdo oculto não precisa apenas repetir a ultima parte do código que é para ser colocada pela pagina layout, o restante que fizemos na pagina editar html não precisa de alterações. Mas necessário fazer alguns ajustes, repare que no inicio aparece:
<div id="CollapsiblePanel1" class="CollapsiblePanel1">
e no final:
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
Onde tem CollapsiblePanel1 continue a contagem modificando no inicio e no final para CollapsiblePanel2 e assim por diante, tome cuidado para não se esquecer de alterar nenhum deles(um no começo e duas vezes no final), outro detalhe é cuidado para não confundir a letra l com o numero 1 quando for modificar a contagem, aconteceu comigo quando estava escrevendo essa explicação. E assim poderá usar quantas vezes quiser o menu expansível no seu blog. Você poderá ver isso em funcionamento em nossa página de duvidas frequentes.
Fizemos uma atualização neste tutorial: 24/04/2010
Veja também:
Como colocar menu com sub menu no blog
Barra de rolagem na lista de blogs
Usar palavras chave e descrição no blog para ganhar mais visitas
Destacar uma parte do texto
Em diversas ocasiões queremos dar destaque para um trecho de nosso texto, então às vezes usamos o texto em negrito ou itálico, porém existe outro jeito bem simples e muito melhor para deixar uma parte do texto bem diferente de todo o resto.
Fazendo uma caixa de outra cor com essa parte que vamos dar destaque, o código é assim:
<div style="width: 300px;padding: 3px;border: 1px solid #000000;background-color: #CCCCCC;">Seu texto escrito aqui</div>
Para deixar essa caixa de texto em destaque do jeito que combine melhor com o seu blog, vamos entender como modificar o código.
width: 300px largura da caixa se quiser pode apagar essa linha e a caixa ficará com a maior largura possível.
padding: 3px margem entre o texto e as bordas
border: 1px solid #000000 espessura, estilo e cor das bordas, vejam mais sobre como fazer e alterar bordas.
background-color: #CCCCCC; cor de fundo veja o código de outras cores.
Então seguindo essas explicações fica fácil modificar a formatação dessa caixa de texto em destaque no seu blog, você pode usar isso nas colunas ou nas postagens do blog e se quiser pode até colocar imagens dentro da caixa, apenas observe para a largura da imagem não ser maior do que a própria caixa.
Veja também:
Dar Destaque em uma Parte do Texto (blockquote)
Formatar texto(negrito, itálico, tamanho e tipo de letra)
Efeito semi transparente em imagens
Fazendo uma caixa de outra cor com essa parte que vamos dar destaque, o código é assim:
<div style="width: 300px;padding: 3px;border: 1px solid #000000;background-color: #CCCCCC;">Seu texto escrito aqui</div>
Para deixar essa caixa de texto em destaque do jeito que combine melhor com o seu blog, vamos entender como modificar o código.
width: 300px largura da caixa se quiser pode apagar essa linha e a caixa ficará com a maior largura possível.
padding: 3px margem entre o texto e as bordas
border: 1px solid #000000 espessura, estilo e cor das bordas, vejam mais sobre como fazer e alterar bordas.
background-color: #CCCCCC; cor de fundo veja o código de outras cores.
Então seguindo essas explicações fica fácil modificar a formatação dessa caixa de texto em destaque no seu blog, você pode usar isso nas colunas ou nas postagens do blog e se quiser pode até colocar imagens dentro da caixa, apenas observe para a largura da imagem não ser maior do que a própria caixa.
Veja também:
Dar Destaque em uma Parte do Texto (blockquote)
Formatar texto(negrito, itálico, tamanho e tipo de letra)
Efeito semi transparente em imagens
Postagens 
Postagens
