Como evitar erros e defeitos no template

Manter um blog com layout original nem sempre é tão fácil por alguns motivos bem óbvios como códigos hospedados fora do host onde seu blog esta hospedado e imagens também.

É raro acontecer, mas sempre existem serviços de hospedagem que podem dar pau, ficar fora do ar por dias ou mesmo desaparecer com tudo quanto esta hospedado nele. Se seu template tem itens hospedados neste servidor, poderá dizer adeus ao seu template e contemplar lugares vagos nele e até erros na estrutura por sumiço dos códigos e imagens.

Para solucionar este problema bolei uma solução que talvez alguém tenha já descoberto; mas ainda não tinha lido nada a respeito. É uma solução um tanto complexa, mas não é impossível de entender. Essa dica vai garantir que seu blog, fique normal pelo menos enquanto durar a plataforma onde seu blog estiver hospedado.

Claro que essas dicas só servem para blogueiros que possuem blogs em plataformas gratuitas. Quem paga hospedagem não precisa se preocupar com esses problemas e pode armazenar suas imagens e códigos no serviço que paga.

Re-hospedando imagens e códigos

É um trabalho meio complicado, mas seguindo atentamente os passos com certeza conseguirá fazer tudo tranquilamente. Antes de mais nada eu recomendo que faça um backup do seu template para não ter riscos de problemas surgirem por possíveis erros seus.

Siga os seguintes passos para primeiramente preservar as imagens contidas em seu template:

1. Acesse e faça login na plataforma onde seu blog foi criado;
2. Entre no modo de edição HTML;
3. Acione a ferramenta de busca por códigos. No Blogger, basta clicar em CTRL+F dentro do HTML;
4. Busque pelas palavras "image:url";
5. Selecione as URLs após essas tags e abra em outra guia do navegador para ver que imagem é;
6. Salve-a em seu computador;
7. Abra outra aba na sua conta onde esta seu blog e abra a ferramenta de criação de artigos;
8. Faça upload da imagem no artigo e no modo HTML, localize a URL dada a imagem;
9. Copie essa URL (geralmente localizada após a tag "img src:");
10. Cole no lugar da URL antiga na outra aba aberta;
11. Vá salvando as alterações e visualizando para ver se esta tudo nos conformes;
12. Se tudo estiver correto, proceda com os mesmos passos para outras imagens e no final salve as alterações no template e feche a segunda aba usada para subir as imagens no servidor de seu blog.

Para que entenda melhor esse esquema que bolei; você simplesmente tira suas imagens de um servidor que pode ou não ser de risco e as coloca no servidor onde se encontra seu blog. Fazendo isso, suas imagens e códigos só desaparecerão quando seu blog desaparecer ou a plataforma fechar mesmo. 

Os códigos são um pouco mais complicados, mas poderá pegar a fonte dos mesmos, salvar em um arquivo com a extensão própria e salvá-los em um host próprio. Nesse caso não tem como salvar em plataformas como Blogger, Tumblr e Wordpress (Grátis). 

Você precisa de um serviço de armazenamento de confiança que tenha certeza de que não vai bugar sempre e nem sair fora do ar. Hospedado seus scripts, Jquery e outros, ocorrerão menos possibilidades de dar pau no seu template e surgirem áreas defeituosas.

Carregamento mais rápido!

Surpresa! De quebra você ganha um blog bem mais otimizado e seus leitores vão perceber a diferença no ato! Já que suas imagens já não estarão  hospedadas em servidores distantes e dispersas; serão carregadas todas a partir do serviço onde as hospedou.

Sendo assim, seu blog vai carregar muito mais rápido e isso é muito vantajoso para blogueiros e leitores. Boa dica não é mesmo? ;-)

Espero que tenha gostado da dica e conto com sua participação neste artigo para complemento, correção e o que mais quiser. Fique de olho nas novidades porque tem mais pela frente.

Sobre o Autor:

Ricardo F.S é administrador da empresa Ricardo Arts em Valparaíso e dos blogs Blog Ricardo Arts,Dinheiro sem Limite e Processo Blogs na internet. Possui curso completo de informática e internet e possui anos de conhecimento com blogs. Atualmente trabalha como letrista, desenhista e pintor; prestando serviços também na web com design. Para saber mais clique aqui.

Leia Mais

Como inserir e organizar anúncios em artigos

Mais um artigo em resposta as duvidas de nossos leitores! Dessa vez ensinaremos como inserir anúncios em seu blog e organizá-los nos artigos conforme queira. Poderá alinhá-los à direita ou esquerda e ainda ganhar dinheiro que é o objetivo de se colocar estes anúncios nos artigos.

Já publiquei um artigo parecido no blog Ricardo Arts e estarei publicando aqui também. Muitos blogueiros ao iniciarem sua carreira acabam chegando a este ponto crucial e não conseguem controlar o local onde os anúncios deverão aparecer.

Se você é um desses blogueiros, chega de dor de cabeça e aprendamos como controlar esses anúncios rebeldes! Sem mais, mãos a obra!

Código de Inserção de Banners

Para alinhar seus anúncios é necessário antes de mais nada, ter uma conta em qualquer plataforma de anúncios, afiliados ou outra qualquer que possua banners como ferramentas de divulgação. Alguns exemplos dessas plataformas é o Google AdSense, Boo-Box, Lomadee e outras que poderá encontrar no Dinheiro sem Limite. Ou mesmo clicando aqui.

Depois de ter uma conta com acesso a códigos com anúncios, você terá que ter sempre a mão o seguinte código HTML:

<b:if cond='data:blog.pageType == "item"'>
<p style="display: inline; float: right; margin-right: 0px">
<a href="http://hotmart.net.br/show.html?a=F1895682R" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLfUFkFva51gYP5U19vvOSFqlvP4uwcjL5WtuOdWp0E0KfplpDBt_o9POOGWnxJ8tcUVekW96xVevCOrxXOuURPIv5Fr1qmQGWzlZvwPOgeE-B1iE8r7tnogs1boaKmdPAWrAOKZhttBHD/s1600/original-afiliados.jpg" /></a></div>
</p>
</b:if>

Em vermelho esta o código do anúncio do afiliado ou banner de publicidade. Em negrito, é onde você controla a posição dos anúncios dentro dos artigos. Usando "right" você coloca o banner do lado direito do artigo e "left", do lado esquerdo.

Mas nunca se esqueça de inserir este código no modo de edição HTML nas postagens. E procure sempre colocar os anúncios em posições adequadas que não tire a atenção dos leitores de ler seus artigos.

Não se preocupe se ao voltar para o modo de edição de texto comum, o banner não aparecer. Basta apenas visualizar o artigo para ver como vai ficar e ele aparecerá lá. Mas no modo HTML, aparecerá apenas um espaço em branco.

Uma dica minha é que crie arquivos em bloco de notas e salve já prontos. Assim, quando precisar usá-los, estarão no jeito e não precisará repetir todo processo sempre.

Eu recomendaria no máximo três banners por artigo, sendo dois ao final e um no topo, no meio a esquerda ou a direita. Daí fica a seu critério... Vou ficando por aqui, mas fique de olho nas novidades! Assine as atualizações; compartilhe e participe dando sua opinião ou complementando este artigo.

Sobre o Autor:

Ricardo F.S é administrador da empresa Ricardo Arts em Valparaíso e dos blogs Blog Ricardo Arts,Dinheiro sem Limite e Processo Blogs na internet. Possui curso completo de informática e internet e possui anos de conhecimento com blogs. Atualmente trabalha como letrista, desenhista e pintor; prestando serviços também na web com design. Para saber mais clique aqui.

Leia Mais

Como restaurar um template com problemas?

Lidar com HTML e edição de um blog não é tarefa fácil, mas sim para web designers e programadores. Com a chegada das tecnologias HTML5 e CSS3 a coisa fica ainda mais complicada. Mas não dá pra negar que muitos blogueiros bem motivados sempre acabam "fuçando" daqui e dali e aprendendo alguma coisa só para fazerem eles mesmos os ajustes, manutenção e edição em seus blogs.

Claro que isso livra de muitos gastos com profissionais dessa área; mas admitamos que não chega nem aos pés do resultado que os caras produzem; mas a questão não é essa e sim as consequências desse aprendizado por conta própria e os riscos que existem em colocar a mão na massa e fazer tudo sozinho.

Estou falando de pequenos conflitos, defeitos na estrutura do blog e até perca total do template por uma manobra aparentemente irreversível. Isso já aconteceu comigo no princípio da minha carreira e me deu muita dor de cabeça até admitir que meu template estava realmente perdido.

Se você já passou por isso, sabe muito bem como dói causar danos irreversíveis em seu blog e mesmo gostando tanto do template, ter que excluí-lo porque alco deu errado. Mas hoje ensinarei como contornar essa situação trágica e salvar seu blog, mesmo quando tudo parece perdido.

Restaurando o Template de seu Blog

Eu me baseei no Blogger para realizar esta façanha, mas funciona com Wordpress, Tumblr e outras plataformas que permitam edição do blog no modo HTML.

Nesse caso você terá que ter sempre à disposição uma cópia do template em uso no momento. Pois sem ele seu projeto realmente estará perdido e não há muito que se possa fazer.

Existe um recurso no Blogger onde você pode reverter alterações apenas clicando no botão "Reverter Alterações". Mas infelizmente existem casos onde já salvou as alterações que não é possível; daí entra o esquema que bolei para salvar seu dia e seu blog.

Basta apenas abrir seu blog no modo de edição de HTML e o template salvo no computador com o bloco WordPad do Windows (Para quem usa Windows). Recomendo esse software porque o mesmo abre os códigos mais organizadamente e permite detectar melhor as tags e tudo mais. Sem contar que tem um localizador rápido de tags e códigos que ajuda demais nessas horas.

Se você excluiu, colocou algo a mais que deu errado ou duplicou algum código que causou conflito, erro ao salvar as mudanças ou mesmo deixou seu blog uma merda; basta apenas detectar onde ocorreu o problema e usando o código do template, substituir o código do blog paulado.

Mas se não souber nem mesmo onde foi que você detonou tudo, recomendo que perca todas as suas alterações até ali e recoloque o template novamente como baixou, pois sem saber onde fez as alterações fica complicado de consertar.

Entendeu não? O esquema é simplesmente pegar a parte do código boa no template original guardado e colar onde apagou, errou ou substituiu códigos no que esta em seu blog. No caso de duplicação, basta apenas identificar o código duplicado e deletar um deles. Já passei por um caso desses e tive uma baita dor de cabeça...

Feita as alterações, salve e confira se esta tudo normal novamente. Dá um trabalho sim, mas é melhor que excluir todo seu trabalho e recomeçar do zero. Eu não sei você, mas eu desanimo profundamente ter que recomeçar um projeto do nada novamente.

Gostaria de saber se já passou por alguma situação do tipo e se gostou dessa dica. Ajude outros blogueiros compartilhando esse artigo. O mundo só vai melhorar com esses gestos. Obrigado e acompanhe nossas atualizações e até a próxima!

Sobre o Autor:

Ricardo F.S é administrador da empresa Ricardo Arts em Valparaíso e dos blogs Blog Ricardo Arts,Dinheiro sem Limite e Processo Blogs na internet. Possui curso completo de informática e internet e possui anos de conhecimento com blogs. Atualmente trabalha como letrista, desenhista e pintor; prestando serviços também na web com design. Para saber mais clique aqui.

Leia Mais

Código iframe - Resolvendo conflito no Blogger

As vezes acontece de usarmos algum recurso em nosso blog que é baseado no código iframe e notamos um conflito onde o código foi aplicado e o recurso não aparece devidamente como precisamos como no caso de banners publicitários de certas plataformas; códigos de incorporação de vídeos e outras coisas mais.

Antes de descobrir a solução para o problemas os blogueiros menos experientes, fervem os neurônios e se desesperam em busca da solução pela web. Acham que o Blogger não esta aceitando e tantos outros pensamentos como "Fiz caca!". 

Mas fique de boa porque o problema não esta no Blogger, no código ou em coisa errada que fez. Na verdade isso acontece porque o código não se deu com o template atual que deve estar usando e por isso acontece o conflito.

Na verdade o problema é tão fácil de se resolver que com um simples código já será possível resolver toda essa dor de cabeça. Vamos lá então?

Código Auxiliar

O código que vou passar agora para resolver seu problema, encontrei no blog Ganhar Dinheiro na Internet. O código base que irei passar funcionará de adaptação para acabar com esse conflito; mas você terá que fazer adaptações conforme suas necessidades. 

O código serve para ser usado em tudo quanto possua uma URL e tags controladoras de medida de altura e largura. O código para colocar em seu blog no Blogger é o seguinte:

<iframe name=”palco” src=”xxxxxxxxxxxx” frameborder=”0″ height=”300” scrolling=”auto” width=”550“>&amp;amp;lt;br&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;</iframe>

Nos trechos em vermelho, serão atualizadas as informações do que deseja colocar em seu artigo ou na estrutura do blog. Estas informações são referentes no caso, a URL da imagem e os parâmetros que controlam o tamanho da mesma. E o mesmo funciona para vídeos de qualquer site.

Depois de aplicar o código em modo de edição HTML, o problema estará resolvido. Agora, se o problema persistir, com certeza não era com o template o seu problema. Mas acredito que esse código poderá resolver...

Funcionou? Gostou da solução para o seu problema? Por favor, comente, divulgue para outras pessoas nas redes sociais e acompanhe nossos artigos, porque mais novidades sempre estarão chegando!

Sobre o Autor:

Ricardo F.S é administrador da empresa Ricardo Arts em Valparaíso e dos blogs Blog Ricardo Arts,Dinheiro sem Limite e Processo Blogs na internet. Possui curso completo de informática e internet e possui anos de conhecimento com blogs. Atualmente trabalha como letrista, desenhista e pintor; prestando serviços também na web com design. Para saber mais clique aqui.

Leia Mais

Como enfeitar seu blog para o ano novo

Depois de passado o Natal, sempre vem o ano novo e muitos blogueiros gostam de decorar seu blog em ambas as passagens do ano e mostrar que esta comemorando também. Em um artigo anterior, ensinei como decorar seu blog com 16 códigos focados só em enfeites e efeitos de Natal:

• 16 Códigos para enfeitar seu blog no Natal

Se quer enfeitar seu blog também com clima de festa de passagem de ano novo, vou passar apenas uma super dica que consiste em um código que deixará seu blog com efeito de fogos de artifício coloridos como os que são soltados nessa ocasião.

Claro que é um efeito bem simples, mas já dá para decorar seu blog e mostrar que ele esta em clima de ano novo. Colocar o código é super simples e não tem como errar.

Fogos de artifício em seu blog

O código é bem extenso e se fizer tudo corretamente não haverá problemas. Siga os seguintes passos para inserir esse efeito em seu blog:

1. Acesse seu blog e faça login;
2. Faça um backup do template antes de prosseguir;
3. Acesse a área de edição de HTML dele;
4. Procure pela tag </head> e antes dela cole o seguinte código:

<script type='text/javascript'>
//<![CDATA[
// Fuegos artificiales
var bits=200; // Número de pontos
var intensity=10; // Intensidade da explosao (recomendado entre 3 e 10)
var speed=30; // Velocidade (qnto menor for o numero, mais rapido)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");
// Cores dos fogos
var dx, xpos, ypos, bangheight;
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var decay=new Array();
var colour=0;
var swide=800;
var shigh=600;
function write_fire() {
var b, s;
b=document.createElement("div");
s=b.style;
s.position="absolute";
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
set_width();
b.appendChild(div("lg", 3, 4));
b.appendChild(div("tg", 2, 3));
for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));
}
function div(id, w, h) {
var d=document.createElement("div");
d.style.position="absolute";
d.style.overflow="hidden";
d.style.width=w+"px";
d.style.height=h+"px";
d.setAttribute("id", id);
return (d);
}
function bang() {
var i, X, Y, Z, A=0;
for (i=0; i<bits; i++) {
X=Math.round(Xpos[i]);
Y=Math.round(Ypos[i]);
Z=document.getElementById("bg"+i).style;
if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {
Z.left=X+"px";
Z.top=Y+"px";
}
if ((decay[i]-=1)>14) {
Z.width="3px";
Z.height="3px";
}
else if (decay[i]>7) {
Z.width="2px";
Z.height="2px";
}
else if (decay[i]>3) {
Z.width="1px";
Z.height="1px";
}
else if (++A) Z.visibility="hidden";
Xpos[i]+=dX[i];
Ypos[i]+=(dY[i]+=1.25/intensity);
}
if (A!=bits) setTimeout("bang()", speed);
}

function stepthrough() {
var i, Z;
var oldx=xpos;
var oldy=ypos;
xpos+=dx;
ypos-=4;
if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {
for (i=0; i<bits; i++) {
Xpos[i]=xpos;
Ypos[i]=ypos;
dY[i]=(Math.random()-0.5)*intensity;
dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;
decay[i]=Math.floor((Math.random()*16)+16);
Z=document.getElementById("bg"+i).style;
Z.backgroundColor=colours[colour];
Z.visibility="visible";
}
bang();
launch();
}
document.getElementById("lg").style.left=xpos+"px";
document.getElementById("lg").style.top=ypos+"px";
document.getElementById("tg").style.left=oldx+"px";
document.getElementById("tg").style.top=oldy+"px";
}
function launch() {
colour=Math.floor(Math.random()*colours.length);
xpos=Math.round((0.5+Math.random())*swide*0.5);
ypos=shigh-5;
dx=(Math.random()-0.5)*4;
bangheight=Math.round((0.5+Math.random())*shigh*0.4);
document.getElementById("lg").style.backgroundColor=colours[colour];
document.getElementById("tg").style.backgroundColor=colours[colour];
}
window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
window.onload=function() { if (document.getElementById) {
set_width();
write_fire();
launch();
setInterval('stepthrough()', speed);
}}
//]]>
</script>

4. Salve as alterações e pronto!

Você já irá ver fogos de artifício subindo do rodapé do blog e estourando em sua tela. Feliz ano novo e fique de olho nas atualizações por aqui assinando por email ou feed. E aí, te ajudou em alguma coisa esse artigo? Ajude outras pessoas também compartilhando nas redes sociais!

Sobre o Autor:

Ricardo F.S é administrador da empresa Ricardo Arts em Valparaíso e dos blogs Blog Ricardo Arts,Dinheiro sem Limite e Processo Blogs na internet. Possui curso completo de informática e internet e possui anos de conhecimento com blogs. Atualmente trabalha como letrista, desenhista e pintor; prestando serviços também na web com design. Para saber mais clique aqui.

Leia Mais

16 Códigos para enfeitar seu blog no Natal

Para quem faz questão e queira entrar no ritmo de Natal, resolvi escrever este artigo para ensinar como decorar seu blog para ficar com clima de festa natalina.

Não é tão complicado e ele vai ficar bem mais comemorativo todos os anos e depois você poderá voltar tudo ao normal novamente.

Eu realizei uma breve pesquisa sobre o assunto e pude encontrar alguns bons códigos reunidos no blog Dany's Place e garanto que você vai gostar das ideias e de como vai ficar o seu blog para cada Natal.

Estarei dando algumas dicas pessoais também simples que poderão deixar seu blog ainda mais enfeitado e natalino.

Códigos Natalinos

A seguir você pode conferir alguns códigos que deixarão seu blog enfeitado para o Natal sendo adicionados apenas a um gadget HTML/JavaScript. 

Antes de mais nada, vou ensinar como inserir esses códigos em seu blog para ficar muito complicado para quem ainda não entende dessas coisas.

1. Acesse sua plataforma de blog e  faça login;
2. Acesse o "Layout" do blog a ser aplicado;
3. Adicione um novo gadget HTML;
4. Cole o código que escolheu e posicione onde quiser;
5. Salve as alterações e pronto!

Agora que sabe como inserir os códigos em seu blog; escolha seu código:

1- Enfeites de Natal caindo no blog:

<script src="http://www.blog-switch.com/widgets/83671/6713259982.js" type="text/javascript" charset="UTF-8"> </script>

2 - Neve caindo no Blog:

<script src="http://static.tumblr.com/8l2gpxb/lcllulgcn/snowstorm.js"> </script>

3 - Arvore de Natal caindo no blog:

<script src="http://www.blog-switch.com/widgets/83740/7960803804.js" type="text/javascript" charset="UTF-8"> </script>

4 - Explosão de enfeites natalinos no Blog:

<script type="text/javascript" src="http://blogparts.giffy.me/0001/parts.js"> </script>

5 - Explosão de flocos de neve no blog:

<script type="text/javascript" language="javascript" charset="euc-jp" src="http://www.hapinemu.net/fobp/bp037/bp037.js"> </script>

6 - Estrelinhas no cursor do Mouse:

<script type="text/javascript" src="http://blogparts.giffy.me/0034/parts.js"> </script>

7 - Estrelinhas douradas no cursor do Mouse:

<script src="http://www.cursor-switch.com/widgets/12280/4969916206.js" type="text/javascript" charset="UTF-8"> </script>

8 - Enfeites natalinos no cursor do Mouse:

<script src="http://www.cursor-switch.com/widgets/50/4820917601.js" type="text/javascript" charset="UTF-8"> </script>

9 - Arvore de Natal no cursor do Mouse:

<script src="http://www.cursor-switch.com/widgets/12686/8028560410.js" type="text/javascript" charset="UTF-8"></script>

10 - Papai Noel voando de balão no blog:

<script type="text/javascript" src="http://blogparts.giffy.me/0003/parts.js"> </script>

11 - Papai Noel Passando de Trenó no blog:

<script type="text/javascript" src="http://blogparts.giffy.me/0017/parts.js"> </script>

12 - Contagem regressiva para o Natal:

<script type="text/javascript" language="javascript" charset="euc-jp" src="http://www.hapinemu.net/fobp/bp034/bp034.js"></script>

13 - Guirlanda decorativa:

<script type="text/javascript" language="javascript" charset="euc-jp" src="http://www.hapinemu.net/fobp/bp017/bp017.js"></script>

14 - Relógio Natalino:

script type="text/javascript" language="javascript" charset="euc-jp" src="http://www.hapinemu.net/fobp/bp016/bp016.js"></script>

15 - Relógio Boneco de Neve animado:

<script type="text/javascript" language="javascript" charset="euc-jp" src="http://www.hapinemu.net/fobp/bp022/bp022.js"></script>

16 - Reloginho Boneco de Neve

<script type="text/javascript" src="http://blogparts.giffy.me/0032/parts.js"></script>

Agora não tem pretexto de não decorar seu blog em cada Natal. Só se não curtir mesmo fazer isso. 

Feliz Natal para quem sabe o verdadeiro sentido de comemorá-lo e não deixe de compartilhar se esse artigo te serviu e assine as atualizações. 

Sobre o Autor:

Ricardo F.S é administrador da empresa Ricardo Arts em Valparaíso e dos blogs Blog Ricardo Arts,Dinheiro sem Limite e Processo Blogs na internet. Possui curso completo de informática e internet e possui anos de conhecimento com blogs. Atualmente trabalha como letrista, desenhista e pintor; prestando serviços também na web com design. Para saber mais clique aqui.

Leia Mais

Mensagem pop up discreta de curtir no Facebook para blog

De cara já quero enfatizar que esse recurso é apenas para blogs da plataforma Blogger e se acaso o pessoal resolver adaptar o mesmo para outras plataformas, comunicarei na medida do possível sobre as novidades.

Esse código é bem interessante e poderá aumentar sua audiência no Facebook; uma das redes sociais mais usadas no mundo todo. Isso significa que quanto mais for divulgado seu blog nesse lugar, mais acessos terá e muito mais pessoas poderão acompanhar seu blog e você também se beneficiará muito com isso.

Já esclareço que o código não foi criado por mim, e só estou repassando de um site americano bem interessante que descobri.

Colocando mensagem pop up no seu blog

Calma que não são aquelas janelas chatas pop up que você já viu por aí e chegam a incomodar. Essa é bem discreta e os leitores só a verão no rodapé de seu blog, onde não terão problemas em ver o conteúdo de seu blog ou interagir com o mesmo. Vamos ver como funciona?

Os passos são bem simples: Acesse o Blogger > Faça login > Vá em Layout > Adicionar Gadget > Gadget para HTML e insira o seguinte código nele:

<script type="text/javascript" src="http://makingdifferent.github.io/blogger-widgets/cb.js"></script><script type="text/javascript">function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}; r(function(){new ConversionsBox("Coloque sua mensagem aqui"),"http://www.facebook.com/makingdifferent");});</script>

Note os textos no código em azul e vermelho. No azul você coloca a frase que bem entender e no vermelho o link de sua fan page no Facebook que receberá os "likes". Mas tome muito cuidado para não modificar os códigos ou acarretará em erro no código geral.

Se você fez tudo corretamente como tem que ser, basta apenas salvar e verá sua mensagem discreta assim:

Quer aprender a colocar mais ferramentas legais como esta em seu blog e deixá-lo ainda mais equipado? Então não deixe acompanhar as publicações mais novas e nem perca esse blog de vista! Até o próximo artigo!

Sobre o Autor:

Ricardo F.S é administrador da empresa Ricardo Arts em Valparaíso e dos blogs Blog Ricardo Arts,Dinheiro sem Limite e Processo Blogs na internet. Possui curso completo de informática e internet e possui anos de conhecimento com blogs. Atualmente trabalha como letrista, desenhista e pintor; prestando serviços também na web com design. Para saber mais clique aqui.

Leia Mais

Soongz - Player de áudio estiloso para blog

O Soongz é um player de áudio invocado que descobri na web e achei bem estiloso sua interface e resolvi fazer um artigo sobre ele para alguns blogueiros que gostam ou precisam.

Não sou muito fã de ficar publicando sobre widgets aqui no blog, mas vou promover uma série de publicações com recursos legais que alguns blogueiros queiram usar ou mesmo necessitem. Até porque existem blogueiros na área de música que realmente até precisam de um player em seus blogs.

Mas todos os recursos que estarei publicando aqui no Processo Blogs estarão acompanhados de advertências contras os exageros e excessos, pois essas coisas podem afetar em muito no carregamento de seu blog.  E não é isso que quero, pois afetará com certeza nas suas visitas.

Sobre o Soongz

Se você é apaixonado por músicas e quer explorar possibilidades em seu espaço na internet, que tal personalizá-lo? O Soongz permite que você crie players para usar em seu site, blog, Tumblr e outros, de forma simples e gratuita.

Com isso, você pode proporcionar uma experiência diferenciada para aqueles que visitarem seu website. Você cria o player a sua maneira e deixa os visitantes à vontade para pausarem, escolherem músicas e muito mais. Vamos começar?

Criando e inserindo seu player

Agora você vai aprender a criar seu player de áudio e incorporá-lo em seu blog. Nesse caso ensinarei como usar o mesmo em qualquer plataforma porque as noções são as mesmas para outros lugares que queira usar. Acompanhe:

1. Clique aqui para acessar o site;
2. Clique em "Criar Player";
3. Escolha a versão para cabeçalho e rodapé ou para barra lateral;
4. Encontre álbuns no próprio Soongz ou crie listas com músicas separadas do Soongz;
5. Escolha se seu player vai ficar no cabeçalho ou no rodapé de seu blog;
6. Se deseja que seu player inicie tocando, marque a próxima opção;
7. Ative ou não o modo aleatório para tocar músicas variando;
8. Visualize seu player no botão "Vizualizar";
9. Agora personalize as cores de seu player clicando nas mesmas;
10. Clique em "Criar meu player";
11. Copie todo o código e no editor de HTML do blog, cole entre as tags <body> e </body>
12. Se quiser editar mais detalhes em seu widget no HTML, clique no botão "Editar Widget";
13. Após todo o processo, basta salvar as alterações e salvar e seu player aparecerá pronto para tocar!

Mas preste atenção em algumas recomendações e dicas: Eu não recomendo que configure seu player para iniciar tocando pois isso irrita demais (ao menos eu). Sem contar que dependendo da internet do visitante pesa pacas.

Para aplicação em outras plataformas, basta apenas acessar o recurso de edição de HTML e colar também entre as tag indicadas e ele funcionará do mesmo modo. Mas para ver detalhes de como adicionar o mesmo no Tumblr, assista ao vídeo abaixo:

• Como colocar músicas no Tumbrl (Vídeo)

Continue acompanhando o Processo Blogs porque muita novidade vai rolar por aqui ainda...

Sobre o Autor:

Ricardo F.S é administrador da empresa Ricardo Arts em Valparaíso e dos blogs Blog Ricardo Arts,Dinheiro sem Limite e Processo Blogs na internet. Possui curso completo de informática e internet e possui anos de conhecimento com blogs. Atualmente trabalha como letrista, desenhista e pintor; prestando serviços também na web com design. Para saber mais clique aqui.

Leia Mais

Colocar tradutor com bandeiras no Blogger e Wordpress

A internet conecta milhões de usuários pelo mundo que diariamente acessam milhares de páginas de sites, lojas, redes sociais e blogs. E é aí que entra a visão do blogueiro em aproveitar todo esse fluxo voltado para visitar blogs e deixar o seu bem convidativo para nossos amigos e leitores do exterior, não importando o país.

Existem muitos tipos de tradutores e com diversos idiomas. Existem tradutores prontos e outros que podem ser editados; tradutores com ou sem imagem.

Neste artigos trago um tradutor com bandeiras que vi no blog Montar um Blog. Aprenda hoje como usar esse tradutor tanto no Blogger quanto no Wordpress.

Só para você ter uma ideia de como vai ficar, confira na imagem abaixo:

Tradutor com Bandeiras

Código do tradutor

Abaixo você confere o código HTML do tradutor:

<<span class="adtext" id="adtext_3">div style</span>="width: 350px;"><a target="_blank" rel="nofollow" onclick="window.open(‘http://www.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=pt%7Czh-CN&hl=pt&ie=UTF8′); return false;"><img style="border: 0px; cursor: pointer;" alt="Traduzir para Chinês"src="http://i53.tinypic.com/4ftiyp.jpg"></a><a target="_blank" rel="nofollow" onclick="window.open(‘http://www.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=pt%7Ces&hl=pt&ie=UTF8′); return false;"><img style="border: 0px; cursor: pointer;" alt="Traduzir para Espanhol" src="http://i56.tinypic.com/1zlazjk.jpg"></a><a target="_blank" rel="nofollow" onclick="window.open(‘http://www.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=pt%7Cit&hl=pt&ie=UTF8′); return false;"><img style="border: 0px; cursor: pointer;" alt="Traduzir para Italiano" src="http://i44.tinypic.com/xtyrd.jpg"></a><a target="_blank" rel="nofollow" onclick="window.open(‘http://www.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=pt%7Cfr&hl=pt&ie=UTF8′); return false;"><img style="border: 0px; cursor: pointer;" alt="Traduzir para Françês" src="http://i55.tinypic.com/s2yvsk.jpg"></a><a target="_blank" rel="nofollow" onclick="window.open(‘http://www.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=pt%7Cen&hl=pt&ie=UTF8′); return false;"><img style="border: 0px; cursor: pointer;" alt="Traduzir para Inglês" src="http://i53.tinypic.com/2u40x37.jpg"></a><a target="_blank" rel="nofollow" onclick="window.open(‘http://www.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=pt%7Cde&hl=pt&ie=UTF8′); return false;"><img style="border: 0px; cursor: pointer;" alt="Traduzir para Alemão" src="http://i51.tinypic.com/34sf5ub.jpg"></a><a target="_blank" rel="nofollow" onclick="window.open(‘http://www.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=pt%7Cja&hl=pt&ie=UTF8′); return false;"><img style="border: 0px; cursor: pointer;" alt="Traduzir para Japonês" src="http://i54.tinypic.com/25gcxmr.jpg"></a><a target="_blank" rel="nofollow" onclick="window.open(‘http://www.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=pt%7Cru&hl=pt&ie=UTF8′); return false;"><img style="border: 0px; cursor: pointer;" alt="Traduzir para Russo" src="http://i55.tinypic.com/zlqgqg.jpg"></a><br/><div align=”center”><span style="font-size: x-small;"><a  href="http://www.montarumblog.com/tradutor-para-blog-com-bandeiras/" target=”_blank”>Obter um tradutor</a></span></div></div>

Deixando bem claro que esse arquivo esta hospedado no blog Montar um Blog e se alguma coisa acontecer por lá, esse código deixará de funcionar. Mas basta avisar por email ou nos comentários. Vamos à instalação do código:

• Blogger

Para instalar no Blogger é bem fácil e com simples passos já terá o mesmo funcionando em seu  blog:

1. Acesse o Blogger > Faça Login
2. Acesse "Layout" no blog a ser aplicado;
3. Clique em "Adicionar Widget" > Escolha o de HTML;
4. Cole o código neste artigo > Organize o gadget;
5. Salve a organização > Pronto!

• Wordpress

Molezinha não é mesmo? Agora vamos aos passos para aplicar o código no Wordpress:

1. Acesse o Wordpress > Faça login
2. Acesse o painel de controle do blog a ser aplicado;
3. Adicione também um novo widget de texto;
4. Cole o código no widget > Organize o widget;
5. Salve as alterações > Pronto!

Agora seu blog esta maquinado com um tradutor com bandeiras de diversos países. Toda vez que alguém acessar seu blog de outro país já poderá lê-lo com menos dificuldade. Veja também nosso artigo sobre outra opção de tradutor:

• Com inserir um tradutor em seu blog

Sobre o Autor:

Ricardo F.S é administrador da empresa Ricardo Arts em Valparaíso e dos blogs Blog Ricardo Arts,Dinheiro sem Limite e Processo Blogs na internet. Possui curso completo de informática e internet e possui anos de conhecimento com blogs. Atualmente trabalha como letrista, desenhista e pintor; prestando serviços também na web com design. Para saber mais clique aqui.

Leia Mais

Nova fan box de seguidores do Twitter para blogs

Nova versão da fan box do Twitter que substituirá a primeira que desapareceu de muitos blogs, deixando muitos blogueiros de cabeça quente com isso. O gadget usado anteriormente, cujo o código estava hospedado na moopz.com, sumiu do mapa por causa de alguma manobra direta no Twitter que fez com que o mesmo não funcionasse mais.

• Fan Box de seguidores do Twitter sumiu do blog

Pesquisamos alguma solução num curto espaço de tempo, mas não encontramos nem muitas respostas e nem algo que substituísse a caixa de fans.

Mas no mesmo artigo citado acima, um de nossos leitores por nome de Matias, bondosamente se manifestou em um dos comentários e nos indicou uma solução para o problema  que ele mesmo desenvolveu. Ensinaremos como colocar a fan box de seguidores do Twitter novamente em seu blog.

Nova Fan Box do Twitter para Blogs

São procedimentos simples e você vai acompanhar passo a passo como fazer isso aqui no Processo Blogs. Nesta artigo eu decidi facilitar ainda mais para nossos leitores criarem suas fans box sem ter muito trabalho acessando o site e ter que configurar no site.

Passaremos o código criado pelo Mateus e indicaremos onde deverá ser mudado para que se encaixe em suas necessidades. Confira como funcionam as configurações:

<div id="twitter-box"></div>
<script>
var tw_user = 'RicardoArtts';
var tw_width = 250;
var tw_height = 250;
var no_face = 9;
(function() {
var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;
tw_box.src = '//www.musicpaax.com/twitter/tw.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
})();
</script>

Altere apenas as informações em vermelho para seu nome de usuário do Twitter, as dimensões que deverá ter sua fan box e o número dos rostos que quer mostrar na caixa. Então copie o código e cole em um gadget HTML e insira em seu blog.

Caso precise de escolher entre uma fan box de fundo claro ou escuro conforme a necessidade exija; recomendo que visite a página de criação e faça todas essas configurações, mais a escolha do fundo desejado. Para visitar a página acesse o link abaixo e verá algo como o mostrado na imagem a seguir.

• Fan Box Twitter - Music Paax

Página criada pelo Mateus com as ferramentas necessárias para a criação da nova fan box do Twitter

Afinal, o Twitter, admitamos ou não é um dos canais de divulgação de nossos artigos e dos blogs também. Agora posso refazer minha amizade com o Twitter novamente... E você querido leitor que tem conta no Twitter, é viciado e esta sempre por lá, por favor não deixe de nos seguir por lá também! Agora dá...

Valeu Mateus! Um forte abraço e não deixem de conferir sempre as novidades por aqui no Processo Blogs!

Sobre o Autor:

Ricardo F.S é administrador da empresa Ricardo Arts em Valparaíso e dos blogs Blog Ricardo Arts,Dinheiro sem Limite e Processo Blogs na internet. Possui curso completo de informática e internet e possui anos de conhecimento com blogs. Atualmente trabalha como letrista, desenhista e pintor; prestando serviços também na web com design. Para saber mais clique aqui.

Leia Mais

Artigos relacionados e Textos âncora - Ganhar leitores

E aqui estamos nós mais uma vez com nossa série sobre estratégias para ganhar leitores para seu blog.  É comum todo blogueiro novo nessa área se desesperar em vez blogs por aí cheios de leitores, fãs, assinantes de feed e o seu marcando zero. Eu mesmo já passei por isso...

Isso é porque ainda não dominou boas práticas dentro de seu blog para começar a ganhar leitores fiéis de seu conteúdo. Por isso achei por bem escrever essa série de artigos para auxiliar quem esteja passando por essa fase difícil com seu blog.

No artigo anterior a esse eu falei sobre o conteúdo de qualidade e o quanto isso é importante para que seus leitores se prendam ao que você escreve e sempre venham ler seus artigos. Agora vou falar dos artigos relacionados e dos textos âncora e sua eficiência nos artigos.

Artigos Relacionados

Os artigos relacionados são aqueles artigos que de alguma forma possuem relação com o artigo em questão. Essa estratégia é muito boa e aplicada em seu blog por meio de serviços específicos, podem gerar maior tempo do leitor em seu blog, prendendo sua atenção.

Isso funciona porque o leitor poderá ler seu artigo e simplesmente ver outro interessante do mesmo assunto, ou não ter encontrado informações suficientes como procurou. É aí que os artigos relacionados devem estar ali  abaixo com ou sem imagens; mas com imagens é mais eficaz ainda.

Eu não vou entrar em detalhes de como instalar estes códigos em seu blog porque deixaria o artigo muito extenso, mas ao menos passarei alguns dos bons que pode implantar em seu blog. São eles:

1. Nrlate
2. LinkWithin
3. 2leep

Estes são boas opções para ajudar neste sentido e os códigos são fáceis dese instalar, bastando apenas criar uma conta rapidamente e instalar em seu blog.

Textos Âncora

Os textos âncora são mais usados dentro do próprio artigo e servem para auxiliar o leitor a chegar em pontos dentro de artigos longos que são precisos usar divisões com tópicos e sub-tópicos.

Assim, quando ele precisa chegar a um ponto do artigo citado na lista de tópicos, basta apenas clicar no link da lista e ele será levado até o ponto citado na lista. 

Você deve criar seu artigo inteiro primeiro e depois em modo de edição de HTML criar seus  links internos .Um texto âncora é criado usando os seguintes códigos:

• <a href=”#NOME-Ancora”>Palavras da âncora</a> -  Esse código é colocado no ponto de saída dentro do seu artigo. As palavras em verde serão as que você transformará no link de saída.

Atente para o NOME no código, pois ele também terá que ser editado com um nome próprio conforme a âncora que você criar. Agora vou mostrar o código que  irá colocar no ponto de chegada no artigo:

• <a name=”NOME-Ancora”>Palavra para onde vai a âncora</a> - Da mesma forma esse código deverá revestir a palavra de chegada ou destino do clique na âncora. Ou seja, é nessa palavra que seu leitor chegará depois do clique.

Se não entendeu ainda a explicação do texto NOME negritado, vou detalhar mais. Esse NOME que você dará à sua âncora que fará a ligação entre os dois textos no artigo. Mas você deverá apenas alterar o texto NOME e não mexer no # da âncora. Procure colocar nomes relacionados ao assunto, mas devem estar escritos igualmente ou não ocorrerá a ligação entre os textos.

Busquei algumas informações sobre os códigos no Ferramentas Blogs de Marcos Lemos.

Resumindo: Qualquer leitor ficará folgado e se sentirá bem em ler seus artigos e se localizar melhor encontrando facilmente as informações que precisa. Não deixe de ler os próximos artigos e participe comentando e compartilhando este artigo.

Sobre o Autor:

Ricardo F.S é administrador da empresa Ricardo Arts em Valparaíso e dos blogs Blog Ricardo Arts,Dinheiro sem Limite e Processo Blogs na internet. Possui curso completo de informática e internet e possui anos de conhecimento com blogs. Atualmente trabalha como letrista, desenhista e pintor; prestando serviços também na web com design. Para saber mais clique aqui.

Leia Mais

Google Crhome - Ferramentas para blogueiros

Para quem sempre está lidando com seu blog e investindo em melhorias e precisa estar sempre por dentro de HTML, Javascript e CSS, é preciso tanto entender um pouco sobre o assunto como também dominar os recursos das plataformas de blogs disponíveis e também alguns softwares nesta categoria.

Eu mesmo costumo usar os recursos da plataforma, softwares como o Dreamweaver e também o bloco de notas para edições rápidas e adaptações, mas neste artigo quero apresentar uma nova forma de você analisar seu blog ou site usando apenas o seu navegador.

Claro que para isso é preciso estar em uso o Google Chrome, que tem este recurso e consegue examinar toda estrutura do blog aberto no momento. É um recurso muito bom e que auxilia na localização de itens no template, descobrir códigos de cores e outros detalhes mais.


Inspecionando sua Página

Para ver todo o código fonte de sua página, basta apenas dois simples comandos com seu mouse e já verá toda a estrutura de seu blog em códigos.

Abra o blog e clique na página com o botão direito do mouse; depois em "Exibir código fonte da página".  Você verá no rodapé da página como na imagem abaixo:

Clique na imagem para ver em detalhes o recurso aberto na página.

O que você pode encontrar neste recurso do Google Chrome além da exibição do código-fonte? Realmente são muitos recursos ótimos para quem vive esquentando a cabeça com códigos. Veja o tamanho da lista de ferramentas de inspeção:

1. Elements - Onde você visualiza os códigos de elementos separados da página, bastando apenas selecionar com o mouse.
2. Resources - Onde você encontra diversas informações dentro de seu blog como frames, data base, links, local storage, session storage e outros.
3. Network - Onde você assiste todas as conexões e ligações de seu blog sendo feitas.
4. Scripts - Onde você pode visualizar os scripts na página.
5. Time Line - Onde fica alinha do tempo.
6. Profiles - Onde você pode realizar capturas de perfis do CSS, JavaScript e tela.
7. Audits - Onde você pode realizar auditorias sobre o estado de seu blog (resultados em inglês).
8. Console - Onde você pode conferir erros e alertas quanto ao seu blog.

As ferramentas são para usuários com certo nível de conhecimento, mas pode mexer a vontade e sem medo, já que nenhuma delas afetará a estrutura de seu blog; mas servem apenas para análise mesmo.

Para quem quer saber informações detalhadas sobre certos elementos de sua página, como tamanho de uma imagem, estilo de uma fonte e outros; basta apenas usar a ferramenta no primeiro recurso que é o "Elements".

Apenas selecione na página o que quer inspecionar e faça o procedimento do botão direito do mouse e já verá os resultados exibidos na área do rodapé da página com destaque em azul.

Espero que este recurso possa ajudar você na manutenção e melhoria de seu blog. Só é preciso baixar o Google Chrome. Para isso, use o link abaixo:

• Download Google Chrome

Caso queira entrar em contato por algum motivo, acesse a página de contato através deste link:Contato.

Envie dúvidas, reclamações, sugestões, elogios e assuntos mais complexos relacionados ao artigo e em 24 horas estarei lhe respondendo prontamente.

Leia Mais