Dicas para Blogs

Sites para hospedagem grátis de imagens

2009-07-16T15:19:00.002-03:00

Que tal achar dezenas de sites de hospedagem no mesmo lugar? No site Find Image Host - free image hosting sites você encontra links para muitos sites onde você pode colocar suas imagens gratuitamente, e depois usar para fazer imagens de fundo ou banners para parcerias.

Veja no menu do lado direito tem varias opções de classificação dos sites: Free image hosting sites e Image hosts by filetypes, entre outros eles indicam alguns sites onde você pode colocar imagens no formato .ico, isso é util para mudar a imagem que fica na barra de endereços do navegador.

Resolvemos indicar esse site com diversas opções de hospedagem porque ultimamente também tivemos problemas com isso, algumas de nossas fotos publicadas foram deletadas de hospedagens grátis. Então se usar e gostar de algum dos sites indicados no Find Image Host, deixe um comentário falando qual deles achou o melhor lugar para hospedar suas imagens.

Veja também:
Hospedagem de arquivos para Download

Alterar cores, tamanho, letra do menu jump

2009-07-15T17:00:00.007-03:00

Vamos mostrar como mudar as cores, tamanho e tipo de fonte do menu jump, além disso, é possível escolher a cor de fundo desse menu suspenso inteiro ou colocar cores diferentes em cada opção. Veja o menu abaixo:

O código para colocar um menu de salto no blog é o seguinte:

<script language="JavaScript" type="text/javascript">
function openDir( form ) {
var newIndex = form.fieldname.selectedIndex;
if ( newIndex == 0 ) {
alert( "Please select a location!" );
} else {
cururl = form.fieldname.options[ newIndex ].value;
window.location.assign( cururl );
}
}
</script>
<form name="form" id="form">
<select style="width:300px; font-family:'Comic Sans MS'; font-size:14pt; background:#FFFFCC" name="fieldname" onchange="openDir( this.form )">
<option>Nossos Sites</option>
<option value="http://frasecurta.blogspot.com">Frases Curtas</option>
<option style="background:#66FFFF" value="http://jornaljd.blogspot.com">Meu Jornal</option>
<option value="http://dicasdesitesuteis.blogspot.com/">Dicas de Sites Úteis</option>
</select>
</form>

Note que tem algumas coisas a mais neste código na linha <select... tem style="width:300px; font-family:'Comic Sans MS'; font-size:14pt; background:#FFFFCC" isso altera o estilo do menu inteiro, usamos a mesma formatação em CSS que usamos em qualquer texto, então é a mesma coisa que formatar um texto em qualquer outra parte do blog. O valor 300 é a largura, então cuidado para não colocar uma largura maior que a da coluna onde ficará o menu.

Outra coisa é a linha com o link para o Meu Jornal, nela encontramos style="background:#66FFFF” isso faz mudar a cor de fundo somente deste item do menu jump. Se quiser pode usar cores diferentes que cada um dos itens do menu.

Alterar a quantidade de links é fácil basta adicionar mais linhas seguindo o modelo <option value="http://dicasdesitesuteis.blogspot.com/">Dicas de Sites Úteis</option>, e claro trocando o nome e endereço do site.

Para colocar no blog entre na pagina layout, adicionar gadget, html/javascript e cole o código. Esse menu é bem simples de usar, mas precisa de cuidado para não apagar por engano as aspas ou qualquer outro sinal do código senão ele não funcionará corretamente.

Durante essa explicação falamos em menu de salto, menu jump, menu suspenso que na verdade todos são a mesma coisa apenas é conhecido por nomes diferentes.

Veja também:

Código das cores
Abri menu jump em nova janela

Colocar fundo semi transparente no blog

2009-07-14T15:37:00.004-03:00

Para colocar um fundo no blog semi transparente, quando mesmo através do fundo das postagens é possível ver em parte o fundo do blog, é simples basta colocar uma linha de código na pagina editar HTML, mas vamos explicar um pouco mais detalhado como isso funciona.
Entre na pagina editar HTML e procure por:

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}

No seu blog será diferente o que está dentro das chaves, mas o importante é localizar #outer-wrapper, então coloque junto com os códigos que já estão lá isso aqui:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.7;

Fica deste jeito:

#outer-wrapper {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.7;
margin: 0 auto;
border: 0;
width: 980px;
text-align: left;......}

Os valores 0.7 e 70 são apenas exemplos então pode mudar como desejar, mas mantenha a proporção (0.5 e 50 ou 0.9 e 90....). A grande questão desse código é que não existe fundo semi transparente, o que ele faz na verdade é deixar tudo semi transparente. Quero dizer o fundo e também as letras e imagens, mas algumas coisas podem ficar com opacidade normal(não transparente) principalmente conteúdos externos.

Se preferir pode usar somente para a coluna principal(postagens) ou só nos menus do blog para isso em vez de fazer o que dissemos no estilo outer-wrapper faça em #main (são as postagens) ou #sidebar(colunas do blog).
Após colocar o código clique para visualizar e se ficou do jeito que você queria então salve as alterações. Se revolver ficar fazendo vários testes para ver qual jeito fica melhor sugerimos salvar durante esses testes assim caso erre em alguma coisa não precisará começar tudo novamente.

Veja também:

Trocar imagem quando o mouse está sobre ela
Imagens semi transparentes
Endereço correto da imagem
Fixar uma postagem na pagina inicial do blog

Numero de visitantes online

2009-07-12T09:48:00.005-03:00

Qual o numero de visitantes online do seu blog, ou seja, como saber quantas pessoas estão no seu blog naquele momento, você tem varias opções, mas vou falar das duas que já usei e acho as melhores.

BlogUtils
Muito fácil de configurar basta colocar o endereço do seu blog escolher as opções de fonte, cor, tamanho e clicar para gerar código e pronto agora é só colocar no seu blog.

Esse contador tem a vantagem de ser muito fácil mudar a formatação apenas alterando o trecho que está no estilo
style='.................’
Veja que isso aparece duas vezes então pode usar formatações diferentes para a palavra online e o numero de visitantes. Alias onde está escrito online, você pode escrever o que desejar sem qualquer problema para o funcionamento do código, apenas não se esqueça de colocar um espaço vazio como está no código original senão a palavra ficará encostada no numero.

Who’s amung
Este também é muito fácil para inserir no blog, logo ao entrar na pagina você verá o código pronto, então é só copiar e colocar no blog.

Esse site fornece varias estatísticas sobre seus visitantes online apenas clicando no menu: Painel Principal, Leitores, Mapas, Histórico. A guia leitores é muito interessante, pois mostra em quais paginas(postagens) do blog as pessoas estão visitando naquele momento e clicando em recent você verá a quanto tempo cada um está no seu blog.

Cada um deles tem vantagens diferentes agora cabe a você decidir qual é o melhor para o seu blog, qualquer um deles que for usar depois que pegar o código basta entrar na pagina layout, adicionar gadget, html/javascript e colar o código, ambos começam a funcionar na hora. Claro que existem muitos outros sites que fazem esse mesmo tipo de serviço, mas achamos esses dois muito bons e confiáveis.

Assuntos Relacionados:

Conseguir mais visitas
Usando melhor o contador de visitas
O que as pessoas não gostam em um blog
Enviar o link do seu blog para mais de 200 sites de busca

Como usar o Google Analytics no blog

2009-07-11T13:02:00.007-03:00

Um dos melhores contadores de visitas que existem para colocar no seu blog ou site é o Google Analytics, ele é invisível no blog isso muitas vezes pode ser uma vantagem, mas se quiser mostrar o numero de visitas pode usar além do Google Analytics outro contador de visitas no seu blog.
Para instalar o Google Analytics no blog primeiro precisa ter uma conta Google, portanto sugerimos usar a mesma que usa no blogger. Na pagina inicial do Analytics clique em: Adicionar perfil de website»

Marque a opção Adicionar um perfil a um novo domínio e digite o endereço do seu blog no campo Forneça o URL do site que deseja acompanhar, lembre-se o blogspot não tem www no endereço. Depois veja está estão corretas as informações abaixo sobre usa localização e fuso horário.

Se estiver tudo certo clique no botão concluir logo abaixo, na tela seguinte aparecerá o código que deve colocar no seu blog ele está em Novo Código de acompanhamento (ga.js), copie esse código entre no seu blog na pagina layout, adicionar gadget, html/javascript e cole o código do contador e clique para salvar. Quando visualizar seu blog não verá nada de diferente, esse contador é invisível no blog ou site.

Depois de colocar o código do contador no blog clique no botão concluir na pagina do analytics, o site voltará a pagina inicial e provavelmente verá um símbolo assim na frente do endereço do seu blog, isto é normal, pois acabou de colocar o contador no blog ele levará um dia(24 horas) para começar mostrar as informações. Se clicar para visualizar relatórios irá para a pagina de estatísticas que está somente com números zeros por toda parte, afinal o contador foi colocado agora e está pagina é atualizada uma vez por dia por isso não adianta entrar no site do analytics varias vezes por dia para ver as visitas.

Mas é nesta pagina que futuramente vamos ver muitas coisas preste atenção no menu que tem no lado esquerdo, o item fontes de trafego vai mostrar de quais sites vieram suas visitas isso é muito útil, é através dele que sabemos quais sites enviaram mais visitas para nosso blog e assim organizamos nossa lista de top parceiros e abaixo dele tem conteúdo se clicar nele poderá ver quais paginas do seu blog são as mais visitadas. Claro que tudo isso depois que começarem aparecer às estatísticas desse novo contador que colocamos agora no blog. Como já dissemos demora mais ou menos um dia para você receber as primeiras estatísticas sobre seu blog.

Veja também:
Contadores de visitas grátis
Aparecer nos resultados das pesquisas Google e Yahoo
Como divulgar seu blog
Formulário de contato

Colocar numeração nas paginas do blog

2009-07-08T13:30:00.009-03:00

Para colocar numeração nas paginas do blog parecido com a numeração das paginas de busca do Google ou Yahoo que no final da pagina mostra em qual página você está e quantas têm antes e depois dela, usamos um código em duas partes.
Primeiro vamos colocar a formatação em CSS, isso controla a aparência da numeração, entre na pagina editar HTML e coloque isso junto com o restante dos estilos, sugerimos colocar logo depois do body, assim ficará mais fácil localizar para futuras alterações.

Entre na pagina editar HTML e cole o trecho abaixo:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Depois você pode personalizar facilmente apenas trocado as cores das letras, fundo e bordas, onde está:
border: 1px solid #ccc; é a cor e estilo da borda
background-color:#ccc; é a cor de fundo

Isso aparece varias vezes no código então sugerimos que modifique todos da mesma maneira senão quando exibir a numeração que não seja na primeira pagina, elas podem aparecer de cores diferentes, mas isso é uma questão de gosto, portanto depois que instalar a numeração façam os testes e deixem com as cores que gostarem mais.

Agora clique para salvar, não adianta visualizar o blog, pois ainda não verá nenhum resultado, então vamos colocar o código que faz aparecer a numeração, procure agora por <b:widget id='Blog1' locked='tr ...

Coloque o código abaixo entre </b:section> e </div>:

<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount = 5;
var displayPageNum = 5;
var upPageWord = 'Anterior';
var downPageWord = 'Próxima';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> '+(postNum-1)+' páginas</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>

Então clique para salvar, não adianta tentar visualizar o blog, por que o código não funciona na visualização. Provavelmente no final da pagina do seu blog apareceu algo assim:

Agora já está tudo pronto, mas podemos modificar algumas coisas, veja esse trecho do código:
var pageCount = 5; aqui devemos usar o mesmo numero de postagens que definimos para aparecer em cada pagina.

var displayPageNum = 5; neste o numero 5 é a quantidade links para outras paginas que serão mostradas( 1-2-3-4-5), portanto use o numero que achar melhor.

var upPageWord = 'Anterior';
var downPageWord = 'Próxima';
Aqui podemos trocar a palavra anterior e próxima que aparecem no blog. Mas cuidado ao fazer alteração, pois se apagar qualquer outro sinal o código não funcionará.

Veja no blog Meu Jornal esse código em funcionamento. Encontramos e fizemos algumas modificações nesse código a partir do publicado no Blogger Buster em inglês.

Veja também:

Personalizar títulos
Formatar texto
Código das cores
Colunas com alturas diferentes

Fixar botões no canto da pagina

2009-07-06T20:38:00.007-03:00

Colocamos neste blog alguns botões no canto da pagina para adicionar aos favoritos, assinar feed, atualizações por email e para nossa comunidade no orkut, e varias pessoas perguntaram como fazer isso. O código é bem simples e até já publicamos aqui, mas numa forma simplificada trata-se do mesmo código usado para voltar ao topo da pagina.

A única diferença foi que acrescentamos mais coisas dentro dele, veja abaixo:
<style type="text/css">

</style>
<div style="background-color:#FFFFFF; border-left:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; right:0px;"><div class="menufixo">
<a href="#"><img border="0" src="IMAGEM TOPO DA PÁGINA"/></a>
<a href="http://www.dicasparablogs.com.br/feeds/posts/default" target="_blank" title="Assine nosso Feed"><img border="0" src="IMAGEM RRS"/></a><script language="JavaScript" type="text/JavaScript">
function favoritos() {
if ( navigator.appName != 'Microsoft Internet Explorer' )
{ window.sidebar.addPanel("Dicas para Blogs","http://www.dicasparablogs.com.br",""); }
else { window.external.AddFavorite("http://www.dicasparablogs.com.br","Dicas para Blogs"); } }
</script><a href="javascript:void(favoritos());" title="Adicione aos Favoritos"><img border="0" src="IMAGEM FAVORITOS"/></a>
<a href"=http://feedburner.google.com/fb/a/mailverify?uri=dicaparablog&loc=pt_BR" target="_blank" title="Atualizações por Email"><img border="0" src="IMAGEM ATUALIZAÇÕES POR EMAIL"/></a>
<a href="http://www.orkut.com.br/Main#Community.aspx?cmm=46751209" target="_blank" title="Comunidade no Orkut"><img border="0" src="IMAGEM COMUNIDADE NO ORKUT"/></a>
<a href="http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html" target="_blank" title="Dicas para Blogs"><img border="0" src="http://img16.imageshack.us/img16/9066/iconeblogh.gif"/></a>
</div></div>

Coloque esse código pela pagina layout, adicionar gadget, html/javascript, não importa o lugar da pagina, ele aparecerá sempre no canto inferior direito do seu blog. O começo do código não precisa de alterações, mas se quiser pode modificar:
padding:5px – distancia entre as imagens
background-color:#FFFFFF; - cor de fundo
border-left:1px solid #000000; - borda lateral
border-top:1px solid #000000; - borda superior

Depois desse trecho são apenas links com imagens como fazemos em qualquer outra parte do blog, antes de colocar no blog faça as alterações necessárias nos trechos em negrito.
Quanto a enviar atualizações por email aqui tem a explicação sobre como fazer isso usando o feedburner.

Deixamos o código apenas com as indicações de onde vão as imagens porque se deixássemos o código pronto, provavelmente quando muitas pessoas começassem usar o código as imagens iriam parar de aparecer porque sites de hospedagem grátis excluem ou bloqueiam imagens acessadas muitas vezes(milhares de vezes por dia, mas isso depende de qual site usa) então é mais seguro e confiável cada um hospedar as imagens.

Clique com o botão direito do mouse sobre cada uma das imagens acima e escolha a opção salvar imagem depois só precisa hospedá-las, recomendamos usar o Imageshack. Colocamos um link para essa postagem no final do código e pedimos para que não retirem isso do código a fim de facilitar que outros blogueiros que gostem da idéia tenham facilidade em encontrar esse código.

Veja também:
Adicionar aos favoritos
Hospedar imagens
Colocar ou modificar bordas

Alterar texto postagens mais antigas e mais recentes

2009-07-04T09:08:00.005-03:00

Modificar o texto ou usar imagens no lugar de postagens mais antigas, postagens mais recentes e inicio que aparecem no final das postagens do blog é algo fácil, porém encontrar isso na pagina editar HTML é um pouco complicado, pois quem já tentou procurar por essas palavras não conseguiu resultado algum.
A razão disso é simples o blog usa tags para fazer isso, agora vamos mostrar como modificar, retirar ou colocar esses links(texto postagens mais antigas, postagens mais recentes e inicio) no seu blog. Entre na pagina editar HTML, clique para expandir o modelo e procure por:

<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'>

Logo depois disso deve estar assim no HTML do seu blog:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Se não tiver provavelmente esses links para textos mais antigos, recentes e pagina atual não devem aparecer no seu blog. Portanto se quiser remover esses links é só apagar esse trecho. Mas se a sua intenção é modificar o texto veja os trechos em negrito, basta trocá-los pelo texto que desejar, veja o que cada um deles faz no blog:

<data:olderPageTitle/> link para postagens mais antigas
<data:newerPageTitle/> link para postagens mais recentes
<data:homeMsg/> link para pagina inicial do blog, esse aparece duas vezes então modifique as duas da mesma maneira.

Se quiser usar uma imagem no lugar dos links para postagens mais antigas, postagens mais recentes e inicio, é simples de fazer em vez de escrever outro texto nos lugares indicados coloque esse código:

<img border="0" src="endereço da imagem"/>

Naturalmente cuidado para utilizar o endereço correto da imagem nos links. Depois que fizer as alterações clique para visualizar o blog e se estiver tudo certo é só salvar e já está tudo pronto.

Veja também:

Sites com musicas para colocar no blog
Caixinha com o link no final de cada postagem
Mudar a imagem da cartinha enviar postagem
Deixar sempre o mesmo texto na pagina inicial

Imagem não aparece

2009-07-03T07:50:00.007-03:00

Existem muitos códigos para utilizar no blog que necessitam colocar a url(endereço) de uma imagem nele, como por exemplo, imagem de fundo, scripts, ou mesmo uma foto que deseja colocar no seu blog. E ai começa o problema muita gente diz o código não funciona, ou deu algum erro porque a imagem não apareceu, mas na verdade o defeito não está no código, mas muita gente pega a url errada da imagem, pois a maioria dos sites de hospedagem fornece vários códigos.

Sugerimos que use o ImageShack, normalmente a url que deve usar está em direct link ou algo parecido com isso.

Agora veja como testar se está usando o endereço correto de uma imagem dentro do código no seu blog, copie o endereço da imagem e coloque no navegador depois clique enter, deve aparecer somente a imagem, sem mais nada. Se quiser clique na imagem acima e veja como ela aparece sozinha numa pagina em branco.

Se por acaso aparecerem mais coisas na página então você precisa voltar no site onde hospedou a imagem e encontrar o endereço correto. Pois a imagem somente irá funcionar como fundo do blog se for o link direto para a imagem e não uma página que mostra a mesma. Fazer esse teste simple pode poupar muito trabalho procurando o erro no lugar errado na hora de fazer alterações do layout do seu blog.

Veja também:

Fazer fundo degrade
Imagem de fundo parada
Ocultar a barra padrão do blogspot
Apagar comentários
Números para loterias no seu blog

Como Aumentar as Visitas do Blog

2009-06-29T02:33:00.006-03:00

Para conseguir aumentar as visitas do blog, existem varias coisas que podemos fazer, algumas delas dão resultados rápidos, mas sem continuidade, já outros demoram um pouco mais, porém significam um real aumento de visitas para o blog, quero dizer vai trazer visitas para o seu blog todos os dias e não somente num dia especifico.

A primeira delas que faz as pessoas entrarem no seu blog rapidamente é participar tópicos em comunidades no Orkut(comente ou avalie o blog acima e outras coisas do tipo).

Visitar e comentar outros blogs porque certamente eles virão comentar o seu também. Isso tudo gera visitas, mas a maioria delas visita o blog apenas uma vez, então se usar essas táticas aproveite para propor uma troca de links ou banners. Coloque no seu blog o link dos sites que gostar mais, assim quando eles vieram comentar irão ver e talvez colocar o seu link no deles também.

Mas vamos também falar sobre coisas que geram resultados mais duradouros, ou seja, que realmente aumenta o numero de visitas diárias do blog: primeiro coloque keywords – palavras chave no seu blog.

Entre na pagina editar html e depois da tag <head> coloque isso:
<meta content='palavras, sobre, blog' name='keywords'/>

Apenas no lugar onde está escrito palavras, sobre, blog, troque por palavras que tem algo a ver com o conteúdo do seu blog, sempre separando com vírgulas.

Em suas postagens procure colocar algum link para outra postagem que já tenha feito no seu blog, esses links internos podem ajudar a melhorar sua classificação nos sites de busca, quando mais as pessoas navegarem entre suas paginas é um sinal que o conteúdo dele é bom e assim você aparece melhor os resultados das pesquisas Google, Yahoo e outros. A primeira vez que li isso achei uma bobagem, mas depois que comecei a fazer notei um aumento de visitantes no blog.

Mas também existem coisas que não devemos fazer como, por exemplo, deixar comentários ou participar de tópicos de discussão apenas para escrever visite meu blog e deixar o link, muitos desses lugares irão excluir o que você escreveu e você terá apenas perdido tempo e irritado as pessoas com isso.

É claro que existem muitas outras coisas que ajudam a melhorar o blog e a quantidade de visitas, mas não seria possível falar de tudo numa só postagem afinal esse é um assunto sem fim.

Veja também:

Colocar Descrição e palavras chave nos blog
Aparecer nos resultados das pesquisas Google, Yahoo ...
Código para adicionar aos favoritos
Enviar e-mail com as suas atualizações

Títulos do Menu com imagens diferentes

2009-06-26T14:12:00.004-03:00

A melhor maneira para colocar imagens diferentes em cada um dos títulos do menu é criando um estilo CSS próprio para cada um deles. Entre na pagina editar html, clique para expandir o modelo.
Agora procure pelo titulo que deseja personalizar, temos em nosso blog uma lista dos assuntos mais procurados e o titulo dele é “mais visitados” vamos usá-lo como exemplo.

Veja o trecho destacado é ele o titulo que aparece no blog, então vamos mudar de class=’titulo’ para class=’visitados’

A função disto é dizer que aquele menu usará a formatação do estilo visitados, então vamos criar um estilo com esse nome. No começo do html tem body{...} logo após isso podemos colocar nosso novo estilo.

.visitados {padding-bottom: 10px;display: block;background-image: url(endereço da imagem);background-repeat: no-repeat;background-position: right top;}

Vamos usar a imagem como fundo desse estilo, então falta fazer os ajustes no estilo visitados, podemos usar o padding-top e padding-bottom para acertar a posição do texto sobre a imagem e aparecerá essa formatação aparecerá somente neste titulo do menu, precisamos repetir esse procedimento para cada um dos títulos que vamos personalizar.

Sobre como fazer esses ajustes, criar e hospedar as imagens veja os itens abaixo:
Formatar texto
Como fazer e colocar botões
Hospedar imagens
Programas para criar e editar imagens
Imagens de fundo para blogs
Posicionar imagem de fundo
Personalizar títulos do menu

Colocar Marcadores no blog

2009-06-23T17:17:00.001-03:00

O recurso marcadores deixa muitas duvidas principalmente por que se você acabou de adicionar na pagina de layout, e quando visualizou seu blog não viu mudança alguma. Então vamos explicar isso por partes.

Primeiro vamos fazer a parte de adicionar o gadget marcadores. Isto é feito através da pagina layout onde aparecem varias opções e uma delas é gadget clique nela e na janela que abrir clique em Marcadores para adicionar ao blog, isso vai fazer aparecer outra tela onde você só precisa clicar em salvar alterações nessa parte está pronto.

A segunda parte é adicionar os marcadores aos textos, pois até agora se você olhar seu blog não aparecem os marcadores. Quando estiver fazendo uma postagem adicione o marcador.

Porém é possível colocar os marcadores em textos já publicados sem precisar editar um por vez, para fazer isto vá na pagina editar postagens, então selecione as postagens que você quer e clique em ações de marcador IMAGEM e escolha uma das opções (Adicionar marcador, remover rotulo, novo marcador). Esta é uma maneira bem mais rápida de adicionar ou remover marcadores de postagens já feitas.E lembre-se você pode colocar mais de um marcador por texto, por exemplo, se um texto se refere a layout e códigos, você pode incluir essa postagem nos dois marcadores.

Personalizar títulos do menu do blog

2009-06-21T02:04:00.002-03:00

Colocar os títulos da sidebar, menu lateral, com formatação diferente ou dentro de uma caixa, ou qualquer outra forma como fazemos aqui em um retângulo com cantos arredondados devemos fazer isso pela pagina editar HTML, colocando uma imagem de fundo de fundo no estilo h2 .

Falamos h2, pois é assim na maioria dos blogs, mas se no seu caso não funcionar para saber qual o estilo dos títulos do menu veja o HTML do seu blog e procure pelos títulos que usa então saberá qual configurar. Entre no seu blog clique com o botão direito do mouse num espaço vazio(fora de imagens ou video) e escolha a opção exibir código de fonte, então procure por um dos títulos do seu menu. No caso do Dicas para Blogs encontramos assim: <h2>Guia Rápido</h2> , portanto vamos formatar o h2, mas se no seu blog for outro use esse outro estilo.

Na pagina editar HTML encontramos

h2{..........} então coloque aqui a imagem de fundo junto com o restante do código. O nosso blog ficou assim:
h2 {background-image: url(http://img24.imageshack.us/img24/8909/menudm1.jpg);background-repeat: no-repeat;background-position: center;font-size: 120%;text-align: center;height: 30px;padding-top:9px;color: #000000}

o começo do código é a imagem de fundo background-image: url(http://img24.imageshack.us/img24/8909/menudm1.jpg

Depois tem a parte que impede a repetição e centraliza a imagem de fundo background-repeat: no-repeat;background-position: center;

height: 30px; é a altura da linha, ou seja, deixe igual à altura da imagem.

Outro detalhe é caso aparecer essa imagem de fundo em outro lugar como, por exemplo, no titulo das postagens, então corrigimos isso assim:

h2.date-header {background-image: none;

Isso faz que o estilo h2 date-header não tenha fundo, mais uma vez se precisar localizar o nome exato do estilo faça do mesmo jeito que indicamos para saber qual o estilo dos títulos do menu.

Veja também:

Imagem da carta - enviar postagem
Deixar a mesma postagem no ínicio do blog
Formatação diferente em uma parte do texto
Noções de formatação em CSS
Sobre imagens de fundo
Como hospedar imagens

Criar Regras para Comentários

2009-06-19T18:36:00.005-03:00

Muitos blogs mostram antes da caixa de comentários algumas regras ou instruções para as pessoas lerem antes de escrevem o comentário que desejam isso é útil para evitar ou pelo menos tentar evitar ver coisas desagradáveis e muitas vezes sem nenhuma relação com a postagem escritas no lugar onde em teoria as pessoas deveriam dar sua opinião sobre o que falamos na postagem.
Para colocar esse texto é bem simples entrem em configurações, comentários, então encontre Mensagem do formulário de comentário, agora é só escrever o que deseja no campo ao lado e isso aparecerá logo acima da caixa de comentários do blog. Também é possível formatar o texto usando as tags:

<b>negrito</b>
<i>itálico</i>
e ainda as duas juntas <i><b>Negrito com itálico</b></i>

Agora é só escrever o que quiser nos lugar dos exemplos e publicar no seu blog, um detalhe importante é não esquecer de colocar a barra no código depois do texto como acabamos de fazer.

Veja também:
Top Comentaristas
Mostrar numero total de comentários e postagens
Publicar comentários somente após sua aprovação
Exibir comentários recebidos recentemente

Sites com musicas para colocar no Blog

2009-06-15T16:01:00.001-03:00

Para colocar musica no blog é simples, no caso do blogspot basta entrar na pagina layout, adicionar gadget, html/javascript e colar o código. A parte mais difícil é encontrar o tal código, já fizemos algumas postagens sobre colocar musica no blog:

Qual o melhor site de música para colocar no blog ?
Colocar Rádio no Blog
Colocar música no blog

Tópico sobre música em nossa comunidade no orkut

Nelas temos vários links de sites com musica, então vamos reunir essa lista de sites de musica para ficar mais fácil procurar uma boa musica para colocar no seu blog.

Deezer
Rádio Fusion
Last FM
Rádio Blast
Imeem
Splashcast.
Playlist.com
FileDEN
Boomp3
Rádio Club

Onde achar o código varia de cada site, a maioria chama de player, playlist no caso de rádios, ou seja, uma seleção de musicas que tocam no seu blog. Geralmente o código começa assim: <object classid="clsid:d27cdb6e-ae6d-11cf- e tem algumas linhas ou usam <iframe.... então é só copiar o código e inserir no blog como dissemos logo no começo.

Sugerimos não usar musicas que começam automaticamente, muitas pessoas não gostam de blogs ou sites com musica que inicia sozinha porque faz demorar para carregar e, além disso, os seus visitantes podem estar ouvindo outra coisa. Por isso é preciso cuidado para em vez de agradar quando a musica pode fazer o visitante querer sair do blog. Isso não é só uma opinião isolada, fizemos uma pesquisa sobre o que as pessoas não gostam em um blog. Então pense bem o vai ou não usar para melhorar seu blog, nem sempre aquilo que gostamos agrada a maioria.

Página Cores e Fontes

2009-06-14T21:26:00.004-03:00

Algumas vezes quando entramos na pagina fontes e cores do blogspot encontramos algo que não funciona, por exemplo, você muda a cor de fundo naquela pagina, salva, mas não acontece nada no seu blog. A razão disso é que muitas vezes ao fazer alterações no layout modificamos diretamente o html e a partir daí essa pagina de cores não funcionará mais.
Entre na pagina editar html e veja logo no começo do código tem:

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">

E muitas outras variáveis parecidas com esta, cada uma delas é responsável por uma cor no seu blog, isso são variáveis que o blog usa para facilitar modificar as cores de varias coisas no blog, então veja mais abaixo:
body {
background:$bgcolor;
margin:0;

Esse :$bgcolor; no lugar da cor de fundo(background) é a variável o que faz funcionar a pagina cores e fontes. Note que no começo do primeiro trecho tem name="bgcolor" o cifrão é apenas um complemento do código. Então se algum dos links para modificar cores não está funcionando o problema deve ser esse, o html foi modificado.

Para corrigir isso é bem simples basta colocar novamente a variável no lugar da cor de fundo como usamos no exemplo acima, apague o código da cor que está lá e coloque: $bgcolor.

Além de corrigir esses erros é possível mudar o texto que aparece na pagina cores e fontes, onde está escrito Page Background Color, você pode colocar Cor de Fundo, é mais fácil de identificar. Ainda é possível criar novas variáveis, copiando o código de uma delas e trocar o name e description, colocando mais uma variável na lista como no exemplo abaixo:

<Variable name="fundotexto" description="Fundo das Postagens"
type="color" default="#fff" value="#ffffff">

E depois na parte do html onde controla a cor da coluna principal modificar assim:

#main-wrapper { background:$fundotexto;
width: 410px;

E já está pronto, quando entrar na pagina cores e fontes verá que apareceu Fundo das postagens junto com as outras coisas que já podia modificar a cor, e agora pode trocar a cor de fundo por essa pagina. Um detalhe final que ainda não comentamos foi a parte fff e ffffff que aparece no código, isso são as cores padrão, elas não tem muita importancia pois você mudará para qualquer outra cor assim que entrar na pagina fontes e cores.

Veja também:
Código das Cores
Enviar suas postagens por e-mail
Trocar imagem quando o mouse está sobre ela
Editar imagens online
Formatar texto do blog

Domínio Próprio no Blog

2009-06-13T03:35:00.006-03:00

Após publicamos alguns artigos sobre como ter um domínio grátis, resolvemos gastar um pouco e ter nosso domínio próprio,apartir de hoje estamos com o endereço http://www.dicasparablogs.com.br. Isso não significa que os links para o nosso endereço no blogspot foram perdidos, tudo continua funcionando normalmente com o http://dicasparablogs.blogspot.com, ele apenas é redirecionado para o novo domínio.

E aproveitando o assunto vamos falar sobre algumas coisas sobre ter um domínio, primeiramente não é tão caro custa 15 reais por ano domínio nacional(.com.br) e 5 reais se for internacional(.com ou .net), usamos para fazer isso o UOL Host. Consultamos esses valores de registro de domínio no dia desta postagem 13 de junho de 2009.

Entre as coisas lemos sobre quais as vantagens de registrar um domínio é que esse endereço passa a realmente pertencer a você, ou seja, se por acaso o blogspot, ou qualquer outro lugar onde tenha um blog resolver por qualquer motivo cancelar o serviço(seu blog) você perderá naturalmente os arquivos hospedados(postagens, layout), mas poderá usar o mesmo endereço em outro lugar, quero dizer os links que já tem para seu endereço, as pessoas que adicionaram aos favoritos, boa parte das visitas diárias viram junto com você para o lugar que usar seu domínio. Isso porque você usará outra hospedagem, mas o endereço continuará sempre o mesmo.

Outra coisa que precisamos considerar é a possibilidade de após você trabalhar muito para conseguir algum sucesso com o blog pode notar que algum espertinho já registrou o domínio, já vimos muitos casos assim com pessoas ou marcas famosas que precisam comprar de outra pessoa o domínio com seu nome.

Caixinha com o link da postagem

2009-06-12T05:05:00.004-03:00

Um bom jeito de conseguir mais visitas para o blog é colocar uma caixinha no final de cada postagem com o código pronto do link daquela postagem para outros blogueiros, isso ajuda aumentar o numero de visitantes no blog de duas maneiras.
Primeiro as pessoas que visitam esses blogs que tem seu link pode achar o título interessante e clicar nele. O segundo modo é aumentar o numero de seus links espalhados pela internet, isso faz melhorar sua classificação no alexa, pagerank e assim tem mais chances de aparecer melhor classificado nos resultados da pesquisa Google, Yahoo e outras. Melhor classificado significa aparecer entre os primeiros resultados da pesquisa.
Para colocar uma caixinha com o link de cada postagem entre na pagina html, clique para expandir o modelo e procure por:<data:post.body/>

Isso varia um pouco dependendo do modelo do blog se não encontrar retire os sinais <>/ que estão juntos pode haver algum espaço vazio que não permite localizar usando o ctrl F, então talvez não seja exatamente igual no seu blog, então logo depois coloque isso:

<div align='center'><br/><br/>Link para essa postagem<br/>
<textarea cols='25' name='yourForm' onfocus='this.select()' onmouseover='this.focus()'
rows='3'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></b:if></textarea>
<br/><br/></div>

Agora clique para visualizar o blog e depois salvar, e já está terminado, agora no final de cada postagem o seu blog mostrará uma caixa com o link para aquele texto. Se quiser modificar o tamanho da caixinha cols='25' é a largura e rows='3' a quantidade de linhas exibidas, então é só mudar esses valores, mas cuidado troque somente os números não altere mais nada neste código. Você pode notar que <br/> aparece varias vezes no código, isso é apenas para pular um linha, ou seja dar um espaço vazio antes e depois da caixinha.

Veja também:

Fixar uma postagem na pagina inicial
Destacar uma parte do texto
Formatação de texto
Barra de rolagem na lista de blogs
Aparecer nos resultados da pesquisa Google, Yahoo ..

Regras deste Blog

2009-06-11T04:30:00.004-03:00

Recebemos muitos e-mails pedindo ajuda para resolver problemas com blogs, então nem sempre é possível responder a todos, então antes de escrever use a pesquisa que está no inicio de nossa pagina para procurar a resposta e também visite a Comunidade Dicas para Blogs no Orkut já respondemos muitas coisas nela.

Outro assunto importante é a cópia de textos e imagens desde blog:

É proibido copiar postagens completas desse blog, ou seja, não permitimos que copiem e publiquem nossas explicações na integra, por isso colocamos no final de cada postagem o código com o link para cada uma delas

Permitimos a copia de partes de nossas explicações desde que coloque na mesma postagem um link dizendo que o Dicas para Blogs foi a fonte de onde retirou as informações.

Você não pode criar outro blog usando o nome Dicas para Blogs, afinal já usamos o nome e isso seria uma tentativa de enganar os internautas.

Isso tudo não são regras criadas por nós existem uma base legal para isso:

Direitos Autorias Lei 9610
Cópia ilegal de conteúdo artigo 184 do Código Penal brasileiro

Além disso, agora o Blogger tem uma pagina para receber denuncias sobre cópias de conteúdo de outros blogs quando as pessoas publicam como se fossem elas as autoras(sem citar a fonte de onde retiram o texto ou imagens) e também sobre download de conteúdo protegido por direitos autorais, como: filmes, séries, jogos, programas de computador ou músicas.

Alguns podem pensar que achar cópias indevidas é difícil, mas existem muitos jeitos de fazer isso uma delas é usando o site http://www.copyscape.com/, aproveite e veja se alguém copiou algo do seu blog.

Qualquer duvida deixe um comentário ou escreva para nosso email.

Trocar imagem da Cartinha - Enviar Postagem

2009-06-08T16:05:00.004-03:00

Para os que gostam de personalizar tudo no blog uma boa dica é mudar aquela imagem da cartinha que serve para enviar uma postagem para um amigo que fica no final de cada postagem. E trocar aquela imagem é mais simples do que parece.

Entre na pagina editar html, clique para expandir o modelo e procure por esse trecho:

<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif'
width='18'/>

Então é só colocar o endereço de outra imagem no lugar que está em negrito e alterar os valores height 13(altura da imagem) e width 18(largura da imagem) e agora já está tudo pronto. Quando visualizar seu blog essa nova imagem aparecerá no final dos posts do seu blog para que seus visitantes possam indicar seu blog por email, apenas tenha cuidado para usar a url correta da imagem.

Veja também:

Hospedagem de imagens
Programas para criar imagens
Trocar o icone na barra de endereço

Mostrar Top Comentaristas do Blog

2009-06-06T09:31:00.008-03:00

Encontramos um jeito fácil de mostrar os top comentaristas do seu blog basta colocar o código abaixo pela pagina layout, adicionar gadget, html/javascript e aparecerá a lista com as 10 pessoas que mais comentaram o seu blog.

<script type="text/javascript" src="http://acessoriosparablogs.com.br/scripts/topcomentarios.js"></script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2351a7b3195ee95ef3643998bc8def5e&url=http%3A%2F%2Fdicasparablogs.blogspot.com&num=10&filter=fabiano roberto" type="text/javascript"></script>

Antes de colocar o código altere o endereço do blog e seu nome onde está dicasparablogs.blogspot.com e fabiano roberto, colocar seu nome serve para você não aparecer na lista pois provavelmente é quem mais comentou o blog respondendo outros comentários, mas coloque seu nome exatamente como está no seu perfil do blogger, cuidado para não apagar nada além disso pois se faltar qualquer coisa o código não funciona. Quando a formatação esse script usará a mesma dos links do seu blog. Ainda é possível definir quantos top comentaristas aparecerão em nossa lista, apenas modifique o numero 10 desse trecho num=10&

Veja também:
Mostrar total de postagens e comentários
Exibir Comentários Recentes
Dia da semana e do mês
Imagem seguindo o mouse
Classificar postagens(legal, interessante ...)

Aumentar o lucro com o Blog

2009-06-04T16:31:00.006-03:00

Existem varias maneiras de ganhar dinheiro com o blog a mais comum é usar o Google Adsense, mas além dele existem muitos outros sites que você pode utilizar para conseguir aumentar o lucro com seu blog, por exemplo, o Hotwords.

Os anúncios do Hotwords funcionam de forma diferente, ele não mostra um banner ou coisa do tipo, mas transforma algumas palavras do seu texto em links e você ganha cada vez que alguém clicar nesses links.

Para começar a utilizar e ganhar dinheiro com o Hotwords no seu blog primeiro precisa fazer um cadastro e aguardar a aprovação pelo site, depois é só pegar o código e colocar no seu blog. No site deles tem uma explicação em video sobre como colocar o código no blog e o melhor é falado em português, veja os links sobre como instalar o Hotwords no Blogspot, WordPress, Joomla. Depois que fizer seu cadastro logo que entrar no site links para tutorias explicando a instalação para esse e outros tipos de blogs.

Veja a pagina de tutoriais de instalação para esses blogs que aparecem na imagem
Depois de instalar o código demora algumas horas para começarem a parecer os anúncios, outras duvidas no próprio site é possível resolver, pois achei muito bons os links de ajuda. E pode ser usado junto com adsense como fazemos neste blog, assim é uma boa alternativa para aumentar os lucros com o blog e não ocupar mais espaço com banners ou outro tipo de publicidade.

Veja também:
Como fazer seu blog aparecer nos resultados da pesquisa Google de Imagens
Colocar Sub menu no blog
Quantas vezes a mesma pessoa visitou o blog
Usando outros recursos da pesquisa Google
Vendas Online
Ganhar dinheiro na internet

Fazer uma Galeria de Imagens no Blog

2009-06-01T15:27:00.009-03:00

Às vezes queremos colocar varias imagens ou fotos na mesma postagem, mas fica um pouco esquisito, ocupando espaço demais na pagina, então uma boa solução para esse problema é organizar uma galeria de fotos ou dizendo em outras palavras fazer que todas as imagens apareçam no mesmo lugar, como um slide com miniaturas ou links que clicamos para ampliar as fotos. Veja o código:

<iframe src="http://img41.imageshack.us/img41/9807/oceanon.jpg" marginheight="0" marginwidth="0"frameborder="0" width="400" height="300"scrolling="no" name="galeria" id="galeria"></iframe><br />
<a href="http://img11.imageshack.us/img11/6259/lhlake.jpg" target="galeria">Lago</a>
<a href="http://img190.imageshack.us/img190/851/praia.jpg" target="galeria">Praia</a>

Se quiser hospede as imagens no ImageShack então pegue o endereço de cada uma subtitua no código, lembrando que a imagem que está na parte do iframe vai aparecer e as outras ficaram ocultas só aparecendo quando clicar nos links abaixo, cuidado para não pegar o código errado a url da imagem está em direct link. Outro detalhe é que se invés de usar palavras quiser usar miniatura das imagens para fazer os link é possivel basta colocar o target="galeria" no código.

A parte principal é observar target=”galeria” veja que esse é o mesmo nome que usamos logo na primeira linha name="galeria", então se for usar mais de uma vez esse código no seu blog ou site tem que usar nomes diferentes para evitar erros. Veja a demostração do código dessa galeria de imagens em funcionamento

Cuidado com o tamanho das imagens elas tem que ser todas iguais no caso usei 400 por 300, esse numero também está no código do iframe, então faça os ajustes nas imagens antes de publicar. Isso porque na verdade o iframe não é transparente, ele tem fundo branco então se as imagens forem de tamanho diferente ficará aparecendo uma margem branca, além disso, elas ficaram cortadas, pois o tamanho 400 por 300 que colocar no código do iframe é fixo, ou seja, ele não se ajusta ao tamanho das imagens.

Veja também:
Banners aleatórios
Como hospedar imagens
Links dentro da Página
Script com dia da semana e do mês
Site abrindo sozinho(parent.location)

Criar um menu expansível no blog

2009-05-29T18:59:00.009-03:00

Hoje vamos fazer um menu expansível ou então colocar algum conteúdo que só é mostrado ao clicar no título, ele funciona da seguinte maneira aparece somente o título do menu e quando clicamos ele desliza mostrando seu conteúdo e se clicar novamente ele volta a desaparecer. Você pode usar para colocar o que você quiser: texto, uma lista de links, imagens... Para colocar esse menu expansível no blog dá um pouco de trabalho, mas vale à pena, pois o efeito visual dele é muito bom.
Entre na pagina editar html e ache </head> então coloque isso antes dessa tag:

<script src="http://cidadeweb.110mb.com/SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>

Após isso vá um pouco mais acima e junto com os outros estilos CSS cole esse trecho:

.CollapsiblePanel {
padding: 3px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.CollapsiblePanelTab {
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: italic;
}
.CollapsiblePanelContent {
padding: 5px;
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-weight: normal;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
}
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #FFCC99;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;}
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
text-decoration: underline;
color: #0000FF;}

Para modificar as cores que usamos veja como formatar texto, modificar bordas e fazer botões e modifique os estilos CollapsiblePanelContent(conteúdo), CollapsiblePanelOpen .CollapsiblePanelTab(título quando o conteúdo é mostrado) e CollapsiblePanelTab (link para mostrar o conteúdo), reparem que usamos o código as bordas separadamente para cada lado(left, right, top, bottom) isso para fazer parecer uma caixa quando expandimos o menu, então modifique como desejar. Então clique para salvar, por enquanto ainda não aparecerá nada no seu blog.

Entre na pagina layout, adicionar gadget, html/javascript e cole esse código:

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div tabindex="0" class="CollapsiblePanelTab">título do menu</div>
<div class="CollapsiblePanelContent">Conteúdo Oculto</div>
</div>
<script type="text/javascript">

</script>

Onde está escrito título do menu é o texto que aparecerá no seu blog, quando alguém clicar nele vai abrir o resto do menu e mostrar tudo que tem dentro daquele menu. Portanto onde escrevemos conteúdo oculto você deve colocar o que desejar links, imagens, enfim qualquer coisa, apenas no caso de imagens cuidado com a largura da coluna do blog onde estará o menu, pois se a imagem for mais larga que o blog provavelmente terá problemas.

Então se for usar mais de desses menus com conteúdo oculto não precisa apenas repetir a ultima parte do código que é para ser colocada pela pagina layout, o restante que fizemos na pagina editar html não precisa de alterações. Mas necessário fazer alguns ajustes, repare que no inicio aparece:

<div id="CollapsiblePanel1" class="CollapsiblePanel1">

e no final:

var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});

Onde tem CollapsiblePanel1 continue a contagem modificando no inicio e no final para CollapsiblePanel2 e assim por diante, tome cuidado para não se esquecer de alterar nenhum deles(um no começo e duas vezes no final), outro detalhe é cuidado para não confundir a letra l com o numero 1 quando for modificar a contagem, aconteceu comigo quando estava escrevendo essa explicação. E assim poderá usar quantas vezes quiser o menu expansível no seu blog. Você poderá ver isso em funcionamento em nossa página de duvidas frequentes.

Veja também:
Como colocar menu com sub menu no blog
Barra de rolagem na lista de blogs
Usar palavras chave e descrição no blog para ganhar mais visitas

Postagem expansível com miniatura da imagem

2009-05-28T14:19:00.008-03:00

Muitas pessoas perguntam sobre como fazer aparecer somente um resumo da postagem e no final escrito leia mais… para clicar e ver a postagem completa encontramos um código que faz isso e ainda mostra uma miniatura da imagem junto com esse resumo do texto, ou seja, é um dos melhores jeitos de mostrar um link leia mais para postagens expansíveis. Além disso, não é necessário fazer alteração alguma nos texto que você já publicou quando colocar os códigos todas as postagens mudam automaticamente para o sistema expansível.

Entre na pagina editar html(não clique para expandir o modelo) e procure pela tag </head> e coloque esse código antes dessa tag.

<script type='text/javascript'>
summary_noimg = 330;
summary_img = 300;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://acessoriosparablogs.com.br/scripts/resumopost.js' type='text/javascript'/>

Clique para salvar depois clique para expandir o modelo e procure por < data:post.body/ > apague essa linha e cole esse trecho no lugar:

<p><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leia mais...</a>
</span></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></p>

Clique para visualizar o blog e se estiver tudo certo salve as alterações no modelo e já está tudo pronto, agora seu blog mostra apenas um resumo da postagem e uma miniatura da imagem e quem gostar pode clicar para ver o texto inteiro.

Se quiser podemos personalizar esse código mudando a quantidade de caracteres que aparecem no resumo e o tamanho da miniatura da imagem, veja abaixo:

summary_noimg = número de caracteres do resumo se o texto não tiver imagens
summary_img = número de caracteres do resumo se o texto não tiver imagens img_thumb_height = Altura da miniatura da imagem
img_thumb_width = Largura da miniatura da imagem

Na segunda parte do código tem escrito 'data:post.url'>Leia mais...</a> esse leia mais é o texto que aparece para clicar e expandir a postagem então você pode escrever o que desejar aqui, mas cuidado para não apagar os sinais do código, modifique deixando o trecho assim 'data:post.url'>Texto aqui</a>. Para formatar esse texto entre na pagina editar html e coloque junto com os estilos CSS isso aqui:

.rmlink a{border: 1px solid #666666}
.rmlink a:hover{border: 1px solid #000000}

aqui coloquei apenas bordas para dar um exemplo, mas pode usar qualquer tipo de formação CSS que desejar.

Acho que essa é uma maneira bem melhor do que usar aquela outra explicação que precisa fazer alterações em cada postagem, mas se quiser ver o outro jeito tem na Ajuda do Blogger.

Se quiser veja o blog Meu Jornal estou usando esse código nele para demostração.

Veja também:

Fazer menu com submenu
Formatar o texto usando CSS
Imagem seguindo o ponteiro do mouse
Mostrar o número total de postagens e comentários
Colocar imagem na barra de endereços