Julho 2013


Aprenda a colocar uma caixa de aviso em seu blog, indicado na imagem. Este é um modelo simples feito em CSS3 com opção de personalizar. É uma caixa que tem muitas utilidades.


Coloque a caixa de aviso com opção de fechar no seu blog

Para adicionar é muito simples, vá em Layout > Adicionar Gadget > HTML/JavaScript e cole o código abaixo.

<style type="text/css">
#aviso{
width:500px; /* Tamanho da caixa */
padding:5px; position:absolute; z-index:5000;}
.caja-aviso{
border:4px double #0080FF; /* Cor da borda */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #808080; -moz-box-shadow: 8px 8px 6px #808080; box-shadow: 8px 8px 6px #808080;
background-color: #CEECF5; /* Cor de fundo */
padding: 10px; font-family: Verdana, Geneva, sans-serif;
color: #0B173B; /* Cor do texto */
}
.letrero-aviso { /* Estilos da palavra AVISO */
font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #CEECF5;}
</style>
<div id="aviso" style="left:300px; top:100px; padding:0;">
<div align="right" style="margin-bottom:-30px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">[FECHAR]</font> <img valign="middle" src="https://lh5.googleusercontent.com/-46DmTbFSiuQ/TliKe_XV0lI/AAAAAAAAGJ4/_H2c3HB4XoY/CloseIcon-small.png" style="vertical-align:middle;"/></a></b></div>
<br/>
<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="center">AVISO</legend>
”...Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker....”
<br/><div align="right"><a href="http://www.facebook.com/usuario" target="blank"><img src="https://lh6.googleusercontent.com/-9TNSAdSEm2o/Tlgi_wnuKZI/AAAAAAAAGJw/6rLfLd-QfkE/facebook.png" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://lh6.googleusercontent.com/-xk9JDUThPo0/TlgjAUiI4eI/AAAAAAAAGJ0/t5QtAN0xPco/twitter.png" width="25"/></a></div>
</fieldset>
<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>
</div><div class="clear"/></div>


Onde está marcado de azul é onde você poderá fazer as alterações, colocando a descrição e o links de suas redes sociais.
Use com Moderação.

-->


Com este gadget, poderá ser vizualizando os últimos comentários feitos em seu blog, junto com o nome e o avatar da pessoa que comentou. É um opção que você oferece aos seus leitores de ficar por dentro do que está sendo comentado em seu blog, e quais os assuntos mais acessados.



Este gadget é personalizável, não ocupa muito espaço e é leve. As cores dos links do título e largura variam de acordo com o layout do seu Blog, claro, seguindo o seu padrão.

Adicionando o este gadget ao seu blog

Vá em Layout > Adicionar HTML > HTML/JavaScript > Adicione o código abaixo:



Se você quiser alterar o número de comentários altere o número 5 por um número maior ou menor.
Se você desejar alterar o tamanho do avatar, altere em width: 36px;  height: 36px;
Se não quiser que apareça o avatar (foto) troque Yes por no.
Você pode também alterar cor, tamanho, estilo da fonte.
Qualquer dúvida não hesite perguntar, usando a seção de comentários.

Agora é só ver o resultado em seu Blog.

-->

Muitos procuram gadget de assinar newsletter limpo simples, porém elegante para adicionar em seus blogs. Este é mais um tutorial que lhe ensinará a adicionar um gadget de assinar newsletter, fácilde instalar com efeitos em CSS. 
Você poderá posicioná-lo em qualquer parte do seu template, que aceite gadgets padrões do Blogger. 
O modelo ficará como está na imagem abaixo:



Colocando Gadget de Assinar Newsletter no Blog

Acesse o painel de controle do blogger > vá em layout > adicionar gadget > HTML/JavaScrips > E adicione o código abaixo, fazendo modificações somente nos locias indicados.

<style>
.mbt-email{
background:url(http://4.bp.blogspot.com/_MbejYjGokMM/TSeZHmWJ6oI/AAAAAAAAALE/93ELYyzmi64/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#0084CE;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif; box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
}
.mbt-emailsubmit:hover{
background:#0084CE; box-shadow:inset 8px 8px 6px rgba(0,0,0,0.1);
}
.textarea{background: #fff !important;box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #888; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px; }
</style>
<div class="mbt-email">
Receba as atualizações via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SEU-FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="SEU-FEED" name="uri"/><input type="hidden" name="loc" value="pt_Br"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

No código tem dois textos destacadas em azul : "SEU-FEED", você irá substituir pelo nome do seu Feed no FeedBurner.

-->


Mais um gadget de postagens populares com um visual intuitivo e simples, onde será exibido os melhores artigos de seu blog em escala de cores.  
Para adicionar este gadget é muito simples, basta que você siga este tutorial descrito abaixo.

-->

Inserir Gadget de Postagens Populares com Barra de Cores e Numerado

Se você já usa uma barra de "postagens populares", exclua. 
Depois que você remover vá em > Modelo > Editar HTML > Procure pelo código :

/* Variable definitions
====================

Agora é preciso saber qual é o tipo de Template do seu Blog. Se for um modelo clássico, padrão do Blogger atual, use o seguinte código colando imediatamente abaixo do que foi indicado no item acima:

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#ff4c54"/>
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ff764c"/>
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ffde4c"/>
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#c7f25f"/>
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#33c9f7"/>
</Group>

No caso de o seu template ser um modelo antigo (não o modelo padrão do blogger), então cole o seguinte código:

<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#fa4242">
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ee6107">
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ff00ff">
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#ffff00">
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#00ffff">

Procure pela linha ]]></b:skin> e cole o código abaixo, acima desta tag;

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none;}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px;}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%;}
#PopularPosts1 ul li:first-child:after{content:"1";}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%;}
#PopularPosts1 ul li:first-child + li:after{content:"2";}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%;}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%;}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4";}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%;}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5";}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none;}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none;}

Agora procure o seguinte: <b:section-contents id=’sidebar-right-1′> (ou um código similar) e logo abaixo cole o seguinte:



<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Agora vá ao menu “Layout” e no gadget de Postagens populares que apareceu, seleciona o numero de postagens que deseja exibir (recomendo não mas do que 5).

Por último, se você quiser mudar as cores de cada barra é simples…
Entre em ► Modelo ► Personalizar ► Avançado ► PopularPosts Backgrounds


E selecione as cores desejadas.



Você já deve está familiarizado com este termo, a sabe o quanto é importante que seu blog esteja otimizado para os buscadores. Alguns templates do blogger não são SEO amigável, porque foram projetos a muito tempo atrás, e não foram atualizados, talvez desde de 2007. E desde então, o Google SEO mudou, e você como blogueiro nao quer ficar para trás, então atualizar seu template e aplicar as técnicas de SEO e muito importante. E neste artigo você irá aprender a Otimizar os títulos de postagens.


-->

Se você usa um template do Blogger, você precisa fazer algumas alterações, para atender suas necessidades e as de pesquisas. Os templates do blogger como o “Simples”, “Travel”, etc, têm a tag H1 como título do blog, o que é normal. Mas o título do post não é certo, uma tag h3, por algumas razões, seu blog não aparece nos resultados da pesquisa e esta é uma das razões.


Otimizar o título do post para H2


Para fazer as alterções, basta seguir as instruções descritas abaixo. 


Faça login no seu painel blogger > Vá em Modelo > Editar HTML > Use CTRL+F > Procure por esta linha:


<h3 class='post-title entry-title' itemprop='name'>


O que você precisa fazer e mudar o <H3> para <H2>, mude apenas o numero. Mais como ainda há uma tag, você precisa mudar tanto a <H3> como </H3>.


Veja na ilustração abaixo onde a primeira linha começa com H3 e deve ser mudado para H2, e a mesma coisa na última linha.




Depois de mudar h3 para h2, lembre-se de mudar todas as tags h3 se não vai dar problemas na hora de salvar o modelo.


Você vai encontrar a tag h3 duas vezes; uma é para o Template versão Desktop e a outra é para o Template versão Mobile. Eu recomendo que você mude todas as tags h3 para h2 que marca o título do post.

Isso melhora a visibilidade nos resultados de busca. Uso do H3, só é bom, para no corpo da postagem. Esta não foi uma grande mudança ou edição de uma melhor SEO, mais com pequenas alterações e melhoras feitas no seu blog, fará com que seu blog esteja mais visível e amigável para os motores de buscas. Chegar ao topo das pesquisas não é fácil, mais com essas melhoras e seu empenho no seu trabalho fará com que seu blog tenha uma boa posição.


Não desista, continue postando mesmo que seu blog nao esteja numa boa posição.

Quem usa muitas imagens na suas postagens, talvez tenha se deparado com esse problema no ajuste da imagem, e isso torna um pouco chato conseguir ajustar as imagens ao espaço exato que tem na área de postagem. 

-->

No blogger os padrões de imagens são confusos e não exibem medidas em px(Pixel). Então, ao adicionar uma imagem, pode  fica grande demais ou pequena demais. Então vai esta dica para ajustar automaticamente as imagens sem perder a qualidade, mesmo sendo largas que a área de publicação.

É um pouco difícil colocar uma imagens no posts do seu blog, que fique da forma que você deseja, com a largura perfeitamente ajustada, sem perder a qualidade e ficar desproporcional ao espaço. O Blogger é muito limitado nestas opções, e não oferece muitos recursos para edição.

Agora se você quiser colocar imagens bem ajustadas, você pode usar editores de imagens para editar e ajustar, antes de colocar no blog. Isso é bom para quem já tem conhecimento e sabe manusear as ferramentas de edição dos softwares disponíveis no mercado, outro fator e que alguns queiram colocar a imagem em seu tamanho total, para que quando o visitante clicar na imagem, veja em tamanho grande.



Para resolver esse problema, você adicionar um pequeno trecho em CSS no código fonte do seu template, podendo resolver este problema. Com isso você conseguirá usar imagem sempre no tamanho original, ajustadas automaticamente.

Aplicando este recurso em seu Blog

Entre no painel de controle de seu blogger > Modelo > Editar HTML > De CTRL+F > Procure pela tag: 

]]></b:skin> 

Cole o código abaixo, acima desta tag. Sem alterar nada.

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */

}

Salve, e depois faça testes, adicionando novas imagens que sejam bem mais largas que a área de trabalho de seu blog, e veja o resultado.

Esta mudança será aplicada a outras imgens que já estavam publicadas, e que usavam um espaço maior que a largura padrão do blog.


  



A equipe do Blogger fez modificações na visualização do código fonte dos templates, melhorando o editor HTML, e dando o maior controle, para fazermos alterações. Muitas coisas são novas, e melhoram e facilita na hora de fazer alterações nas estruturas do código, que inclui a separação por cores, assim fica mais fácil de encontrar trechos importantes. E para quem não é familiarizado com códigos e programação, ficou ainda mais simples melhorar o layout do blog.

Mudanças e novidades do novo Editor HTML


Basicamente trata-se de uma melhoria visual e na organização do código fonte dos templates. 
Ficou mais fácil fazer modificações no html, mexer no gadgets/widgets, encontrar linhas de códigos e identificar os tipos de código que compões o layout.

Clicando em modelo e depois em Editar HTML, percebe-se a integração ao painel de controle do blogger está mais simplificado.



O menu “Layout” ainda continua funcionando normalmente e, para quem não quer mexer com códigos, poderá continuar usando a estrutura visual do Blogger. Mas nem sempre o que queremos modificar pode ser feito só por tirar e colocar Gadgets/Widgets (Elementos de Página). De vez em quando algumas mudanças precisam ser diretamente no código, seja inserindo, modificando ou excluindo trechos de HTML e CSS, entre outros tipos de códigos.

Todas as funções ficaram em botões bem destacados e grandes no topo da área de códigos, onde tudo está mais visível e fácil de identificar.

Voltar = retorna para o menu “Modelo”, fechando a tela de edição do código fonte.
Salvar modelo = ele tem uma cor destacada dos demais e é o mais importante. Mas ele não precisa ser usado sempre que fizer alguma modificação. Você verá abaixo que é possível ver mudanças no layout antes de salvar e não correr o risco de estragar seu blog. Portanto, o botão “Salvar modelo” é o último recurso a ser usado quando mexer em algo no código fonte.
Ir para um widget = abre a lista de elementos de página, os Gadgets que estão em seu layout. Com isso é mais fácil escolher o gadget e ir direto para a parte onde está o código daquele elemento, sem precisar procurar linha por linha.




Editar Modelo = é o botão que exibe o código fonte. Com ele marcado você sempre verá o código fonte. É nele que temos a opção de expandir todos os trechos de código ou esconder outros. Antes existia uma marcação, mas agora está mais evidente em cada parte. Note a imagem de exemplo que segue:



Perceba que da linha 51 há um salto para a linha 564. Esse salto, marcado pela seta indica que há códigos escondidos bem nesse ponto.Se clicar na seta esse trecho será expandido e você poderá ler todas as linhas que estavam ocultas, inclusive modificá-las uma por uma.

Visualizar modelo = a cada nova edição e modificação é possível visualizar o layout do seu blog antes de aplicar a mudança. Significa que você pode ver como está ficando e se vai funcionar sem precisar salvar e correr o risco de estragar o template.

Formatar modelo = com esta opção marcada é que são feitas as buscas por linhas e trechos de códigos. Usando os atalhos “Ctrl+F”, é aberta um pequeno formulário onde você pode digitar ou colar o trecho que quer encontrar no código.



Reverter alterações = volta para o momento em que o seu código estava, caso você não se lembre quais partes excluir para voltar ao normal se algo der errado. Por isso mesmo que é importante visualizar as mudanças antes de salvar, pois agora é possível voltar sem colocar seu blog em risco.
Reverter modelos de widgets para o padrão = se a mudança for feita em algum elemento de página, em algum gadget do seu template, então pode clicar nesse botão para que  Blogger restaure para o padrão.

Uma duvida que pode ter surgido é a nomenclatura de widget para os elementos de página dentro do código. Basicamente dá na mesma chamar de Gadgets ou Widgets.

Eu vejo que essas mudanças, melhoraram a forma como podemos editar a template de nosso blog. É mais fácil e prático, apesar de algumas limitações de recursos.

-->


O que prejudica as técnicas de SEO, é a estrutura errada no código fonte do seu template, e isso torna mais difícil aparecer nos resultados de buscas. E um dos maiores problemas da indexação de blogs no google é a conteúdo duplicado. O mais comum é que os links dos comentários se tornem conteúdo duplicado. Então vou neste tutorial vou ensina-los a resolver este problema. 


-->


Adicione "Nofollow" aos links dos Comentários


Acesse seu blogger > Vá em Modelo > Editar HTML > Usando seu teclado pressione CTRL+F para fazer a busca.

No campo Search cole o seguinte Código:


<a class='comment-link'


Quando você encontrar, será parecido com o que está na imagem acima. Ao lado, adicione  o trecho:


rel='nofollow'


Agora porcure por esta outra linha


<a expr:href='data:comment.authorUrl'


E acrescente:


rel='nofollow'


Depois que você concluir o processo, salve. Agora o Google não pensará que seu blog está duplicando conteúdo.





Neste pequeno tutorial, vou mostrar como usar o função "Leia mais", nas postagens da página principal do seu blog. É bem fácil, e pode ser feito de forma manual que é muito prático, e existe recursos que automatizam este processo. Os resumos, mostram uma pequena imagem alinhada ao texto e um trecho do primeiro parágrafo, seguindo de um "Leia mais", "Continue lendo" ou "Mais informações". 

-->

Esta é um função que deixa seu blog mais leve e mais fácil de navegar. Assim o leitor ou visitante de seu blog, tem a opção de escolher o que ele quer ler. Há alguns blogs que não usam esta função, e quando é acessado na primeira página o visitante tem acesso a todo conteúdo, e isso pode atrapalhar um pouco a navegação, porque nem todos terão a paciência de rolar a página até o fim.

Preste atenção nesta dicas e saiba como usar este recurso no blogspot, na maneira manual e individual para cada post, e de forma automática.

Inserir expansão de Postagens

Este recurso de resumo leva o nome de "Expansão de Postagem" no blogger. Para inserir o modelo padrão de "Leia mais", basta marca a linha onde você quer que seja feito o corte e clicar no botão "Inserir Expansão de Postagem".



Este procedimento é manual, e deve ser aplicado em cada artigo individualmente, se quiser que funcione em todos. 

Aplicando resumo automático


Para quem quiser algo automatizado na hora de aplicar o recurso de resumo de postagens com o link “Leia mais”, pode fazer uma inserção de um código simples. O modelo tem tanto com exibição de uma imagem em miniatura quanto só o resumo do texto e título.

Olá a todos que visitam meu blog, quero agradecer e pedir que se você gostou, compartilhe em suas redes sociais, curta a Fan Page no fecebook, e mande sua sugestão de artigos.
Vou fazer o possível para postar de 2 a 5 artigos por dia, conforme o tempo me permitir. 


-->

E vou postar artigos sobre wordpress, que será novidade que será lançado por esses dias, então fique ligado nas atualizações, pois irei está postando artigos, onde abordarei com mais detalhes, renda extra, ganhar dinheiro online, programa de afiliados, formas seguras de ganhar dinheiro na internet, entre outros assuntos relacionados a SEO, e personalização de seu template. 

Você pode deixar sua sugestão clicando na aba do lado direito, perto do relógio do seu pc, onde está escrito "Sugestão" e mande sua opinião  Pois sua interação com este blog é muito importante.

Participe do blog, deixando seu comentário e diga o que você achou. Opinião de cada visitante conta muito, para a melhora dos artigos e do blog!

Você já deve ter reparado nos sites que você acessou, ao final de cada post tem um link encurtado para, que você divulgue o artigo. Eu ainda não uso esta ferramenta em meu blog, mas vou ensiná-los a adicionar em seu blog. 

-->

É sempre bom lembrar que antes de você fazer qualquer alteração em seu blog, faça o backup de seu template, ou use um blog teste, para constatar o bom funcionamento das alterações que você está prestes a fazer no seu blog principal.

Acesse o site bitly e faça seu cadastro.


Você pode usar sua conta do facebook, twitter ou usar um e-mail.

Adicionar Short Link no final de cada Post

Acesse seu blog > Vá em modelo > Editar HTML > De CTRL+F e procure pela tag 
]]></b:skin> e cole o código abaixo acima desta tag.

form#shorturl {
color:#666;
font-size:11px
}
#shorturl input {
color:#999;
border:1px inset #CDCDCD;
padding:1px 5px;

}

Agora encontre a linha: <div class='post-footer-line post-footer-line-3'> 
Se você não encontrar procure por: <div class='post-footer-line>

Que poderá ser a line-1 ou line-2
Abaixo dessas linhas cole o código:

<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>

Certifique-se de que o código ficará dentro da div post-footer-line. Se a linha estiver assim: <div class='post-footer-line post-footer-line-3'/>

Você deve tirar a barra / e fechar com a tag: </div>
Colocando a linha do código do short url entre as duas linhas.


Veja como fica: 
<div class='post-footer-line post-footer-line-3'> <b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if> </div>

Depois de ter adicionado os códigos acima, procure pela tag </head>
E cole o script abaixo acima desta tag.


<script type="text/javascript" charset="utf-8" 
src="http://bit.ly/javascript-api.js?version=latest&amp;
login=SEU_LOGIN&amp;apiKey=APIKey"></script>
<script type="text/javascript" charset="utf-8">
 BitlyClient.addPageLoadEvent(function(){
  BitlyCB.myShortenCallback = function(data) {
   // this is how to get a result of shortening a single url
   var result;
   for (var r in data.results) {
    result = data.results[r];
    result['longUrl'] = r;
    break;
   }
   document.getElementById("shorturl").innerHTML = "Share this link: 
&lt;input type='text' value='" + result['shortUrl'] + "' name='bitlyurl'/&gt;";
  }
  BitlyClient.shorten(document.location, 'BitlyCB.myShortenCallback');
 });

</script>

Depois clique em visualizar para se certificar de que esta tudo ok, e salve.

Configure o seu Short URL no site Bitly

Acesse o site > Faça login > Vá em Settings > Clique em Advanced > E clique em 
Show legacy API key .
Irá expandir com as informações do seu Login e API key que você deverá 
copiá-los e colar no código acima onde esta destacado em azul.

Depois de concluir todo o processo, salve!




Ao criarmos um artigo para nosso blog, as opções de fontes são limitadas e se resumem em: Arial, Courier, Georgia, Helvetica, Trebuchet, Verdana,Times New Roman. E pensando nisso, quero compartilhar com vocês, através desse tutorial, como usar fontes difentes em seu blog. 

-->

Siga as instruções descritas abaixo

Escolha um fonte para seu blog acessando: Google Web Fonts 

Escolha a Fonte Desejada e Clique em Quick-use




Você será direcionado a outra página. Role a página até encontrar este trecho.



Entre no seu Blogger vá em Modelo > Editar HTML > Dê CTRL+F > Procure pela tag <head> e cole o código acima desta tag. E faça uma pequena alteração no código.

O código que você copiou do site está assim:

<link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>

Acrescente a / antes de

<link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'/>


Feito isso, volte ao site, e role a página, e mais abaixo você encontrará o nome da fonte.



Para mudar a fonte do título dos posts

Vá em Modelo > Editar HTML > Dê CTRL+F e procure por

.post h3 { e se você usa os novos modelos para blog procure por: h3.post-title { 
ou você pode encontrar a linha .post-title {

Feito isso, adicione font-family: 'Antic Didone', serif; conforme a imagem acima, na frente da chave { . Veja o Exemplo:


h3.post-title {
margin-top: 10px;
text-align:center;
border-bottom: 1px dotted #eee;
}
h3.post-title a {
font-family: 'Antic Didone', serif;color: #000000;
font-size: 28px;
text-transform: uppercase;
}h3.post-title a:hover {
text-transform: uppercase;

}

Troque a parte em vermelho, pelo do site.

Mudar a Fonte do Título do Blog

Repita o mesmo procedimento descrito acima, porém encontre a linha de comando do título do blog:

#header h1 {font-family: 'Oregano', cursive; Outros comandos... fecha chave}

Mudar a Fonte do Título das Gadgets

.sidebar h2 {font-family: 'Oregano', cursive; Outros comandos... fecha chave}

Mudar a fonte do Blog todo, colocando a font-family no comando:

body {font-family: 'Oregano', cursive; Outros comandos... fecha chave}

Uma pequena observação

Cuidado, com o excesso de fontes no seu blog. Apesar de ser tentador, escolha a fonte 
que você irá usar, evitando lentidão na sua página. 
Muitas fontes no seu blog, fará com que demore mais para carregar, e isso não é muito 
bom.


Afiliados Cursos 24 Horas - Ganhe Dinheiro com seu Site 

Alberto Monteiro

{twitter#YOUR_SOCIAL_PROFILE_URL} {google-plus#YOUR_SOCIAL_PROFILE_URL}

Formulário de contato

Nome

E-mail *

Mensagem *

Tecnologia do Blogger.
Javascript DisablePlease Enable Javascript To See All Widget