Empreendedores Blogger

Separadores em HTML

2012-03-05T16:15:00.003-08:00

Quebra de linha

Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos.

Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que será apresentado no item sobre inserção de imagens.

Parágrafos

Para separar blocos de texto, usamos o elemento <P>:

Parágrafo 1;<P>Parágrafo 2.

que produz:

Parágrafo1;

Parágrafo2.

Combinando parágrafos e quebras de linha, temos:

Parágrafo 1;<br> linha 1 do parágrafo 1, <br>linha 2 do parágrafo 1.<P>Parágrafo 2;<br> linha 1 do parágrafo 2, <br>linha 2 do parágrafo 2.

O resultado da marcação acima é:

Parágrafo 1;
linha 1 do parágrafo 1,
linha 2 do parágrafo 1.

Parágrafo 2;
linha 1 do parágrafo 2,
linha 2 do parágrafo 2.

<P> tem atributo de alinhamento, como os cabeçalhos:

<P ALIGN=CENTER>Assim como os trens, as boas idéias às vezes chegam com atraso. <BR>(Giovani Guareschi)</P>

Assim como os trens, as boas idéias às vezes chegam com atraso.
(Giovani Guareschi)

<P ALIGN=RIGHT>Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.</P>

Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.

<P ALIGN=LEFT>Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.</P>

Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.

Linha Horizontal

<HR> insere uma linha horizontal:

Essa linha tem diversos atributos, oferecendo resultados diversos.

<HR SIZE=7> insere uma linha de largura 7 (pixels):

<HR WIDTH=50%> insere uma linha que ocupa 50% do espaço horizontal disponível:

<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada à direita, sem efeito tridimensional:

<HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada à esquerda (o Netscape, aparentemente, não aceita esta formatação de <HR>)

Personalizando Títulos do seu blog!

2012-03-04T05:17:00.001-08:00

Para um blog ter um melhor resultado nas buscas, o título da postagem importa muito. Mas, de que adianta o título da postagem ser bom, se não aparece totalmente nos resultados do Google?

Não entendeu? Entenda agora o que estou falando:

O Blogger, por padrão, coloca os títulos das páginas de postagens com o modelo:

Nome do Blog: Nome da Postagem

Mas nos resultados de buscas do Google, só aparecem os 60 primeiros caracteres do título da página, sendo o resto substituído por reticências (...). Então, se o título do seu blog é grande, o título das postagens poderão não aparecer corretamente. Vamos aprender alguns modelos de títulos para você colocar em seu blog e melhorar seus resultados nas buscas:

Modelo 1
Nesse modelo, vamos deixar igual ao SemNome ( Título da Postagem « Nome do Blog )
1: Ache o código de título no “Editar HTML” do seu blog:

<title><data:blog.pageTitle/></title>

2: Substitua por:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> « <data:blog.title/></title>
</b:if>

3: Salve e Pronto!
Obs.: Você pode substituir « por qualquer outro caractere que você quiser.

Modelo 2
Esse modelo personaliza também páginas de Arquivo do Blog:
1: Ache o código de título no “Editar HTML” do seu blog:

<title><data:blog.pageTitle/></title>

2: Substitua essa linha por:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<title><data:blog.pageName/> - Arquivo - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>

3: Salve e Pronto!
Dica.: Você pode mudar a ordem dos nomes ou trocar os hífens ('-') por qualquer outro caractere

Modelo 3
Nesse modelo, aparecerá a descrição do blog no título da página inicial e aparecerá a palavra “Arquivo” nos títulos das páginas de arquivo.
1: Ache o código de título no “Editar HTML” do seu blog:

<title><data:blog.pageTitle/></title>

2: Substitua ele por:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/> - <data:blog.description/></title>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<title><data:blog.pageName/> - Arquivo <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>

3: Salve e... Pronto!

Modelo 4
Nesse modelo, as páginas de postagens aparecem apenas com seu título. É usado no blog do Compulsivo.
1: Ache o código de título no “Editar HTML” do seu blog:

<title><data:blog.pageTitle/></title>

2: Substitua o código original por:

    <b:if cond='data:blog.pageType == "index"'>
    <title><data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageName/></title>
    </b:if>

3: Salve. Pronto!
Modelo 5
Esse modelo... É você quem cria: Troque as palavras adicionais do título, os caracteres que o dividem, os elementos... Aqui está uma lista dos elementos usados nos títulos das páginas do Blogger:
<data:blog.pageTitle/> - Título padrão do Blogger
<data:blog.title/> - Nome do Blog
<data:blog.pageName/> - Nome da página do Blog
<data:blog.description/> - Descrição do Blog
E os tipos de páginas (pageType) disponíveis para o Blogger:
index - Páginas de Índice (inicial, busca...)
archive - Páginas de Arquivo
item - Páginas de postagens

Imagens em HTML

2012-03-02T15:46:00.000-08:00

Sem dúvida, um dos aspectos mais vistosos e atrativos das páginas web é o grafismo. A introdução em nosso texto de imagens pode nos ajudar a explicar mais facilmente nossa informação e dar um ar muito mais estético. Porém, o abuso pode nos conduzir a uma sobrecarga que se traduz em uma distração para o navegante, quem terá mais dificuldade em encontrar a informação necessária, e um maior tempo para carregar a página o que pode ser de um efeito nefasto se nosso visitante não tem uma boa conexão ou se é um pouco impaciente.

Neste capítulos não explicaremos como criar, nem como tratar as imagens, unicamente diremos que para isso utilizam-se aplicações como Paint Shop Pro, Photoshop ou Corel Draw. Também não explicaremos as particularidades de cada tipo de arquivo GIF ou JPG e a forma de otimizar nossas imagens. A este assunto será dedicado em um futuro capítulo.

As imagens são armazenadas em forma de arquivos, principalmente GIF (para desenhos) ou JPG (para fotos). Estes arquivos podem ser criados por nós mesmos ou podem ser baixados gratuitamente em sites webespecializados.

Sendo assim, nestes primeiros capítulos nos limitaremos a explicar como inserir e alinhar devidamente em nossa página uma imagem já criada.

A etiqueta que utilizaremos para inserir uma imagem é <img> (image). Esta etiqueta não possui seu fechamento correspondente e nela temos de especificar obrigatoriamente o paradeiro de nosso arquivo mediante o atributo src (source).

A sintaxe fica então da seguinte forma:

<img src="caminho para o arquivo">

Para expressar o caminho, faremos da mesma forma que vimos para os links. As regras continuam sendo as mesmas, o único que muda é que, no lugar de uma página destino, o destino é um arquivo gráfico.

Além deste atributo, obviamente indispensável para a visualização da imagem, a etiqueta <img> nos propõe outra série de atributos de maior ou menor utilidade:

Atributo alt

Entre aspas deste atributo, colocaremos uma brevíssima descrição da imagem. Esta etiqueta não é indispensável, mas apresenta várias utilidades.

Primeiramente, durante o processo de carregamento da página, quando a imagem não tiver sido ainda carregada, o navegador mostrará esta descrição, com a qual o navegante poderá ter uma idéia do que se trata neste caso.

Isto não é tão trivial se temos em conta que alguns usuários navegam pela rede com uma opção do navegador que desativa a amostra de imagens, com o que tais pessoas poderão sempre saber de que se trata o gráfico e eventualmente mudar o modo com imagens para visualizar.

Além disso, determinadas aplicações para incapacitados ou para telefones vocais que não mostram imagens oferecem a possibilidade de lê-las, o que nunca é demais pensar nestes coletivos.

Em geral, podemos considerar como aconselhável o uso deste atributo salvo para imagens de pouca importância e absolutamente indispensável se a imagem em questão serve de link.

Atributos height e width

Definem a altura e largura respectivamente da imagem em pixels.

Todos os arquivos gráficos possuem umas dimensões de largura e altura. Estas dimensões podem ser obtidas a partir do próprio designer gráfico ou também, clicando com o botão direito sobre a imagem vista pelo navegador para logo escolher propriedades sobre o menu que se desdobra.

O fato de explicitar em nosso código as dimensões de nossas imagens ajuda ao navegador a confeccionar a página da forma que nós desejamos inclusive antes das imagens serem baixadas.

Assim, se as dimensões das imagens tiverem sido proporcionadas, durante o processo de carregamento, o navegador reservará o espaço correspondente a cada imagem criando uma planificação correta. O usuário poderá começar a ler tranqüilamente o texto sem que este se mova de um lado a outro cada vez que se carregue uma imagem.

Além desta utilidade, o alterar os valores destes atributos, é uma forma imediata de redimensionar nossa imagem. Este tipo de utilidade não é aconselhável visto que, se o que pretendemos é aumentar o tamanho, a perda da qualidade da imagem será muito sensível. Inversamente, se desejamos diminuir seu tamanho, estaremos usando um arquivo maior do que o necessário para a imagem que estamos mostrando, com o que aumentamos o tempo de descarregamento de nosso documento desnecessariamente.

É importante insistir neste ponto já que muitos estreantes têm o péssimo costume de criar gráficos pequenos redimensionando a imagem por meio desses atributos a partir de arquivos de tamanho descomunal. Temos que pensar que o tamanho de uma imagem com umas dimensões da metade não se reduz à metade, e sim, que é aproximadamente 4 vezes inferior.

Atributo border

Define o tamanho em pixels do quadro que rodeia a imagem.

Dessa forma, podemos re-enquadrar nossa imagem se desejamos. É particularmente útil quando desejamos eliminar a borda que aparece quando a imagem serve de link. Em tal caso teremos que especificar border="0".

Atributos vspace e hspace

Serve para indicar o espaço livre, em pixels, que tem que ser colocado entre a imagem e outros elementos que a rodeiam, como texto, outras imagens, etc.

Atributo lowsrc

Com este atributo podemos indicar um arquivo de baixa resolução. Quando o navegador detecta que a imagem tem este atributo, primeiro descarrega e mostra a imagem de baixa resolução (que ocupa muito pouco e que se transfere muito rápido). Posteriormente, descarrega e mostra a imagem de resolução adequada (assinalada com o atributo src, que se supõe que ocupará mais e que será mais lenta de se transferir).

Está atributo está em desuso, mesmo supondo uma vantagem considerável para que o descarregamento inicial se realize mais rápido e que um visitante possa ver uma amostra da imagem enquanto se descarrega a imagem real.

Dica: Utilizar imagens como links

Isto quer dizer que uma imagem, assim como um texto, pode servir de link. Visto a estrutura dos links podemos muito facilmente adivinhar o tipo de código necessário.

<a href="arquivo.html"><img src="imagem.gif"></a>

Exemplo prático

Será óbvio para os leitores, fazer agora uma página que contenha uma imagem várias vezes repetidas, mas com diferentes atributos.

Uma das vezes que saia deve ser mostrada com seu tamanho original e com uma borda de 3 pixels.
Em outra ocasião a imagem aparecerá sem borda, com sua mesma altura e com uma largura superior a original.
Também mostraremos a imagem sem borda, com sua mesma largura e com uma altura superior a original.
Por último, mostraremos a imagem com uma altura e largura maiores que as originais, mas proporcionalmente igual que antes.

Vamos utilizar esta imagem para fazer o exercício:

As dimensões originais da imagem são 28x21, o código fonte seria então da seguinte forma:

<img src="img1.gif" width="28" height="21" alt="Tamanho original" border="3">
<br>
<br>
<img src="img1.gif" width="68" height="21" alt="Achatada" border="0">
<br>
<br>
<img src="img1.gif" width="28" height="51" alt="Esticada" border="0">
<br>
<br>
<img src="img1.gif" width="56" height="42" alt="Dobro grande" border="0">

Como colocar planos de fundo diferentes para cada página em seu blog :)

2012-01-02T04:46:00.000-08:00

Pronto para experimentar por si mesmo? Primeiro você vai precisar de páginas em seu blog. Aqui está um tutorial super rápido para que você que explica como adicionar páginas em seu blog. Ele também inclui toneladas de idéias página para você começar! :)
Em seguida, você vai precisar de um fundo, uma imagem de fundo. Nesse tutorial, as imagens de fundo que o Blogger disponibiliza são totalmente inúteis.

Ou você pode fazer seu próprio plano de fundo personalizado usando o Paint u o Photoshop, Abude da criatividade em uma imagem de 1500 por 1800 pixels de largura e no formato JPEG ! :)
A partir do seu Blogger Painel , clique no design , em seguida, Editar HTML . Procure o código a seguir:
</ head>
(Dica rápida: Clique em CTRL+ F para procurar </ head> isso facilita encontrá-lo facilmente em todo o código do seu blog)
Apenas acima disso, copie e cole o seguinte:

<b:if cond='data:blog.url == "http://YOURBLOG.blogspot.com/p/PAGE.html"'>
<style>
body {
background-image: url(http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG);background-position: center; background-repeat:repeat; background-attachment: fixed;
}
</style>
</b:if>

Apenas Mude Duas coisas:

1. http://YOURBLOG.blogspot.com/p/PAGE.html

Altere isso para ligação da sua página - o link para sua página novo blog onde você quer que o fundo personalizada para aparecer. Este é o endereço no topo da tela na barra de endereços.

2. http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG

Altere isso com o URL da sua imagem hospedada, se não souber hospedar imagens, visualize esse tutorial que ensina hospedar imagens :)

Como criar páginas em seu blog :)

2012-01-02T04:37:00.000-08:00

O que muda de uma postagem para uma página?
Tudo! Quando uma página é criada ela não entra junto com os arquivos de postagem do seu blog, não aparece data, comentários, marcadores e nenhuma outra coisa relacionada a postagens.
Algo simples e fundamental que o Wordpress sempre teve e agora o Blogger também têm sem precisar fazer nenhuma modificação no template! Vamos criar agora a nossa página.

Como criar páginas no Blogger

1º - Primeiro faça login no Draft in Blogger (página de testes do Blogger). Entre em “Postagem” -> “Editar Páginas”.

2º - Clique em “Nova Página”.

3º - Coloque o título da página e escreva o conteúdo da página.
Clique em “Opções de postagem” e escolha se quer ou não permitir comentários na página criada.
Depois clique em “Publicar página”.

4º - Escolha a forma de exibir os links das páginas. Caso prefira criar você mesmo um menu, escolha a opção: “Nenhum Gadget”.
Clique em “Salvar e Publicar”.

5º - Pronto! Sua página foi criada.
- Se você escolheu criar o seu próprio menu agora é criar e incluir o link da página;
- Se você escolheu colocar um menu pronto das páginas, você pode gerenciar quais páginas serão exibidas no menu. Basta entrar em “Layout” -> “Elementos da página”, escolha editar o gadget “Páginas”.

Suas páginas sempre ficaram com o link:

HTTP://SEU-BLOG.blogspot.com/p/SUA-PAGINA.html

Caso queira modificar alguma página entre em “Editar Páginas” novamente.

Coin Slider: Um Slider com vários Efeitos

2012-01-02T04:17:00.000-08:00

O Coin Slider é um slideshow de fotos feito à base de jQuery que se destaca de todos os outros slides por possuir efeitos que são utilizados para fazer as transições de imagem para imagem, tornando-as mais dinâmicas.

Com este slide e estas animações você, presado leitor do Rascunhos Blogger, pode fazer uma boa apresentação dos seus artigos, utilizando imagens com hiperligações para os seus artigos.

Para além de ter variadas animações, este slide pode ter hiperligações, descrições das imagens e possui um sistema de navegação com os botões Anterior e Seguinte e com outros botões abaixo.

Para adicionar o script deste slide ao seu blog, deve iniciar sessão no Blogger, depois dirija-se à aba Design (1) e ao separador Editar HTML (2).

Depois, procure pela tag abaixo:

</head>

Acima dela, cole o código a seguir:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://rascunhosblogger.webs.com/Scripts/coin-slider.min.js' type='text/javascript'/>
<script>$(document).ready(function() {
$('#CoinSlider').coinslider({
delay: 3000,
hoverPause: false,
navigation: true,
width: 565,
height: 290,
});
});
</script>

Abaixo ficam algumas informações para que possa personalizar o seu slide:

delay: 3000 - tempo em milésimos de segundo em que uma imagem será exibida.

hoverPause: false – controlo de pausa que aparecerá ao passar o cursor sobre a imagem. Para que seja ativado, substitua false por true.

navigation: true - são os botões Anterior e Seguinte que aparecem ao passar o cursor do rato. Para que sejam desativados, substitua true por false.

width: 565 – comprimento do slide.

height: 290 - altura do slide.

Se alterar o comprimento do slide, também deve alterar o comprimento da área da descrição na parte destacada onde se encontram os estilos (código destacado a vermelho no passo seguinte).

Agora procure pela linha abaixo:

]]></b:skin>

Antes dela cole os seguintes estilos:

.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px;}

Clique em Pré-Visualizar ou Visualizar, de acordo com o seu idioma. Se tudo estiver no seu devido lugar clique em Guardar Modelo ou Salvar Modelo.

Agora vamos adicionar a estrutura do slide, para isso dirija-se ao separador Elementos de Página, ainda na aba Design.

Escolha a parte do blog em que quer adicionar o slide, e clique em Adicionar uma miniaplicaçãoou Adicionar um gadget.

Será aberta uma nova janela, escolha o gadget HTML/JavaScript. A janela será atualizada.

Neste widget cole o código destacado abaixo:

<center><div id="CoinSlider">
<a href="LINK_IMAGEM_1">
<img src="URL_IMAGEM_1"/>
<span>DESCRIÇÃO_IMAGEM_1</span></a>
<a href="LINK_IMAGEM_2">
<img src="URL_IMAGEM_2"/>
<span>DESCRIÇÃO_IMAGEM_2</span></a>
<a href="LINK_IMAGEM_3">
<img src="URL_IMAGEM_3"/>
<span>DESCRIÇÃO_IMAGEM_3</span></a>
</div></center>

Aprendendo o Iframe e explicando os seus atributos

2012-01-02T04:06:00.000-08:00

Hoje irei ensinar como inserir Iframes em suas páginas. Caso esteja procurando por FRAMES, publicamos um artigo falando sobre este assunto.
Iframes são quadros que podem ser adicionados no conteudo de uma página HTML, exibindo o conteúdo de uma outra página. Utilizamos IFRAMES para exibir o Mural de Recados, serviço oferecido gratuitamente aqui, permitindo que seu visitante interaja com seu site de forma fácil e segura.

O código do iframe é bem simples e possui alguns atributos que já conhecemos em outras TAGs, como o IMG.
<iframe width='LARGURA' height='ALTURA' frameborder='0' src='http://URL_DA_PAGINA/pagina.html'></iframe>

Explicando os atributos do IFRAME (nem todos foram utilizados no nosso código por serem opcionais):

src = pagina.html - Determina a página ou arquivo que será carregado na região correspondente.

width=x - Especifica o largura do IFRAME, onde x é o valor sendo tanto em pixels quanto porcentagem, por exemplo: 100px

height=x - Especifica o altura do IFRAME, onde x é o valor sendo tanto em pixels quanto porcentagem, por exemplo 200px.

frameborder=x - Determina a espessura da linha divisória que aparece entre a página e o IFRAME. Sendo que x é o valor da linha em pixels.

scrolling = valor - Determina se aparecerá barra de rolagem. Os valores podem ser yes (com barra de rolagem), no (sem barra de rolagem) ou auto (barra de rolagem só aparecerá quando o conteúdo da página ultrapassar o tamanho do frameset).

marginwidth = x - Determina a largura em pixels da margem horizontal.

marginheight = x - Determina a largura em pixels da margem vertical.

vspace=x - Determina o espaço vertical entre o IFRAME e o documento HTML, sendo que x é o valor do espaço em pixels.

hspace=x - Determina o espaço horizontal entre o IFRAME e o documento HTML, sendo que x é o valor do espaço em pixels.

Controlar a exibição de um elemento/widget/gadget no seu template!

2011-12-28T17:29:00.000-08:00

Para controlar a exibição de um elemento/widget/gadget no seu template, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template.
Então marque a opção Expandir modelos de widgets.

Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Encontre o widget que você deseja controlar a exibição, através do título dele (utilizando o Ctrl+F do seu navegador). Caso o widget não tenha um título, vá em Elementos de Página e dê um título a ele (poderá ser removido depois). Você encontrará algo parecido com isso:

<b:widget id='HTML1' locked='false' title='Título' type='HTML'>

Este é apenas um exemplo, o trecho não precisa ser HTML1, oulocked=’false’. Você deverá encontrar seu widget através do título.

Agora vamos analisar o restante do código, para que possamos aplicar o Hack (parte vinho):

<b:widget id='HTML1' locked='false' title='Título' type='HTML'><b:if cond='data:blog.pageType != "item"'>

<b:includable id='main'>

(código específico da variável)

- código fonte do Widget - </b:if>
</b:includable>
</b:widget>

A parte “- código fonte do Widget –” é apenas uma representação do código do Widget que você encontrará entre as partes verdes.

Então vamos acrescentar o código entre <b:includable id='main'> e</b:includable>, que está em vinho, SUBSTITUINDO a parte “(código específico da variável)” pelo código desejado:

Mostrar apenas nas páginas de postagens:
<b:if cond='data:blog.pageType == "item"'>

Mostrar apenas na página incial:
<b:if cond='data:blog.homepageUrl == data:blog.url'>

Mostrar apenas em uma postagem específica:
<b:if cond='data:blog.url == "URL do post"'>

Mostrar na página inicial, de marcadores e arquivo:
<b:if cond='data:blog.pageType != "item"'>

Mostrar apenas em uma página de marcador específica:
<b:if cond='data:blog.homepageUrl == "http://URL_do_Blog/search/label/Marcador"'>

Mostrar nas páginas de arquivo:
<b:if cond='data:blog.pageType == "archive"'>

Mostrar na página de marcadores e postagens:
<b:if cond='data:blog.homepageUrl != data:blog.url'>

Mostrar apenas na página de marcadores:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'> Atenção: Neste caso deve ser acrescentado mais um </b:if> antes de </b:includable>

Por exemplo, vamos supor que eu queira que meu widget de título“Publicidade” apareça somente na página inicial. Então vou encontrá-lo através do título e acrescentar o código, deixando-o assim:

<b:widget id='HTML1' locked='false' title='Publicidade' type='HTML'><b:if cond='data:blog.pageType != "item"'>

<b:includable id='main'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

- código fonte do Widget -</b:if>
</b:includable>
</b:widget>

O Hack também funciona para elementos que não sejam widgets, como partes em HTML. Neste caso, basta colocar o código em vinho antes do início do código e o </b:if> após o fim.

Visualize para ver se está tudo correto e clique em Salvar Modelo.

Agora os widgets aparecerão apenas nas páginas que você determinou.

Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.

Slider Orbit Para Blogger

2011-12-22T16:36:00.000-08:00

Um slideshow que permite fazer isto é o Orbit, que funciona à base de jQuery e mostra as imagens com flechas de navegação. Mas, para além desta funcionalidade, este slide também possui, na sua parte superior esquerda, um controlador de pausa e um indicador de tempo entre cada fotografia ou imagem.

Uma das vantagens que me fazem gostar deste slider é que o script conta com uma versão curta, pelo que podemos colocar o script diretamente no código do template e assim não precisamos de recorrer a uma hospedagem.

Para adicionar o script deste slide ao seu blog, deve iniciar sessão no Blogger, depois dirija-se à aba Design (1) e ao separador Editar HTML (2).

Depois, procure pela tag abaixo:

</head>

Acima dela, cole o código a seguir:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(window).load(function() {
$('#featured').orbit({
advanceSpeed: 5000,
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>

Agora procure pela linha abaixo:

]]></b:skin>

Antes dela cole os seguintes estilos:

/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}
div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDHF7G7-KV40ibikGscL9PMr8pnwiETA-CSLDH0nRGMu3q3aRlTYNSalGNT_xE2Mn9wtdUanUz95iJ9JrLSxfy76BlsC6c42-XNQp_bt63zqO6GhqrUfHV-uW46Po3zWNbeLLLY6WdMMu0/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgbXUsaTAveE6WR_8QdWlJhXQk9znjRuFHbxpp8Ems5KlXjbjHlM6vhslwL51Bu-ogF3Om2B5TJ4hQlsuJTQQmZH4XfyfQxUypu4V_fgZUrNB_7hfnv5m-lP8USDkZNCcfs_oEUCbHmVPm/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAeF7tX7m8fKR6EzQLWADVYVE7ZEuoQ0sV3HZ6yaIiiJnPNClZEnIBCOJRO9oysXjOL8GBfLgSq3NFBviUlMw-uWc6_V3bcixqMkY-BOaUiwyRwbpL1cs1f7eRunp905a_NqfC_spMS-2N/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}
div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }
div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}
div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}
div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf2NxQL5QRphI-cy9qxnAiw_OPCJBCt-zRPyRxdMhfttaD6hXjEO4jXCh-zVOWbMgZRQFM2GMX8SqYQb2JeFK_QUHdiqoYhiLW9ebcCH8lILFtrvRl-flMn6iFvlNlrFFFcVXPpwjiYG42/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBw3iklqysMa61MIvgh9W-hyQqFEDUEKK_irVB8-KqkbZ_MliyGTo7A1g7q707bQxXfLwBbcLl5tT9tN0eLw4MNW7sr_myuovs2XAnb_o8-fnQ75Oz9ruCdMji-zBDd7LN9gIfDad3IJj/s1600/left-arrow.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkDaXrSeOYZFVLyghfyQi7W_UijgNp5yuRz9NboJs_NB_X75vyeFahyphenhyphenMy48Ld9BMc4Z5JGo8TD79_0It409iSA7J9tm3aI2JtjGzOYlZMvlEchfActKD5i_V_0tukVQT17IiqYh0becbw/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0; }

Clique em Pré-Visualizar ou Visualizar, de acordo com o seu idioma. Se tudo estiver no seu devido lugar clique em Guardar Modelo ou Salvar Modelo.

Agora vamos adicionar a estrutura do slide, para isso dirija-se ao separador Elementos de Página (3), ainda na aba Design (1).

Escolha a parte do blog em que quer adicionar o slide, que contem as imagens, os links e as descrições das respectivas imagens, e clique em Adicionar uma miniaplicação ou Adicionar um gadget.

Será aberta uma nova janela, escolha o gadget HTML/JavaScript. A janela será atualizada.

Neste widget cole o código destacado abaixo:

<div id='featured'>
<a href="LINK_IMAGEM_1"><img rel='foto1' src="URL_IMAGEM_1" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto1'>DESCRIÇÃO_IMAGEM_1</span>

<a href="LINK_IMAGEM_2"><img rel='foto2' src="URL_IMAGEM_2" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto2'>DESCRIÇÃO_IMAGEM_2</span>

<a href="LINK_IMAGEM_3"><img rel='foto3' src="URL_IMAGEM_3" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto3'>DESCRIÇÃO_IMAGEM_3</span>
<a href="LINK_IMAGEM_4"><img rel='foto4' src="URL_IMAGEM_4" style='width:490px; height:238px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_4</span>
</div>

Caracteres Especiais

2011-12-13T08:21:00.000-08:00

Tudo sobre caracteres especiais, símbolos, figuras, emoticons... pelo teclado, ideal para enfeitar o seu nome no Orkut, twitter, MSN, chats, jogos on-line, enfim onde você quiser.

Enfeites especiais para Orkut:

(¯`·._.·[

:;☆;:*:;☆;:*:;☆

°o.O

×÷·.·´¯`·)»

ﾟ+.｡.+ﾟ

｡,｡+｡,｡+｡*｡

···^v´¯`×)

ﾟ･｡.｡･ﾟﾟ･｡.｡･ﾟﾟ･｡

,.-~*'¨¯¨'*·~-.¸-(_

･.･ﾟﾟ･.･ﾟ･.･ﾟ

。.*#:．'゜.:*♪:．'.:

-- --^[

⋌⋚ฺฺฺo*♥♡♥*o⋛⋋ฺ✣ฺ⋌⋚ฺฺฺo

•·.·´¯`·.·•

★─☆｡oﾟ｡★─☆｡oﾟ｡

`·.¸¸.·´´¯`··._.·

★♡★♡★♡

(¯`·._)

◆:*:◇:*:◆

¯¨'*·~-.¸¸,.-~*'

+｡◇｡+ﾟ

Oº°‘¨

♡＊。・。♡＊。・。

·´)›

･*:.｡. .｡.:*･ﾟ

.-~·*'˜¨¯`·¸

☺♡☻♡

¸„.-·~¹°”ˆ˜¨

.｡.:*･ﾟ♡

×º°”˜`”°º×

*ﾟ¨ﾟﾟ･ ♫*:..｡♡*ﾟ¨ﾟﾟ･

—÷[(`

—(•·÷[

—¤÷(`[¤

··¤(`×[¤

·´¯`·»

]¦•¦[

`·.,¸¸,.·´¯

[`·.]

(`·.·•

•´¯¥¯`•

•^v^–[

•·´¯°·

·°¯`·•

§.·´¨'°÷·..×>

]|I{•------»

«·´º´·•[•

ﾟ*:;;:*ﾟ✿ฺﾟ*:;;:*ﾟ✿ฺ

ðº°˜¨,

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

Seu Nome

]·._.·´¯)

☆;:*:;☆;:*:;☆;:

O.o°

«(·´¯`·.·÷×

ﾟ+.｡.+ﾟ

｡*｡+｡,｡+｡,｡

(×´¯`v^··

ﾟ･｡.｡･ﾟﾟ･｡.｡･ﾟﾟ･｡

_)-,.-~*'¨¯¨'*·~-.¸

ﾟ･.･ﾟ･.･ﾟﾟ･.･

.:♪*:．'゜♭.:*．♪'゜

]^-- --

o⋛⋋ฺ✣ฺ⋌⋚ฺฺฺo*♥♡♥*o⋛⋋ฺ

•·.·´¯`·.·•

★─☆｡oﾟ｡★─☆｡oﾟ｡

`·.¸¸.·´´¯`··._.·

♡★♡★♡★

(¯`·._)

◆:*:◇:*:◆

¯¨'*·~-.¸¸,.-~*'

ﾟ+｡◇｡+

¨‘°ºO

♡＊。・。♡＊。・。

‹(`·

ﾟ･*:.｡. .｡.:*･

¸·`¯¨˜'*·~-.

♡☻♡☺

¨˜ˆ”°¹~·-.„¸

♡ﾟ･*:.｡

•._.·´¯)

♫*:..｡♡*ﾟ¨ﾟﾟ･ ♫*:..｡

´)]÷—

]÷·•)—

¤]´)÷¤—

¤]×´)¤··

«·´¯`·

]¦•¦[

¯`·.,¸¸,.·´

[.·´]

•·.·')

•´¯¥¯`•

]–^v^•

·°¯`·•

•·´¯°·

×,.·´¨'°÷·..§

«------•}I|

«·´º´·•[•

✿ฺﾟ*:;;:*ﾟ✿ฺﾟ*:;;:*ﾟ

¨˜°ºð

Desenhos Especiais com Caracteres:

O:)

=D

:-D

=]

:-X

=^.^=

:'(

:-)'

}:(

:-7

:*

:-#

:-{

@}-;-'--

: (

=O

:)

8-)

:-)

:-|

Anjo

Grande sorriso

Grande sorriso

Sorriso

Calado

gato

chorando

Babando

Mal

Meio Sorriso

Beijo

Boca Selada

Bigode

Rosa

Triste

Chocado

Sorriso

Sorriso

Sorriso

So What

. . . . . . . .

=p

:-\

;)

:-*

=B

^^

D:

--‘

d(-_-)b

o.O

T_T

U_U

$_$

{{{(>_<)}}}

//.*)

X-(

~:@

o\-<]:

(_8^(|)

B^)

Mostrando a lingua

Indeciso

Piscada

assobiar

Ronaldo

Sorriso Meigo

De queixo caído

Encabulado

Curtindo um som

Pasmo

Choro

Sono

Amo dinheiro

Enlouquecendo

Emo

Irritado

Bebe

Skatista

Homer Simpson

De óculos

Enfeites Especiais:

̿ ̿'̿̿̿̿̿'\̵͇̿̿\=((•̪●) (●̮̮̃•̃) ¬_¬ ⊙︿⊙ ⎝╰_╯⎠ *:o) ⁀‿⁀ ⁀‿ ⁀ ヅツﾂｯシジッ

(ړײ♥ ツヅ ⊙‿⊙ (╥﹏╥) ^‿^ >‿< εїз ☺ ☹ ☻ (‧'''‧) ๑(•ิ.•ั)๑ (,") ♥ (",) (Ø_©)

⍨ ☠ :-≬ (⌒‿⌒) ⁽(ົ‿ົ)⁾ ༽ ⁽༾ྋḻྋ༿⁾ ༼ Ƹ̵̡Ӝ̵̨̄Ʒ 【ツ】✿⊰ ઇઉ (￫ܫ◕ฺ人◕ฺฺܫ◕ฺ)

Caracteres Especiais do Teclado:

Alt+1= ☺ Alt+2= ☻ Alt+3= ♥

Alt+4= ♦ Alt+5= ♣ Alt+6= ♠

Alt+7= • Alt+8= ◘ Alt+9= ○

Alt+10= ◙ Alt+11= ♂ Alt+12= ♀

Alt+13= ♪ Alt+14= ♫ Alt+15= ☼

Alt+16= ► Alt+17= ◄ Alt+18= ↕

Alt+20= ¶ Alt+21= § Alt+22= ▬

Alt+23= ý Alt+24= ↑ Alt+25= ↓

Alt+26= → Alt+27= ← Alt+28= ∟

Alt+29= ↔ Alt+30= ▲ Alt+31= ▼

Alt+42= * Alt+127= ⌂ Alt+139= ï

Alt+140= ¥ Alt+143= Å Alt+145= æ

Alt+146= Æ Alt+155= ø Alt+156= £

Alt+157= Ø Alt+158= × Alt+159= ƒ

Alt+166= ª Alt+167= º Alt+168= ¿

Alt+169= ® Alt+170= ¬ Alt+171= ½

Alt+172= ¼ Alt+173= ¡ Alt+174= «

Alt+175= » Alt+176= ░ Alt+177= ▒

Alt+178= ▓ Alt+179= │ Alt+180= ┤

Alt+182= Â Alt+183= À Alt+184= ©

Alt+185= ╣ Alt+186= ║ Alt+187= ╗

Alt+188= ╝ Alt+189= ¢ Alt+190= ¥

Alt+191= ┐ Alt+192= └ Alt+193= ┴

Alt+194= ┬ Alt+195= ├ Alt+196= ─

Alt+197= ┼ Alt+200= ╚ Alt+201= ╔

Alt+202= ╩ Alt+203= ╦ Alt+204= ╠

Alt+205= ═ Alt+206= ╬ Alt+207= ¤

Alt+209= Ð Alt+213= ı Alt+217= ┘

Alt+218= ┌ Alt+219= █ Alt+220= ▄

Alt+221= ¦ Alt+222= Ì Alt+223= ▀

Alt+225= ß Alt+230= µ Alt+231= þ

Alt+232= Þ Alt+238= ¯ Alt+239= ´

Alt+241= ± Alt+242= ‗ Alt+243= ¾

Alt+244= ¶ Alt+245= § Alt+247= ¸

Alt+248= ° Alt+249= ¨ Alt+250= •

Alt+251= ¹ Alt+252= ³ Alt+253= ²

Alt+254= ■

Como colocar Música no Blog

2011-12-12T12:21:00.000-08:00

Há muitas formas de colocar música no seu blog. Entre eles vários players, em que a maioria deles utiliza a músicas hospedadas no YouTube. Para fazer um player com mésica você precisa hospedar o player (no formato swf ) . Um jeito mais fácil é utilizando os materiais citados acima já hospedados.

Abaixo segue um código de player, para colocar no seu blog, substitua o código em negrito por o url de um vídeo do youtube. É muito simples coletar o código, vá no youtube, procure o vídeo da música que deseja, clique sobre o vídeo com o botão direito e clique sobre: Copy Video URL ou algo similar, depois é só substituir o abaixo.

O player ficará assim (Eu peço que não remova os créditos, porquê é ilegal e pode ser considerado plágio):
"Epic" - Big Time Rush

Player By EmpreendedoresBlogger

Colocar Menu Horizontal no topo do Blogger (2)

2011-12-09T11:27:00.001-08:00

Nesse tutorial vou explicar como colocar um menu horizontal no topo do blogger. É muito simples, vá em Modelo>>Editar HTML>>Prosseguir Então procure por:

<body expr:class='"loading" + data:blog.mobileClass'>
Logo abaixo desse trecho, cole o seguinte código:
<style type='text/css'> #topmenu { height: 45px; position: fixed; top: 0; left: 0; z-index: 95469148; background: #F1F1F1; width: 100%; border-width: 1px 0; border-style: solid; border-color: #EBEBEB; border-bottom: 3px solid gainsboro; -moz-box-shadow: 0px 6px 30px #c9c9c9; -webkit-box-shadow: 0px 6px 30px #c9c9c9; box-shadow: 0px 6px 30px #c9c9c9; }
#topmenu ul { padding-top: 1px; color: #555; margin-top: 8px; }
.topmenuativo a:link { color: #c60; }
#topmenu li { list-style-type: none; display: inline; color: #555; cursor: pointer; line-height: 26px; text-align: center; font-size: 14px; font-weight: bold; }
#topmenu li a { color: #555; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease; text-decoration: none; padding-left: 26px; }
#topmenu li a:hover { color: #C60; -webkit-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px); -moz-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px); -o-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px); text-decoration: none; } </style> <div id='topmenu'> <ul> <li><a href='LINK'>ITEM</a></li> <li><a href='LINK'>ITEM</a></li> <li><a href='LINK'>ITEM</a></li> <li><a href='LINK'>ITEM</a></li> <li><a href='LINK'>ITEM</a></li> <li><a href='LINK'>ITEM</a></li> </ul> </div> Gostou? Comente =)

Colocar título da postagem no lugar dos links "postagens mais antigas" e "postagens mais recentes"

2011-12-07T19:04:00.001-08:00

Algumas pessoas não gostam dos links "postagens mais antigas" e "postagens mais recentes" no pager do blogger. Para essas pessoas, disponibilizamos um tutorial muito legal, que ensina a colocar o nome do próximo post no lugar desses links.

É Muito fácil fazer essa alteração. Vá em Modelo>> Editar HTML>>Prosseguir>> Procure pelo trecho </head>(Utilize CTRL+F para facilitar a procura) logo abaixo desse trecho cole o seguinte código: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> Salve seu modelo. Agora vá no Layout >> Adicionar Gadget >> HTML/JavaScript (Esse gadget não apareçe na página, por isso você pode colocar esse gadget em qualquer lugar do layout, sem problemas) e cole esse código abaixo:

<style type="text/css">#blog-pager-newer-link {width:200px;text-align:left;}#blog-pager-older-link {width:200px;text-align:right;}</style><script type="text/javascript">$(document).ready(function(){var newerLink = $("a.blog-pager-newer-link").attr("href");$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {var newerLinkTitle = $("a.blog-pager-newer-link").text();$("a.blog-pager-newer-link").text(newerLinkTitle);});var olderLink = $("a.blog-pager-older-link").attr("href");$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {var olderLinkTitle = $("a.blog-pager-older-link").text();$("a.blog-pager-older-link").text(olderLinkTitle);//rgt});});</script>

Salve o Gadget. Se gostou do resultado, deixe um Comentário =)

Widget previsão do tempo

2011-12-07T17:26:00.001-08:00

Nesse tutorial eu vou explicar como colocar o Widget de previsão do tempo em seu blog ou site. Esse Widget pode ser usado em blogs/sites de notícias, informações, pois melhora a tecnologia da sua página.

O site que disponibiliza previsão do tempo é o Clima tempo, um site bom em relção de otimização de sites de notícia. Entre no link a seguir (http://www.climatempo.com.br/tempo_no_seu_site.php) e preencha os formulários de acordo coma sua preferência (você pode adicionar até 5 cidades no seu Widget).

Para colocar no blog, é o mesmo procedimento padrão, entre no painel, layout, adicionar gadget, HTml/JavaScript cole e salve. Para adicionar em sites, coloque o código onde desejar no código fonte do seu site. O Widget é similar ao referente abaixo. Comente =)

Dividir o cabeçalho do Blogger em Dois

2011-12-06T10:33:00.001-08:00

Para dar mais espaço ao seu blog recomendamos que use esse tutorial. Além de melhorar a aparência do seu blog, pode servir como muitas outras coisas.

Vamos aos códigos. Vá em Modelo >> Editar HTML >> prosseguir e procure pelo trecho abaixo:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no"><b:widget id="Header1" locked="true" title="Empreendedores Blogger (Cabeçalho)" type="Header"></b:widget></b:section>
Claro que no seu blog o que está em negrito está diferente em seu blog. Apague o trecho acima (com cuidado para não apagar mais nada) e cole o código abaixo:
<div id='header-wrapper'><div id='header-column-container'><div id='header2' style='width: 50%; float: left; margin:0; '><b:section class='header-column' id='header-column-left' preferred='yes' style='float:left;'><b:widget id='Header1' locked='true' title='Empreendedores Blogger (Cabeçalho)' type='Header'/></b:section></div><div id='header3' style='width: 50%; float: right; margin:0; '><b:section class='header-column' id='header-column-right' preferred='yes' style='float:right;'><b:widget id='HTML7' locked='false' title='' type='HTML'/></b:section></div><div style='clear:both;'/><div id='header-bottom'><b:section class='header' id='header-column-bottom' preferred='yes'></b:section></div><div style='clear:both;'/></div></div> Visualize se estiver tudo bem, Salve. Você poderá editar seu cabeçalho em elementos da página (ou Layout).

Adicionar Menu Horizontal fixo no topo do Blogger

2011-12-06T04:39:00.001-08:00

Nesse tutorial vou explicar como colocar um Menu Horizontal no Topo do Blogger. O 1° Passo é aplicas o CSS. Entre No Painel do Blogger >> Personalizar >> Avançado >> Adicionar CSS;

Cole o código abaixo:

/* NavTop Menu
----------------------- */
#navtop { /*--container geral do menu--*/
border-bottom:1px solid #666; /*--Edite cor da borda--*/
background:#fff; /*--Edite cor de fundo--*/
padding:0px 20px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}
#navtop li {
float: left;
display: block;
padding:5px;
}

#navtop li a, #navtop li a:link, #navtop li a:visited { /*--links do menu--*/
float: left;
display: block;
padding: 5px;
text-transform: none;
text-decoration:none;
background: #ccc; /*--Edite cor de fundo dos links--*/
color:#000; /*--Edite cor dos links--*/
border:1px solid #666; /*--Edite cor de borda--*/
font-size:12px; /*--Edite tamanho da fonte--*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#navtop li a:hover { /*--links no estado hover--*/
background: #000; /*--Edite cor de fundo dos links--*/
color:#fff; /*--Edite cor dos links--*/
text-decoration:none;
}

#navtop li ul {
display: none;
} Salve o Modelo. Agora esse parte é mais difícil, adicionar o HTML. Vá em Modelo >> Editar HTML >> Procure pelo trecho:
<body expr:class='"loading" + data:blog.mobileClass'> E cole o código abaixo:
<div id='navtop'> <li><a href='SEU-LINK-AQUI' title='#'>Link 1</a></li>

Faça as substituições referentes, e pronto! Qualquer erro informe que tentaremos ajudar.

Remover ou não remover a Navbar do Blogger?

2011-12-06T04:18:00.001-08:00

A Navbar do blogger é uma barra de opções que há em todos os blogs do blogger, ela serve para melhorar o tráfego e os compartilhamentos do Blog.
Ás vezes pode ser difícil de ser substituída, e ao removê-la seu blog pode ficar menos agradável na visualização, pois os leitores estão acostumados a ver blogs com postagens uma abaixo da outra e com a barra do blogger. Pense bem.

Outros tutoriais ou matérias que podem ser úteis:

Remover Navbar do Blogger

2011-12-06T04:15:00.001-08:00

Nesse tutorial vou ensinar como Remover a Navbar do Blogger. A Navbar do blogger é uma barra de opções que há em todos os blogs do blogger. Alguns blogs removem essa barra, mas a questão é Remover ou não remover a Navbar do Blogger?

Vamos aos códigos: Entre no painel do Blogger, vá em Modelo, Editar HTML e clique em prosseguir;

Use Ctrl+F, e procure o trecho abaixo:

]]></b:skin>
Ao encontrar, cole antes desse trecho o código abaixo:

#navbar-iframe { height: 0px; visibility: hidden; display: none; }
Caso você acha que esse forma de remover o Navbar é muito complicada, adicione o código, em CSS no Designer do Modelo do seu blog. Entre em Modelo >> Personalizar >> Avançado >> Adicionar CSS >> Cole o código acima (em vermelho) visualize se o Navbar saiu, se estiver tudo bem Salve o Modelo.

Adicione transparência a imagens

2011-12-05T16:44:00.001-08:00

O efeito de transparência (e outras formas e ações que acontecem ao passar o mouse sobre a imagem ou outro atributo html) é chamado Efeito Hover.

Nesse tutorial vou ensinar a fazer um efeito hover em imagens do blogger. Confira como ficará seu efeito em imagens:

Então vamos á aplicação do código principal, eu recomendo que esse processo seja feito por quem tem experiência com HTML, pois não queremos que nada dê errado no seu blog não é?
Vá em Modelo >> Editar HTML >> Proseguir;
Procure então pelo trecho: </head> cole o código a seguir ACIMA dele.

<style type='text/css'> a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
Feito isso salve o seu modelo.

Para que a imagem disponha do efeito, use o seguinte código para colocar imagens no blog:

<a class="linkopacity" href=
"http://empreendedoresblogger.blogspot.com/#!"
imageanchor="1" style="clear: left; float: left; margin-bottom: 1em;
margin-right:
1em;"><img border="0" height="100"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmiz1hHNZzSN8-7O_VqoUMdEa-nQ_YAdT-jFvurJ9dkO182awReuKL5arARlAsChhvqheZHOxEMQ1uxs2p4XJdlwS36aQSuqX_LQWdn8E9Ixlr6sdq1qpvOUkhsQBTkDl60QY8_lvz7QE/s200/cover.png"
width="100" /></a>

[Tutorial] Colocar anúncio no centro da postagem

2011-12-05T13:42:00.001-08:00

Já mostramos aqui como colocar anúncios lado a lado nas postagens, mas dessa vez mostraremos como colocar apenas um anúncio dentro da postagem, alinhado no centro, o código é esse abaixo:

<center> Código do Anúncio </center>

Para colocar é fácil, antes de cada escrever cada postagem, clique em HTML, no lado direito do editor, e coloque o código. Para colocar em todos os anúncios vá em Configurações >> Postagens e Comentários >> "Modelo de postagem" (Adicionar)>> Cole o código >> Salvar Configurações, mas dessa vez tenha cuidado para não apagar o código ao escrever uma nova postagem.

[Tutorial] Como colocar anúncios lado a lado nas postagens

2011-12-05T13:32:00.001-08:00

O Código é basicamente o abaixo. Onde está "Código do anúncio aqui (esquerda)" você coloca o código do seu anúncio, e onde está "Código do anuncio aqui (Direita)" coloque o mesmo código de anuncio. Para o anuncio adicionado recomendamos o retângulo médio, depende das larguras do seu blog. Se o anúncio ultrapassar as larguras do seu blog e você não deseja mudá-las leia esse artigo.

<div align="center"><table
style rgb(243, cellspacing="4
" border: 7); 145, 100%; width:="solid" cellpadding="2" text-align: left; 1px> <tbody>
<tr>
<td valign="undefined" align="left">

Código do anúncio aqui (esquerda)

</td>
<td valign="undefined" align="undefined">

Código do anuncio aqui (Direita)

</td>
</tr>
</tbody>
</table
style></div>

[Matéria] Construa seu público

2011-12-05T07:18:00.001-08:00

Divulgando seu blog

No xadrez, a coroação ocorre quando um peão alcança o oitavo quadrado. Nesse momento, seu oponente é desafiado, porque seu simples peão assume todo o poder de uma Rainha - a peça mais fatal do tabuleiro. Obviamente, o peão pode ser promovido a bispo, torre ou qualquer outra peça, mas por quê? Isso apenas dá uma dica ao outro jogador sobre seus planos secretos. No entanto, as promoções a cavalo geralmente podem ser estrategicamente úteis, dependendo da situação.

De que diabos você está falando? Não vamos nos perder muito na metáfora. O importante a destacar é que o movimentado jogo de promover o blog de uma pessoa em blogosfera (sem os recursos adequados) pode parecer tão difícil e frustante quanto uma partida de xadrez que dure o um dia inteiro e acaba em empate. No entanto, se você jogar corretamente, esse peão pode se sair muito bem. Preferencialmente, o simples fato de blogar já atrairia um tráfego suficiente para agradar o autor, mas há casos em que quanto mais, melhor. Quando você está participando do AdSense para Bloggers e deseja ver um aumento nos seus lucros ou apenas mais comentários sobre suas postagens, aumentar a contagem de acessos traz grandes vantagens.

Para isso, eu passei o Dia do Trabalhador bisbilhotando a blogosfera. Embora eu devesse ter passado o dia comendo batatas fritas e aproveitando a piscina de um amigo, fiquei trabalhando duro no meu laptop reunindo uma boa quantidade de métodos aceitáveis para aumentar a base de leitura do seu blog. Espero que esses métodos sejam úteis. Na prática, os procedimentos se dividem em três categorias básicas: configurações, técnicas e estratégias reais de marketing. Alguns são bem óbvios, e outros, mais sutis. Aparentemente, muitos blogueiros tiveram sucesso com essas soluções. Eu experimentei algumas e descobri que elas realmente aumentam o tráfego.

Definições de aplicações do Blogger

O Blogger possui uma variedade de configurações, muitas das quais funcionam para que você tire vantagens desse esforço. Esse primeiro grupo é bem simples e exige apenas que você efetue logon na sua conta do Blogger e faça algumas alterações.

Configurar o blog para efetuar ping do weblogs.com. Weblogs.com é um serviço de notificação de atualização de blogs usado por pessoas e serviços para acompanhar as alterações em blogs. Quando essa definição estiver ativada, o Blogger avisará o weblogs.com que você atualizou o blog. Isso significa que o seu blog será incluído nas várias listas de blogs "atualizados recentemente" na Web, e em outros serviços relacionados a blogs.

Ativar o Navbar Eu fiz isso e vi meu tráfego crescer já no primeiro dia (e continua aumentando). O Blogger Navbar substituiu anúncios obrigatórios há algumas semanas. Um dos recursos do Navbar é um botão chamado NextBlog. Clique nele para visitar o próximo blog ativado para Navbar. O fato é que esse jeito viciado de alternar entre os blogs é muito atraente. Conseqüentemente, o botão do próximo blog chama muito a atenção. Então, ative o Navbar e entre nessa onda!.

Instalar Enviar esta postagem por email. Sites de notícias como o The New York Times Onlineapresentaram esse recurso por muito tempo. Ele permite que as pessoas encaminhem um artigo a um amigo por email. Se você usar Enviar essa postagem por email no seu blog, as pessoas poderão encaminhar suas postagens para amigos. Isso talvez não tenha um impacto imediato sobre as estatísticas do seu site, mas permite que outras pessoas façam a propaganda do seu blog para você. Essa é a idéia!

Ativar Páginas de postagem Fazer o arquivamento por dia, semana ou mês é coisa do passado. Você precisa ter certeza de que está publicando cada postagem como uma página da Web, com a opçãoPáginas de postagem. Esse recurso torna suas entradas cada vez mais vinculáveis e mais atraentes para os mecanismos de pesquisa. Os links presentes no seu blog significam tráfego. Essa configuração é bem fácil no Blogger.

Ativar o site feed Quando as pessoas se inscrevem no seu site feed em seus leitores de notícia, isso significa que, com certeza, elas vão ler sua postagem. As pessoas que se inscrevem em site feeds são do tipo que o escritor Malcolm Gladwell chama de "mavens" (peritos, em inglês), no seu livro The Tipping Point: How Little Things Can Make a Big Difference. Resumindo: essas pessoas ajudarão você a obter mais tráfego; portanto, ative seu site feed.

Adicionar seu blog às listas do Blogger. Isso realmente parece óbvio, mas, às vezes, durante o processo de criação do blog, muitos de vocês chegaram a pensar: "Não sei se quero publicar isso agora. Vou marcar como não.'" Volte e marque "sim". Quando você adiciona seu blog às nossas listagens ele aparece em Nextblog, Atualizados recentemente e em outros lugares. É como optar por entrar no tráfego. Faça isso.

Sugestões de técnicas de blogs

Esta parte das técnicas de captura de tráfego é um pouco mais minuciosa e não é ativada de imediato. O fundamento básico desta seção de métodos é "Se você fizer seu blog bem-feito, eles virão." Você terá que incorporar os outros aspectos de autopromoção, mas a verdade é que escrever um ótimo blog demora um pouco para atingir visitantes assíduos e obter promoção ~~boca-a-boca~~ .

Escreva conteúdo de qualidade, e escreva bem. Jen Garrett exige que você use pontuação adequada, use letras maiúsculas e minúsculas corretamente e não faça uso excessivo de reticências. Ela é bastante exigente em relação à gramática, e tem certa razão. Se seu "estilo" de escrever é ruim, sua gramática é pior ainda, você não usa pontuação e o design é horrível, você atingirá um grupo razoável de pessoas. Mas a idéia aqui é atingir um grande número de pessoas para você crescer um pouco. Acorda, cara! Tenha respeito pelos seus leitores e descubra um estilo que se destaque entre os bons blogs.

Publicar atualizações regularmente. Danah Boyd me disse que uma vez ela quis diminuir o tráfego em seu blog propositalmente e descobriu que a maneira mais fácil de fazer isso era deixar de fazer postagens com freqüência. (Danah é excêntrica, e é por isso que nós a amamos). O inverso de sua experiência também é verdadeiro: quanto mais postagens você fizer no seu blog, mais tráfego você terá. Você precisa pensar nisso como regar uma plantinha todo dia para que ela cresça. Só espero que seu blog não seja como a planta em A Pequena Loja dos Horrores. Isso seria terrível.

Pense no seu público-alvo. Uma boa maneira de criar um público-alvo é cultivá-lo. Quando você tem o seu público-alvo em mente, você está se concentrando na sua forma de escrever. Isso ajuda a desenvolver uma linguagem mais forte e serve como instrumento para criar a marca, que é você mesmo, quando se trata de seu blog. Novamente, essa é uma técnica de criação de tráfego que exige bastante tempo para mostrar resultados. No entanto, leva um bom tempo para que um visitante se torne assíduo.

Ter os mecanismos de pesquisa em mente Observe que, às vezes, seu "público-alvo" é alguém que cai de pára-quedas no seu site vindo de um mecanismo de pesquisa. A pesquisa é uma boa maneira de trazer novos visitantes. Existem certas coisas que você pode fazer para tornar seu blog mais amigável para os mecanismos de pesquisa. Use títulos de postagem e tags de títulos de páginas de blogsjuntamente com seus arquivos de páginas de postagem. Cada uma das suas páginas de postagens receberá automaticamente um nome inteligente, com base no título da sua postagem. Além disso, tente ser descritivo quando você blogar. Uma postagem bem trabalhada sobre algo muito específico pode terminar entre os principais resultados de uma pesquisa. Por exemplo, uma pesquisa feita no Google para "Design de capas de livros" apresenta esta postagem de blog pelo famoso Jason Kottke, com comentários dos leitores.

Manter postagens e parágrafos curtos. Observe a concisão da postagem de Kottke mencionada anteriormente. As pessoas voltarão todos os dias para ler suas últimas notícias, mas espalharão centenas de críticas. Procure manter postagens sucintas que tragam informações novas pertinentes à blogosfera, e prossiga. Mantenha-a curta e agradável para que os visitantes possam abrir, ler e clicar nela. Pense no seu blog como um efeito cumulativo. Isso não significa que você nunca deverá fazer postagens longas, é apenas algo que você deve ter em mente.

Itens de ação de marketing

O terceiro e último grupo de técnicas promocionais são ações simples que você toma para fazer a propaganda do seu blog. Teoricamente, essa categoria é ilimitada. Você poderia fazer sua própria criação e soletrar o subdomínio do blogspot em luzes brilhantes nas laterais. Em vez disso, limitamos essas sugestões para táticas mais óbvias e mais fundamentadas. (Para as coisas mais simples, por favor: use hélio, não hidrogênio.)

Coloque o URL do seu blog na assinatura do seu email. Sempre quando eu vejo o URL de um blog em uma assinatura de email, eu clico nele para ver com quem eu estou tratando. Principalmente se for alguém que eu não conheço. Emails são encaminhados a todo o momento; assim, se você envia apenas cinco notas por dia aos amigos, o número possível de pessoas clicando no seu blog está na casa das centenas. (Obviamente, isso é inteiramente teórico, mas acredite em mim, vale a pena.). Eu não posso lhe dar instruções específicas sobre como editar a assinatura do seu cliente de email, porque eu não sei qual você usa, mas dê uma vasculhada. Está nas configurações.

Envie seu endereço a sites e diretórios de pesquisa de blog. Todos os dias, as pessoas procuram conteúdo de blog no Technorati. Você está nesta lista? Deveria. Envie o URL do seu blog paraTechnorati, Daypop, Blogdex, Popdex, e qualquer outro site desse tipo que você encontrar. Com exceção do Technorati, muitos desses sites são projetos criados por alunos formados ou como hobby, mas eles continuam a ganhar visitantes que procuram blogs interessantes para ler, marcar como favoritos e visitar novamente. Nem todos eles têm capacidade de espalhar cada blog existente, mas você pode ajudá-los a ajudar você, deixando seu URL no campo adequado.

Participe de jogos de simulação (mimese). Um jogo de mimese é uma idéia transmitida de pessoa para pessoa, como um vírus. Se o resfriado fosse um blog, ele teria um tráfego louco. Com todas as analogias relacionadas a doenças, os jogos de mimese induzidos por blogs são realmente divertidos e podem conceder a você algum tráfego extra. Como eles funcionam? Basicamente, um blogueiro vai sugerir uma idéia como "Ei, vamos postar a primeira sentença do seu livro favorito!" e isso vai se estender desenfreadamente, com as pessoas clicando nos links do envio de cada pessoa obsessivamente até que o jogo termine. Um jogo de mimese de grande sucesso durante anos foi o Friday Five. Se você está procurando algo novo, experimente The Daily Meme.

Anuncie Se a publicidade com palavras fosse suficientemente acessível, eu diria para você entrar nessa. Agora, um bom motivo para participar é quando é grátis. BlogSnob é uma rede gratuita de anunciantes de blogs baseada em texto à qual você pode se associar agora mesmo. Hospede anúncios, coloque anúncios. Tudo isso representa tráfego. Os anúncios do BlogSnob são adicionados diretamente ao seu site e podem ser personalizados. Os blogueiros que se unem à rede podem colocar anúncios gratuitos, embora num futuro próximo os anunciantes reais tenham que pagar para serem notados. Paga-se para ser um blogueiro.

Link a outros blogs. É uma boa maneira de obter tráfego. Isto é o que acontece quando você se conecta a outro blogueiro: ele vê você no log de referências dele, verifica seu blog e, então, muito provavelmente se conecta a você ou, pelo menos, tem um estímulo mental de fazê-lo. Os links são a unidade monetária da blogosfera e a gente precisa de dinheiro para ganhar dinheiro. Por isso, comece a usar links. Não desanime, isso não significa necessariamente dinheiro. Ainda não. De qualquer forma, quem sabe o que os blogueiros vão inventar!.

Instale um blogroll. Isso é semelhante a adicionar links. Bem, na verdade, é a mesma coisa, mas é diferente. As postagens de blog ás vezes saem da página frontal e são arquivadas. Um blogroll tem mais a ver com uma afirmação pessoal: esses são os blogueiros que eu gosto. Ou então, esse é o pessoal com o qual eu quero me associar. É um esquema de rede social de amigos simples mas efetivo, com o mesmo resultado que um link simples, se não for mais forte: tráfego! Então, se você ainda não tem um, inscreva-se para um blogroll e faça essa lista de links aumentar.

Seja um comentarista ativo. Procure deixar comentários sobre os blogs que você lê todos os dias. É o mesmo esquema que adicionar links. Você pode fazer com que uma pessoa ganhe o seu dia deixando um comentário sobre sua postagem. Nada supera a sensação de receber aquelas notificações de email que sussurram tacitamente na tela "Seus pensamentos me fizeram refletir bastante. Eu tenho que reconhecer você e sua grandeza." (Ou algo do mesmo efeito.) A maior parte dos sistemas de comentários também fornece uma forma para você deixar um link de volta ao seu blog solicitando uma visita. Então, se você se sente inspirado, deixe sempre um ou dois comentários nos blogs que você visitar. Faça a sua parte.

Promova suas postagens por email para outros blogueiros. Essa é uma técnica delicada e deve ser tratada com cuidado. O blogueiro Eugene Volokh publicou uma pequena análise sobre como melhor promover o blog de uma pessoa por email, incluindo ótimas dicas e conselhos. Assumindo que realmente valha a pena promover seu blog (com certeza é), aqui estão algumas dicas do Volokh.

Promova a postagem, não o blog.
Inclua o texto completo e o seu URL.
Envie apenas as melhores postagens.
Não promova apenas para blogs de tráfego intenso.

Imprima o URL do seu blog em cartões, adesivos etc. Basicamente, se você pretender ter algo impresso, coloque aí o seu blog. Atualmente, cada vez mais cartões de visita incluem endereços de blogs juntamente com o email e o número de telefone. Eu não ficaria surpreso se começasse a ver endereços de blogs em adesivos de pára-choques. Há muito trânsito nas rodovias. Aquele pára-choque à minha frente é um grande meio de propaganda.

Falando em rodovias, provavelmente, você já deve ter se deparado com a grande SUV laranja com a placa de automóvel que indica BLOGGER ao dirigir ao sul em direção a San Jose? Não, esse não é Evan Williams, como você poderia pensar. Na verdade, trata-se de uma publicidade criativa. Se há uma coisa que eu aprendi com a investigação que fiz no Dia do Trabalhador sobre a promoção de blogs é esta: Nãoseja aquele sujeito com a placa de automóvel BLOGGER, mas pense como ele. Esse é o tipo de técnica de comprometimento com a qual você deve iniciar o seu jogo. Esse é a forma que você tem para transformar seu peão em rei.

[Matéria] Sobre a guia "Ganhos" do Blogger

2011-12-05T07:15:00.001-08:00

A guia Ganhos do Blogger facilita a ativação dos anúncios do Google AdSense em seu blog. Após a aprovação da conta, o Blogger recupera dados sobre seus ganhos, assim você não precisa acessar o painel do Google AdSense para obter as informações básicas sobre ganhos.

Relatório do Google AdSense

Depois de iniciar a geração de impressões do Google AdSense, você começa a ganhar dinheiro quando as pessoas clicam nos anúncios exibidos em seu blog. O relatório de ganhos (visível quando você clica na guia Ganhos) inclui uma barra suspensa com Hoje, Ontem, Última semana, Este mês e Todo o período.

Selecionar uma opção recupera o relatório relevante diretamente do Google AdSense.

Todo o período

Se você já é usuário do Google AdSense, perceberá que o Blogger criou um novo canal, com o URL de seu blog, em sua conta. Se você já exibia anúncios do Google AdSense em seu blog antes de usar a integração do Blogger com o Google AdSense para inserir anúncios, é importante lembrar que a opçãoTodo o período recupera dados somente a partir do momento em que você conectou o Blogger a sua conta do Google AdSense.

Isso não afeta os relatórios gerais do Google AdSense, disponíveis diretamente no Google AdSense.

Terminologia

O relatório do Google AdSense, disponível na guia Ganhos, contém informações básicas sobre quantos anúncios são exibidos em seu blog, quantos cliques foram gerados e quanta receita você ganhou. Cada termo no relatório está definido abaixo:

Visualizações de página: uma visualização de página é gerada sempre que um usuário visualiza uma página que exibe anúncios do Google. Contaremos uma visualização de página independentemente da quantidade de anúncios exibidos nessa página. Por exemplo, se você tiver uma página que exibe três blocos de anúncios e ela for visualizada duas vezes, serão geradas duas visualizações de página e seis impressões de blocos de anúncios.
Cliques: a quantidade de vezes em que os anúncios foram clicados no período determinado no relatório.
CTR da página (taxa de cliques): o número de cliques em anúncios dividido pelo número de visualizações de página.
CPC (custo por clique): o valor médio pago pelos anunciantes por clique.
RPM da página (receita por mil): esta é a renda por 1.000 visualizações de página. RPM = (Visualizações de página x CTR x CPC) / 1.000

[Tutorial] Como adicionar CSS personalizada no Blogger

2011-12-05T07:10:00.001-08:00

O Designer de modelo do Blogger permite personalizar praticamente todos os aspectos da aparência do seu blog por meio das CSS (folhas de estilos em cascata). Para adicionar snippets de CSS ao seu modelo, abra o Designer de modelo e adicione o seu código no campo localizado na guia Avançado | Adicionar CSS.

As alterações feitas serão imediatamente refletidas em uma visualização dinâmica abaixo do editor.

Observação: É possível alterar o visual do seu blog editando a CSS. Para alterar o conteúdo real do seu blog, seja incluindo gadgets ou fazendo mudanças no layout, use o campo Editar HTML localizado na guia Layouts. É importante lembrar que, como em outras personalizações, se o design for alterado, a CSS será removida.

A CSS permite criar diversas personalizações de estilo. Vamos analisar algumas delas para que você possa entender como essas mudanças são feitas.

A primeira alteração de CSS que analisaremos é como centralizar o texto do cabeçalho do seu blog. Vá para o campo CSS localizado na guia Avançado | Adicionar CSS no Designer de modelo. Em seguida, insira as seguintes linhas de código:

.Header {
text-align: center;
}

Depois de adicionar o código, você verá que a imagem do texto do cabeçalho mudou para o alinhamento centralizado. Se você gostou do resultado, clique no botão laranja Aplicar ao blog e a imagem do cabeçalho será salva. Se você decidir remover ou alterar a imagem do cabeçalho mais tarde, basta apenas excluir ou alternar o código de imagem do campo.

A segunda alteração de CSS que analisaremos é como adicionar uma imagem de plano de fundo ao seu blog. Para sermos mais práticos, vamos considerar que a sua imagem não está hospedada na web e forneceremos instruções sobre como fazer upload dela em um host de arquivos para vinculá-la ao blog. Estas são todas as etapas necessárias para usar uma imagem do computador como plano de fundo no seu blog:

Compacte a sua imagem.

250 KB

Faça upload da sua imagem em um host de arquivos. Para adicionar uma imagem de fundo pela CSS, é necessário que a sua imagem possua um link. Se a sua imagem ainda não estiver na web, faça upload dela em um host para armazená-la. Algumas opções confiáveis são os Álbuns da web do Picasa, o Imgur e o Photobucket. Navegue até o host de sua escolha e siga as orientações de upload.

Adicione o snippet de CSS da imagem de plano de fundo. Agora que o upload foi concluído, adicione a CSS para usar a sua imagem como plano de fundo do seu blog. Este é o código:

.body-fauxcolumn-outer {
background: url(http://www.exemplo.com/imagem.png);
}
.body-fauxcolumn-outer div {
background: none;
}

Aplicar ao blog. Se você gostou do resultado, clique no botão laranja Aplicar ao blog e pronto. Se preferir, você também pode remover ou alterar a imagem de plano de fundo mais tarde.

Observação: Os modelos com gradientes (como o Simples 1) podem entrar em conflito com o uso de imagens de plano de fundo.

[Tutorial] Designer do modelo do Blogger;

2011-12-05T07:09:00.001-08:00

O Designer de modelo do Blogger é uma maneira nova e fácil de personalizar a aparência de seu blog. Ele fornece uma variedade de modelos, imagens, cores e layouts de coluna para deixar o blog com a sua cara. Para obter o Designer de modelo, clique em Design | Designer do modelo.

Para acessar o Designer de modelo na interface atualizada, clique no menu suspenso ao lado do ícone cinza "Visualizar postagens" e selecione Modelo. A partir desse menu, você pode escolher e personalizar seu modelo.

Enquanto experimenta o Designer de modelo, será exibida uma visualização de como ficará o blog com base nas suas escolhas. Para expandi-la, pressione a opção Expandir visualização entre o painel do Designer de modelo do Blogger e a visualização. Quando estiver satisfeito com o visual do seu blog, pressioneAplicar ao blog no campo superior direito do Designer de modelo para aplicar as alterações.

Para começar a usar o Designer de modelo do Blogger, selecione um dos modelos disponíveis criados por profissionais. Cada modelo é exibido como uma miniatura grande. Quando você clica em um modelo, diferentes variações do original são exibidas. Clique para selecioná-las. Observe que ao clicar em um novo modelo você excluirá todas as personalizações feitas em um modelo anterior. Depois de escolher um modelo, você pode continuar personalizando o visual do seu blog.

Não importa qual modelo é exibido no Designer de modelo, você pode ver todos eles no seu blog usando a miniatura Agora no blog no painel de controle do Designer de modelo. Outra alternativa é clicar nessa miniatura para redefinir o modelo no Designer de modelo para a versão atual do seu blog.

Plano de fundo

É possível alterar a aparência de um modelo mesmo depois de escolhê-lo. Com o Designer de modelo do Blogger, você pode escolher a cor ou a imagem do plano de fundo do seu blog e alterar o esquema de cores. Para começar a personalizar o seu plano de fundo, clique na miniatura em Imagem de plano de fundo.

Um dos novos recursos do Designer de modelo permite alterar a cor da sua imagem de plano de fundo. Isso é possível quando essa imagem tem transparência. Um plano de fundo transparente possui um quadriculado no canto superior direito da imagem.

Para alterar a cor do plano de fundo, selecione a imagem, clique em Cor de tema principal e selecione a cor de sua preferência.

Só é possível alterar a cor do plano de fundo se ele for transparente. Além disso, se o modelo escolhido possui plano de fundo cinza, não será possível alterar sua cor.

Além de selecionar e personalizar a imagem de plano de fundo do seu blog, também é possível selecionar um tema de cor para aplicar aos aspectos do seu blog, incluindo textos e links. Para fazer isso, experimente a Cor de tema principal ou escolha um dos nossos Temas sugeridos. Alterar a cor do tema do seu blog mudará as cores de todos os aspectos do modelo de blog que podem ser modificados.

Observação: Se a imagem de plano de fundo não for transparente, os temas alterarão o esquema de cores de texto do blog

Observação: Para obter informações sobre como fazer upload da sua imagem de plano de fundo personalizada, consulte o nosso artigo sobre Como adicionar CSS personalizada ao seu blog.

Layout

É possível escolher várias opções de layout para o seu blog, com até três colunas. Esses layouts permitem arrastar e soltar gadgets na página. Também há várias opções de layout para o rodapé do blog.

O Designer de modelo do Blogger não permite adicionar, remover ou editar gadgets. Para fazer isso, use a guia geral Layout.

Ajustar largura

Você pode ajustar a largura do blog e as colunas da esquerda e da direita arrastando o controle deslizante para diferentes partes do layout. As opções mostradas aqui correspondem ao tipo de layout escolhido. Se, por exemplo, você escolher um layout com colunas dos dois lados, você verá controles deslizantes à esquerda e à direita. Se você escolher um blog com apenas uma coluna à esquerda, somente essa opção será exibida aqui.