Hoje vamos ver como corrigir alguns erros que o Blogger possui e que as vezes são muito chatos e feios tanto para o layout, tanto pra quem lê, são erros simples e por isso são fáceis de corrigir veja:

Erro 0 ComentárioS,  1 ComentárioS

glossy-silver-comment-bubble-icon

Erro antigo mais que não é legal:

1) Acesse o painel do Blogger(blogger.com)

2) Vá em “Layout”-> “Editar HTML”-> Marque a caixa “Expandir Modelos de Widgets”

3) Utilizando as teclas CTRL e F, procure pelo seguinte trecho:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if></a></b:if>

Substitua o código anterior, pelo seguinte:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'> Deixe seu comentário </b:if>
<b:if cond='data:post.numComments == 1'> 1 Comentário </b:if>
<b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comentários</b:if>
</a>
</b:if>

Erro na página de postagem

1) Procure pelo seguinte código:

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

2) Substitua pelo seguinte:

<b:if cond='data:post.allowComments'> <h4>
<b:if cond='data:post.numComments == 0'> Deixe o seu comentário </b:if>
<b:if cond='data:post.numComments == 1'> 1 Comentário </b:if>
<b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comentários </b:if>
</h4>

Ocultando a exibição do link  “Assinar: Postagens (Atom)”

linkassinaratom

Este é um link que incomoda muito pois já temos vários links para Feed em nosso blog, pra que mais um.

1) Encontre este trecho e adicione a parte em negrito, para o ocultar o link:

.feed-links {
clear: both;
line-height: 2.5em;
display: none;
}

Obs.: Se não possuir o código acima adicione ele antes de “]]></b:skin>

2) Salve todas as alterações

Leia mais...

O apresentou está semana um erro que digamos não é grave mais para os nossos layouts sim. O Blogger não está permitindo mais a colocação de Gadgets sem título, o que é muito ruim pois muitos de nossos Gadgets são importantes sem o título, pois as vezes eles realizam contagem de visitas, identificação do blog, que são coisas que o usuário não precisa saber. Vamos ver uma solução simples abaixo:

Post-1Para corrigir o erro basta inserir o seguinte, no título do Gadget que você deseja que não tenha título:

<h2></h2>

Post-2

 

Pronto agora é só inserir normalmente seus Gadgets.

 

Fonte: El escaparate de rosa

Leia mais...

JavaScript

O Blogger como todos sabem não possui hospedagem de arquivos que não sejam imagens, por isso temos que recorrer muitas vezes a serviços externos que não são nenhum pouco garantidos, por isso há uma solução fácil que é inserir o Java Script completo no Blog. Mas lembre-se de haverá uma diminuição na velocidade de carregamento da página por isso use apenas nos principais Scripts.

Entendendo o código

O código que iremos ver é um delimitador que permite a página carregar o Java Script, veja: <script type='text/javascript'>
//<![CDATA[
Aqui deverá ser inserido o código Java Script
//]]>
</script>

Obs.: Em azul são os delimitadores.

Utilizando o código

Um Java Script hospedado externamente ficaria assim: <script src="http://url-do-script" type="text/javascript" ></script>

O primeiro passo é pegar a URL do Script e fazer o download para o seu computador, depois é só abrir com o Bloco de Notas e copiar o conteúdo do Script e inseri-ló entre os delimitadores veja o exemplo:

Antes: <script type='text/javascript' src='http://noticiaeblog.googlecode.com/files/maiscomentados2.js'></script>

Obs.: Faça o download a partir da URL do Script

Depois:

<script type='text/javascript'>
//<![CDATA[
var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+"</a> ["+postCommentar[f]+" Coment&aacute;rios]";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>')
//]]>
</script>

Obs.: Entre os códigos em azul foi inserido o conteúdo do Java Script

 

Pronto agora é só modificar seus códigos, mas não mude a localização deles apenas substitua pela forma aqui apresentada.

Imagem por: Rede Maior

Leia mais...

O Facebook possui um recurso muito bom para nós blogueiros que é criar uma página de divulgação para o nosso blog onde os leitores podem se tornar fãs da página. Visitando o blog Blog and Web, encontrei um script muito interessante que permite mostrar o número de fãs, mais seria impossível usar no Blogger pois era em PHP e para WordPress, por isso transformei a função em um pequeno Java Script que gera os números. Para que possamos criar vários widgets ou incrementar os que já temos.

Crie uma página no Facebook

O primeiro passo é criar uma página no Facebook, se já possui pegue apenas a URL. Para saber como criar uma página para seu blog acesse este link

Agora vamos analisar a URL da sua página do Facebook, ela será parecida com a seguinte, mas se não for basta clicar em editar na sua página e copiar a sequência de números que aparecer:

http://www.facebook.com/pages/Noticia-e-blog/119052984787200

Guarde estes números que estão na URL, pois eles serão o seu ID da página

Criando um aplicativo no Facebook

Criar um aplicativo é uma forma de obter acesso aos dados do Facebook, como API

1) Faça Login em sua página do Facebook(facebook.com)

2) Adicione o aplicativo que permite desenvolver neste endereço

3) Após permitir o aplicativo clique em “Set Up New Application

4) Preencha o nome do aplicativo pode ser qualquer nome, marque “Concordo” e clique em “Create Application”:

aplicativo

5) Na tela seguinte será exibido os dados seguintes:

aplicativo2

Anote o “Application ID” e o  “Secreto”

6) Preencha o formulário com os dados obtidos acima e clique em enviar:

Número de Fãs do Facebook

Application ID:


Secreto:


ID da página:


Após obter o código você pode inseri-ló no Blogger em um Gadget “HTML/Javascript”,da seguinte forma:

Tenho [código obtido] fãs no Facebook

ou da forma que preferir sendo que no local do código será exibido um número.

 

Aproveite para ser nosso fã no Facebook

Leia mais...

massa

Este é um pequeno script que envia e-mails para várias pessoas de uma só vez. É muito útil para o envio de newsletter ou de novidades em seu site. Mas não abuse do script pois seu e-mail poderá ser considerado spam, por isso de um intervalo de dias em seu envios e também evite títulos com caracteres especiais(ç,!,?,+), para que não ocorre este problema. Veja como usar o script:

Crie sua lista de e-mails

1) Crie um novo arquivo no bloco de nota

2) Insira os e-mails que deseja um em baixo do outro, no formato de lista.

3) Escolha um nome e salve como documento de texto.

4) Agora Hospede o arquivo no Google site

5) Guarde a url da lista. 

Crie uma mensagem

1) Crie sua mensagem no formato HTML. Com a extensão .html ou .htm

Atenção é uma obrigação legal sua mensagem conter uma forma do usuário não recebe-lá mais, por isso no final da mensagem você deve inserir um link para uma página onde ele poderá pedir o cancelamento.

2) Hospede no Google site

3) Guarde a url da mensagem.

Preencha o formulário abaixo:

Atenção os endereços da lista e da mensagem devem começar com http://

Seu Nome:

Seu e-mail:

Assunto:

URL da lista no formato TXT:

URL da mensagem no formato HTML:

Aguarde a confirmação do envio!
Leia mais...

contactable

Este é mais um formulário de contato que encontrei, muito bonito e de fácil instalação. Melhorando ainda mais os meios de contato do seu blog, quem possui o WordPress basta instalar um plugin que veremos abaixo e quem possui o Blogger basta utilizar a minha conversão do plugin, veja um demo

Instalando no Blogger

1) Acesse o painel do Blogger(blogger.com)

2) Vá em “Layout/Design”-> Editar HTML

3) Procure pelo seguinte:

</head>

Antes do código acima adicione:

<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
google.load("jquery", "1.4");
</script>
<script src='http://jqueryjs.googlecode.com/svn-history/r6291/trunk/plugins/validate/jquery.validate.pack.js' type='text/javascript'/>
<script charset='utf8_decode' src='http://noticiaeblog.mynetcko.com/noticiaeblog/arquivos/php/formulario.php?email=fernandopasse@hotmail.com&amp;blog=Noticia e blog' type='text/javascript'/>

Obs.: Substitua o trecho em vermelho pelo seu e-mail de contato, e em azul pelo nome do seu blog.

4) Procure pelo seguinte:

]]></b:skin>

Antes do código acima adicione:

/* Contato
--------------------------------------*/
#content{background-color:#FDFDFD;border-left:2px solid #333;border-right:2px solid #333;position:relative;width:930px;height:100%;margin:0 auto;padding:10px;}
#contactable{background-image:url(http://imgur.com/0PfWr.png);color:#FFF;background-color:#333;cursor:pointer;height:102px;left:0;margin-left:-5px;overflow:hidden;position:absolute;text-indent:-100000px;top:102px;margin-top:10px;width:44px;z-index:100000;} #contactForm{background-color:#333;border:2px solid #FFF;color:#FFF;height:450px;left:0;margin-left:-434px;margin-top:-160px;overflow:hidden;padding-left:30px;position:fixed;top:200px;width:394px;z-index:99;}
form#contactForm input,textarea{background:#FFF none repeat scroll 0 0;outline-style:none;outline-width:medium;width:325px;border:1px solid #dfdfdf;font-family:georgia;font-size:1em;margin-bottom:10px;padding:5px;}
form#contactForm .submit{background:#F5410F none repeat scroll 0 0;outline-style:none;outline-width:medium;width:325px;border:3px solid #F52D0F;outline-color:0;font-size:1em;cursor:pointer;color:#FFF;text-transform:uppercase;font-weight:bolder;font-family:Helvetica;margin-top:10px;padding:5px;}
form#contactForm p{width:325px;font-size:.9em;}
#contactForm .red{color:#F5410F;}
#overlay{background-color:#666;display:none;height:100%;left:0;position:absolute;top:0;width:100%;z-index:0;margin:0;padding:0;}
form#contactForm #loading{background:url(http://imgur.com/v4Q5C.gif) no-repeat;width:55px;height:55px;display:none;margin:100px auto;} #callback{font-family:georgia;font-size:1.1em;color:#FFF;width:325px;display:none;margin:100px auto;}
.holder{padding-top:20px;margin:0 auto 0 20px;}
form#contactForm .disclaimer,form#contactForm label{margin-left:20px;}
.error,#name.error,#email.error,#comment.error{background-color:#EDBE9C;}

5) Procure pelo seguinte:

<body>

Abaixo dele adicione o seguinte:

<div id='contact'/>

6) Salve as alterações.

Instalação no WordPress

Baixe e instale o plugin Contactable no seguinte endereço: Theodin.co.uk
Leia mais...

O Blogger inseriu mais uma inovação que é muito útil e substitui aquelas funções que só a navbar tinha, o recurso permite enviar a postagem para diversos serviços de compartilhamento que são os principais, Twitter, Facebook, Buzz e ainda funções como enviar por e-mail e blogthis ou seja postar no seu blog o link da postagem. Quem tem os templates padrões do Blogger, pode desfrutar deste serviço apenas acessando o painel mais quem possui um template personalizado deve fazer algumas alterações que veremos abaixo.

Ativando o serviço pelo painel

1) Acesse o painel do Blogger(draft.blogger.com)

2) Vá “Layout/Design”-> “Elementos da página”-> “Postagens no blog”->  “Editar”

3) Selecione a caixa “Mostrar botões de compartilhamento”

botao-post

4) Verifique se apareceu um barra de ferramentas como esta abaixo:

botao-post2

5) Se apareceu, não será necessário fazer qualquer alteração no seu blog, caso contrário faça a alteração seguinte.

Alterando HTML

1) Vá em “Layout/Design”-> “Editar HTML”-> Marque a caixa “Expandir Modelos de Widgets”

2) Procure pelo seguinte código utilizando as teclas “CTRL” e “F”:

<div class='post-header-line-1'>

Obs.: Se tiver mais de um lembre-se que é o segundo e como referência ele deve estar antes do seguinte código:

<div class='post-body entry-content'>

3) Substitua-o pelo seguinte:

<div class='post-header'>
    <div class='post-header-line-1'><div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div> </div>
    </div>

4) Salve e visualize.

 

Pronto creio que agora o serviço vai funcionar com certeza pois verifiquei nos modelos padrões e única diferença era essa pois o código do botão o blogger já havia adicionado então o que faltava era este.

Leia mais...

Este é um serviço que o Blogger deveria ter naturalmente em sua área de comentário, para que o escritor possa interagir com o leitor de forma fácil. Mas como ainda não possui esta opção nativamente temos fazer uma alteração que ainda sim dão dá uma função satisfatória mas como muitos diriam “Quebra o galho”, então veja abaixo como inserir em seu blog.

Inserindo o Hack ao Blogger

1) Acesse o painel do Blogger(blogger.com)

2) Vá em "Layout/Design"->"Editar HTML"->Marque a opção "Expandir Modelos de Widgets"

3) Procure o seguinte trecho no seu HTML utilize as teclas “CTRL” e “F”:

<data:commentPostedByMsg/>

Abaixo do código acima insira o seguinte adaptando de acordo com seu blog:

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID-DO-SEU-BLOG&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Responder comentário]</a></span>

Obs.: Em vermelho substitua pelo ID do seu blog, se não sabe veja o pequeno tutorial abaixo:

1) Acesse Layout/Design no Blogger

2) Observe o endereço na “barra de endereços” do seu navegador:

ID-do-blog Os números circulados em vermelho são o id do seu blog basta substitui-lós no código.

Em verde é o titulo do link, que pode ser o que você quiser.

4) Salve as alterações. Você verá algo parecido com imagem quando clicar no link de resposta:

id-do-blog2 E na área de comentário aparecerá algo como a imagem seguinte:

id-do-blog3

Considerações

Há vários templates na blogosfera por isso é bom ressaltar que existem outros locais nos quais o código pode ser inserido veja:

Abaixo de:

<dd class='comment-footer'>

ou

abaixo de:

<data:comment.author/>

Pronto seu blog agora possui um recurso muito útil de resposta a comentários

Visto em Vagabundia

Leia mais...

Computer mind explosion

Esse script permite a você bloquear seu blog dependendo IP que o visitante utilize. Com isto você poderá evitar que ele seja acessado por spans e outros, bastando apenas saber o endereço de IP. Mas lembre-se de que isto só será útil se o visitante desejado possua um IP fixo pois IP(s) randômicos mudam toda vez que o computador é desligado, um exemplo disto seria na internet ADSL. Vamos ver abaixo como utilizar no seu blog:

Analisando o script e configurando

O script que utilizaremos foi criado por mim baseado em PHP e Java Script, pois o Blogger aceita Java Script mais não aceita PHP, veja o script abaixo:

<script charset='utf8_decode' src='http://noticiaeblog.mynetcko.com/noticiaeblog/arquivos/php/ip.php?ip1=189.83.194.45&amp;ip2=125.256.26&amp;retorno=www.noticiaeblog.com' type='text/javascript'/>

O trecho em vermelho referisse ao primeiro IP que deseja bloquear, o trecho em roxo referisse ao segundo IP que deseja bloquear e em azul é a URL que o usuário bloqueado deverá ser redirecionado. Lembre que os endereços IP são compostos de números e pontos e que a URL não deve conter “http://”. Veja um exemplo:

1_ Vamos supor que eu queira bloquear os seguintes IP(s), 189.256.965.2 e 156.255.258.2 . E que a minha URL de retorno é www.google.com .

2_ Veja como ficaria no script:

<script charset='utf8_decode' src='http://noticiaeblog.mynetcko.com/noticiaeblog/arquivos/php/ip.php?ip1=189.256.965.2&amp;ip2=156.255.258.2&amp;retorno=www.google.com' type='text/javascript'/>

3_ O script suporta até dez IP(s), bastando apenas seguir em ordem o código de IP veja o exemplo:

<script charset='utf8_decode' src='http://noticiaeblog.mynetcko.com/noticiaeblog/arquivos/php/ip.php?ip1=189.83.194.45&amp;ip2=125.256.26&amp;ip3=189.155.155.2&amp;ip4=154.256.258.2&amp;retorno=www.noticiaeblog.com' type='text/javascript'/>

Inserindo no Blogger

1) Acesse o painel do Blogger(blogger.com)

2) Vá em “Layout/Design”-> “Editar HTML”

3) Procure pelo seguinte trecho utilizando as teclas "CTRL" e "F":

<head>

E abaixo dele insira o código já pronto.

4) Salve as alterações.

Inserindo em um HTML

É muito simples basta você substituir o caractere &amp; por &, e inserir abaixo de <head>

Leia mais...

 

font_api-128O Google lançou recentemente um serviço que oferece novas fontes de texto para o seu blog, são fontes bonitas e muito elegantes. Você pode usa-lás em qualquer site de forma gratuita, bastando apenas algumas alterações no HTML. Olhe abaixo um exemplo de fonte que você pode usar:

Teste de Fonte

Veja abaixo como fazer.

Escolhendo a Fonte

1) Acesse o site Google Web Fonts Directory

2) Escolha uma das fontes que o site oferece. E clique nela.

3) Na página seguinte você deverá clicar em Get the code

 Google-fonts

4) Copie o primeiro código que aparecer, será parecido com o seguinte:

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

Obs: Guarde o nome em vermelho para que possamos usar nos passos seguintes.

5) Acesse o painel do Blogger(blogger.com)

6) Vá em “Layout/Design”->“Editar HTML”-> Procure pelo seguinte código utilizando as teclas CTRL e F:

</head>

Agora antes do código acima insira o código obtido no passo 4

7) Salve as alterações.

8) Agora vá em “Postagem”-> “Nova Postagem”-> “Editar HTML” e insira o seguinte:

<span style="font-family: Cantarell; font-size: 24px;">Texto desejado</span>

O nome em vermelho é o que foi dito na observação do passo 4, e em verde é o tamanho do texto, em azul o texto que você quer que apareça com a fonte escolhida.

 

Pronto agora é só publicar a postagem e ver como ficou.

 

Compatível com os seguintes navegadores:

  1. Google Chrome: version 4.249.4+
  2. Mozilla Firefox: version: 3.5+
  3. Apple Safari: version 3.1+
  4. Microsoft Internet Explorer: version 6+

Referência: Bloggerstop

Leia mais...

blogger-edit-navbar02

Já mostrei aqui no blog vários truques para ocultar ou dar uma solução para a navbar do Blogger. A navbar hoje já tem mais recursos e é muito elegante mais mesmo assim não fica muito bonito em um blog profissional, por isso você verá hoje como criar um botão que permite oculta-lá e também exibi-lá. Veja abaixo como proceder:

Eliminando hacks anteriores relacionados a navbar

Procure partes de CSS relacionados a navbar, basta pesquisar em seu blog trechos como os abaixo e simplesmente elimina-lós:

#navbar-iframe {
visibility: hidden;
display: none;
}

ou

#navbar-iframe{
display:none !important;
}

ou

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Se encontrar outras parecidas com estas que foram mostradas elimine.

Aplicando o Hack

1) Acesse o painel do Blogger(blogger.com)

2) Vá em "Layout/Design"-> "Editar HTML" e procure pelo seguinte trecho utilizando as teclas "CTRL" e "F" para procurar:

</head>

Antes do código acima insira o seguinte:

<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>

3) Salve as alterações

4) Vá agora em “Layout/Design”-> “Elementos da página”-> “Adicionar um Gadget”-> “HTML/JavaScript” e insira o seguinte código:

<span style="cursor:pointer;" onclick="ShowHideNav();">
Ocultar/Exibir Navbar
<a style="visibility:hidden;" href="http://www.noticiaeblog.com"></a>
</span>

5) Salve e visualize.

 

Referência: Derya's WebResource.axd

Leia mais...