Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens
Em geral todos precisam de um tradutor para seu blog ou seja para que visitantes de outros países possam acessar sua página com nenhuma dificuldade de leitura. Como todos sabem não existe só esse procedimento para tradução de páginas, mas o melhor que encontrei foi esse. Essa ferramenta é muito útil, pois não toma muito espaço no seu blog, e tem um rápido carregamento.
E para lhe ajudar o Google tradutor disponibiliza uma boa ferramenta com vários idiomas, como estamos vendo a imagem abaixo.
Essa ferramenta é muito importante para seu blog. Não tenho muito o que falar, pois é um procedimento rápido e simples.
1. Entre painel do seu blog, vá na aba design, adicionar gadget, html/javascript
2. Copie o código abaixo e cole no gadget

E para lhe ajudar o Google tradutor disponibiliza uma boa ferramenta com vários idiomas, como estamos vendo a imagem abaixo.

Essa ferramenta é muito importante para seu blog. Não tenho muito o que falar, pois é um procedimento rápido e simples.
1. Entre painel do seu blog, vá na aba design, adicionar gadget, html/javascript
2. Copie o código abaixo e cole no gadget
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'pt'
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

É muito importante colocar a descrição do seu blog, para que quando os leitores buscarem por uma palavra-chave apareça com uma descrição bem criativa, e cada vez irá aumentando o número de visitantes no seu blog. Essa opção não só aumentará o número de visitantes, irá também deixa-lo bem mais personalizado e profissional.

<meta content='Descrição' name='description'/>
<meta content='Palavras-chave' name='keywords'/>
</b:if>
No local em vermelho substitua por a descrição que você quer. E no local em verdesubstitua informando palavras-chaves ex: (Dicas, Dicas do Dia) Sempre separado por vírgula, pode ser no máximo até 10 palavras

Para que possa adicionar as palavras-chaves é preciso fazer um procedimento no html do seu blog.
Para começar vá até a aba "design" > "elementos da página" > "editar html"
Procure por:
<b:include data='blog' name='all-head-content'/>
E imediatamente abaixo cole o seguinte código
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<meta content='Descrição' name='description'/>
<meta content='Palavras-chave' name='keywords'/>
</b:if>
<meta content='Descrição' name='description'/>
<meta content='Palavras-chave' name='keywords'/>
</b:if>
E o código ficará assim:
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.homepageUrl == data:blog.url'> <meta content='Descrição' name='description'/>
<meta content='Palavras-chave' name='keywords'/>
</b:if>
No local em vermelho substitua por a descrição que você quer. E no local em verdesubstitua informando palavras-chaves ex: (Dicas, Dicas do Dia) Sempre separado por vírgula, pode ser no máximo até 10 palavras
Geralmente a caixa de busca é usada mais na parte de baixo onde se encontra os gadgets, mas se você for uma pessoa bem organizada e quer ter essa caixa de busca em uma parte do cabeçalho é possível sim, fica bem organizado e legal...

E acima dessa linha cole o seguinte código.
Agora procure por:
E abaixo dessa linha cole o seguinte código.

Para começar vamos na aba "Design" > "Editar html" > "Expandir modelos de widgets"
E em seguida procure por:
#header-wrapper
E acima dessa linha cole o seguinte código.
/* ----- Busca ----- */
#busca{
width:auto;
height:auto;
z-index:1;
position: absolute;
top: 50px;
left: 660px;
}
width:auto;
height:auto;
z-index:1;
position: absolute;
top: 50px;
left: 660px;
}
Agora procure por:
<div id='header-wrapper'>
E abaixo dessa linha cole o seguinte código.
<div id='busca'>
<form action='/search' id='searchthis' method='get' style='margin:0;padding:0;display:inline;'><input id='search-box' name='q' onblur='clickrecall(this,'Pesquisar')' onclick='clickclear(this, 'Pesquisar')' size='20' style='color: #999;' type='text' value='Pesquisar '/> <input id='search-btn' type='submit' value='Buscar'/></form> </div>
<form action='/search' id='searchthis' method='get' style='margin:0;padding:0;display:inline;'><input id='search-box' name='q' onblur='clickrecall(this,'Pesquisar')' onclick='clickclear(this, 'Pesquisar')' size='20' style='color: #999;' type='text' value='Pesquisar '/> <input id='search-btn' type='submit' value='Buscar'/></form> </div>
Hoje vou lhes mostrar como dar um estilo diferente ao widget de assinantes por e-mail padrão do Feedburner, de modo a chamar ainda mais a atenção dos visitantes para essa importante ferramenta de divulgação de nossos artigos. O que vou passar aqui é uma tradução do artigo Tres gadgets de subscripción do blog El Escaparate. Irei falar somente sobre o primeiro, que é o que escolhi utilizar aqui no QCB, os outros dois você pode conferir no próprio El Escaparate. Vamos lá!
O widget que abordarei aqui é esse da imagem abaixo, ou seja, além da assinatura por e-mail dos feeds ele ainda possibilita a assinatura normal dos feeds, um link para o Facebook e outro para o Twitter.
Altere onde está URL-DOS-FEEDS-COMPLETO pelo url completo de seus feeds, exemplo, o do QCB é http://feeds.feedburner.com/querocriarumblog. Para apontar para um perfil do Facebook altere onde está http://www.facebook.com/gfsolucoes pelo url de seu perfil no Facebook. Para apontar para seu perfil no Twitter substitua onde está http://www.twitter.com/powerdesign pelo url de seu perfil no Twitter.
Fiz apenas uma pequena mudança no código original, que foi acrescentar style=”width:140px”, pois ficou muito pequeno para meu template. Se quiser aumentar ou diminuir basta alterar o valor, no meu caso, coloquei 240px.
Se você está procurando um widget de relógio para colocar em seu blog o Relógios para Sites e Blogs é o que você precisa. Nele você encontrará mais de 500 modelos de relógios de todos os tipos e gostos. Acesse o site clicando aqui e aproveite para decorar seu blog com um desses relógios maravilhosos.
Veja Alguns modelos interessantes abaixos
modificamos o código feito para Criar um Índice do blog para mostrar os comentários recentes do blog em uma pagina (postagem) separada. Achamos esse sistema melhor do que adicionar um gadget com os comentários recentes porque o gadget faz o blog ficar mais lento (demora para carregar a pagina) devido ao uso de mais códigos.
Veja quais partes do código você pode ou deve alterar:
....document.write("<script src=\"http://www.dicasparablogs.com.br/feeds/comments/default?max-results=".... - coloque o endereço do seu blog
numposts = 20 numero de comentários exibidos (máximo 20)
summaryPost = 150 quantidade de letras mostradas em cada comentário
Então faça essas alterações e pronto, se quiser pode formatar o estilo (aparência) do texto alterando o estilo CSS:
.comentarios a{display: block;margin: 20px;border: 1px dashed #000;padding: 3px;}
.comentarios a:hover{border: 1px solid #F00;background-color: #FFC;}
Achei isso na net e postei aki
- O código é o seguinte:
<style type="text/css">
.comentarios a{display: block;margin: 20px;border: 1px dashed #000;padding: 3px;}
.comentarios a:hover{border: 1px solid #F00;background-color: #FFC;}
</style>
<div class="comentarios"><script type="text/javascript">
numposts = 20
imgr = new Array();
imgr[0] = "URL IMAGEN 1";
showRandomImg = true;
tablewidth = 500;
cellspacing = 0;
borderColor = "";
bgTD = "#ffffff";
imgwidth = 100;
imgheight = 100;
fntsize = 16;
acolor = "#ff0000";
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#0000ff";
icon2 = " ";
label = "";
</script><br />
<script type="text/javascript">
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
var trtd = '<a href="'+posturl+'" style="display:block" title="Veja o comentário e o tutorial completos">'+icon2+removeHtmlTag(postcontent,summaryPost)+'...</a>';
if(summaryPost == 0) { trtd = '<p><a href="'+posturl+'">'+posttitle+'</a> '+cmtext+ ' ' + daystr + ''; }
document.write(trtd);
j++;
}
}
document.write("<script src=\"http://www.dicasparablogs.com.br/feeds/comments/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
Veja quais partes do código você pode ou deve alterar:
....document.write("<script src=\"http://www.dicasparablogs.com.br/feeds/comments/default?max-results=".... - coloque o endereço do seu blog
numposts = 20 numero de comentários exibidos (máximo 20)
summaryPost = 150 quantidade de letras mostradas em cada comentário
Então faça essas alterações e pronto, se quiser pode formatar o estilo (aparência) do texto alterando o estilo CSS:
.comentarios a{display: block;margin: 20px;border: 1px dashed #000;padding: 3px;}
.comentarios a:hover{border: 1px solid #F00;background-color: #FFC;}
Achei isso na net e postei aki
Todos os blogs precisam publicar sobre temas atuais e as novidades que acontecem, mas no caso de blogs que falam sobre esportes e em especial sobre o futebol brasileiro isso é mais necessário ainda. O site Ig Esportes lançou novamente gadgets com os resultados dos jogos para colocar no blog e ainda ultimas noticias sobre os jogares e clubes de futebol
Mas voltando ao assunto mostrar os resultados das partidas de futebol no seu blog, você só precisa entrar na pagina design, adicionar gadget, escolher o gadget html/javascript e colocar esse código:
Mas voltando ao assunto mostrar os resultados das partidas de futebol no seu blog, você só precisa entrar na pagina design, adicionar gadget, escolher o gadget html/javascript e colocar esse código:
<iframe width="316" height="403" src="http://widgets.ig.com.br/esportes/temporeal_widget/" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
Entre os muitos acessórios que podemos utilizar nos blogs um bem interessante é colocar a previsão do tempo, isto porque todo mundo tem a curiosidade de olhar essas previsões quando tem oportunidade, mas são claro se tratando de blogs eles widgets com previsão do tempo são mais úteis em alguns tipos de sites que falam sobre alguma região ou cidade em especifico, ou seja, cada um deve avaliar e saber Quais os Melhores Gadgets e Acessórios para Blogs.
Vamos indicar 3 sites que fornecem gadgets com previsão do tempo para usar em blogs, o procedimento para colocar qualquer um deles no seu blog é o mesmo copiar o código gerado pelo site depois ir a pagina do blogger adicionar um gadget de html/javascript e colar o código. Veja a seguir alguns exemplos de gadgets de previsão do tempo.
Clima TempoTempo AgoraCentro de Previsão de Tempo e Estudos Climáticos
Agora você só precisa escolher qual destes sites com previsão do tempo gostou mais e colocar no seu blog, como já falamos é só copiar o código e colocar como umgadget de html/javascript
Vamos indicar 3 sites que fornecem gadgets com previsão do tempo para usar em blogs, o procedimento para colocar qualquer um deles no seu blog é o mesmo copiar o código gerado pelo site depois ir a pagina do blogger adicionar um gadget de html/javascript e colar o código. Veja a seguir alguns exemplos de gadgets de previsão do tempo.
Clima TempoTempo AgoraCentro de Previsão de Tempo e Estudos Climáticos
Agora você só precisa escolher qual destes sites com previsão do tempo gostou mais e colocar no seu blog, como já falamos é só copiar o código e colocar como umgadget de html/javascript
Uma opção do Blogger é a Navbar que fica presente no topo do blog. Porém essa barra pode ser retirada caso você não goste.

1º - Faça login no Blogger, depois entre em "Layout" -> "Editar HTML".
2º - Procure (Ctrl + f):

1º - Faça login no Blogger, depois entre em "Layout" -> "Editar HTML".
2º - Procure (Ctrl + f):
]]></b:skin>3º - Cole o seguinte código ANTES:
#navbar-iframe {height:0px;visibility:hidden;display:none}4º - Teste e salve!
- Ola Galera Vou estar ensinando como faz uma caixa de texto em movimento é muito usada para dar noticias no seu blog
Codigo HTML
color: blue; font-family: 'COMIC SANS MS'; font-size: small;">SEU TEXTO</span></marquee>
1. Para editar o seu texto mude a palavra indicada em vermelho.
2. Para mudar a cor do texto edite a palavra indicada em azul.
Pronto seu texto em movimento está feito.
Para ver o resulto olhe a conclusão abaixo, não se esqueça espere no máximo 30 segundos.
Conclusao
Como quase todo mundo sabe o favicon é um ícone que fica em seu navegador que se encontra perto do link do seu blog, mas sabemos que o blog oferece um favicon padrão.

Você pode trocar seu favicon usando dois processos rápidos e básicos, só precisa-se ler com atenção e dedicação.
Logo DEPOIS desta tag, adicione o seguinte código HTML:
Substitua o código destacado em vermelho por a URL da sua imagem.
Após ter feito tudo salve, visualize sua página e confira como ficou.

E ao passar do tempo o blog liberou uma nova opção no blog para mudar o favicon com essa opção você poderá trocar o favicon quantas vezes quiser qualquer modelo qualquer imagem, sendo que você não precisará editar o seu html.

Você pode trocar seu favicon usando dois processos rápidos e básicos, só precisa-se ler com atenção e dedicação.
Para alterar seu favicon são duas opções, você escolherá qual forma você acha mais fácil ou seja a opção é sua.
Bom, vamos começar a fazer os processos.
- Processo usando HTML
Acesse o painel de seu Blog, e vá na aba Design. Logo após, vá para a página onde pode ser encontrado o código-fonte de seu Blog, a aba "Editar HTML". Pressione CTRL + F e procure pela seguinte tag:
Procure por
| ]]></b:skin> |
Logo DEPOIS desta tag, adicione o seguinte código HTML:
| <link href='URL_IMAGEM' rel='icon' type='image/x-icon'/> <link href='URL_IMAGEM' rel='shortcut icon' type='image/x-icon'/> |
Substitua o código destacado em vermelho por a URL da sua imagem.
Após ter feito tudo salve, visualize sua página e confira como ficou.
- Processo padrão com o novo serviço do blog.
Acesse o Painel do blog, e vá na aba Design. Logo após, vá para a página onde pode ser encontrado o gadget favicon clique em editar, escolha sua imagem, salve seu favicon e confira como ficou no seu blog.




