Dicas para Blogs e Sites

Vamos mostrar como reduzir a url das postagens do seu blog antes de enviar para o Twitter, assim quando seus visitantes quiserem mandar alguma de suas postagens ficará mais fácil, pois sobrarão mais caracteres para que escrevam seus comentários. É com um código que vamos reduzir o endereço da pagina e enviar juntamente com esse endereço reduzido o titulo de sua postagem para o Twitter.
Mais informações »

Marcadores: Conteúdo, Mais visitas, Twitter

Muita gente procura como colocar a ferramenta de zoom (aumentar e diminuir o texto) no blog, então encontramos esse código que funcionou perfeitamente no Internet Explorer e Firefox. O jeito de colocar essa ferramenta no seu blog é muito simples, basta entrar na pagina layout, adicionar gadget, html/javascript e colar o código abaixo:
Mais informações »

Marcadores: Acessórios, Códigos, Ferramentas, Scripts

Em vez de mostrar a barra padrão do blogspot que tal criar o seu próprio menu personalizado e colocar no topo da pagina no lugar da barra do blogger? Parece complicado, mas só precisamos colocar dois trechos de códigos e claro substituir os links no menu e depois de instalado poder personalizar os botões do menu como quiser.
Mais informações »

Marcadores: Acessórios, Códigos, Personalizar

Em vez de colocar uma os marcadores do blog em forma de menu que tal mostrar como um letreiro digital (texto deslizando pela tela do computador)? Parece bem legal e o melhor muito fácil de fazer.

O primeiro passo é adicionar normalmente os marcadores (pagina layout, adicionar gadget, marcadores) no seu blog em forma de menu normal (lista), coloque um título qualquer neste gadget, salve e entre na pagina editar html. Antes de começar sugerimos fazer um backup do seu template, assim não correrá o risco de danificar o seu template.

Agora clique para expandir o modelo e procure pelo título que colocou nos seus marcadores, em nosso exemplo está com o nome Menu por assuntos. Veja abaixo como é o código original dos marcadores, note que o titulo do marcador aparece na primeira linha:

<b:widget id='Label1' locked='false' title='Menu por assuntos' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Agora troque o trecho em negrito por esse aqui:

<marquee onmouseout='this.start()' onmouseover='this.stop()' scrollamount='1' scrolldelay='1'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</b:loop></marquee>

Clique para visualizar seu blog e se aparecer corretamente salve as alterações. Para melhorar a visualização dos marcadores sugerimos acrescentar um espaço entre as palavras, para fazer isso é muito simples, veja na primeira linha do código dos marcadores:

<b:widget id='Label1' locked='false' title='Menu por assuntos' type='Label'>

A parte id='Label1' identifica e torna possível formatar esse gadget separadamente, veja o que está escrito na id do seu blog, então ainda na pagina editar html encontre:

]]></b:skin>
</head>

E coloque o código abaixo antes dessas linhas.

#Label1 a{padding:10px}

Lembre-se a parte Label1 é apenas um exemplo precisa usar como aparecer no seu blog. Assim teremos um espaço separando as palavras e se quiser pode usar esse mesmo estilo para dar uma formatação especial nos links dos seus marcadores. Se quiserem vejam aqui como modificar o código do letreiro digital, ele controla a direção e velocidade que o texto desliza pela sua pagina. Veja em nosso blog Dicas de Sites e Interessantes os marcadores deslizando pela pagina.

Marcadores: Códigos, Personalizar

Quando clicamos em um dos marcadores do blog sempre aparece à mensagem avisando que estamos vendo somente as postagens daquele marcador e um link para mostrar todas as postagens (pagina inicial), por exemplo: Mostrando postagens com marcador Twitter. Mostrar todas as postagens.


Muitas pessoas não gostam disso e escreveram perguntando como retirar esse aviso sobre mostrar somente um marcador, o código para fazer isso é muito simples e fácil de usar, entre na pagina editar html e antes de ]]></b:skin> coloque esse código:

.status-msg-wrap{display: none;}

Clique para salvar e já está pronto, agora quando clicar em um dos marcadores do blog não aparecer mais a mensagem nem o link para mostrar todas as postagens. Outra coisa que já perguntaram algumas vezes é como não mostrar o Assinar: Postagens (Atom), o procedimento é basicamente o mesmo, entre na pagina editar html e procure por:

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

No seu blog não tem a linha display: none; é justamente ela que faz ocultar o link para assinar o feed, se não achar esse trecho é só colocar no html do blog e pronto. E já que estamos falando sobre como não mostrar coisas no blog vale a pena relembrar a dica sobre como ocultar a barra padrão do blogger que fica no topo da pagina.

Se quiser trocar a frase Mostrando postagens com marcador Responsabilidade Social. Mostrar todas as postagens, entre na pagina editar html, clique para expandir o modelo e procure por:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>

Apague o trecho <data:navMessage/> e coloque no lugar o texto que desejar, agora é só salvar e visualizar uma das paginas do marcadores que já aparecerá a nova mensagem. Porém isso retira também o link para sua pagina inicial, portanto se quiser manter o link precisa colocar o código <a href="endereço do seu blog">pagina inicial</a> quando alterar a mensagem.

Marcadores: Conteúdo, Html

Chegando o final de ano algumas pessoas pediram um código para colocar neve caindo no blog, então preparamos esse código:

<script type="text/javascript">
endereco = "http://img42.imageshack.us/img42/5508/neve1.png";
</script>
<script type="text/javascript" src="http://acessoriosparablogs.com.br/scripts/neve.js"></script>

Copie e coloque no seu blog pela pagina layout, adicionar gadget, html/javascript. Este gadget pode ficar em qualquer parte da sua pagina, caso queira aqui você poderá encontrar mais Enfeites de Natal para Blogs Você pode usar com a imagem que desejar, ou seja, não é necessário utilizar somente com imagens que simulem neve poderiam ser corações caindo pelo blog ou qualquer outra imagem, você só precisa hospedar a imagem e colocar no lugar indicado no código.


Abaixo temos 4 imagens que podem servir como neve para utilizar alguma delas sugerimos salvar, depois hospedar no ImageShack e colocar o endereço da imagem no código no lugar que está http://img42.imageshack.us/img42/5508/neve1.png, se precisar de ajuda veja aqui como hospedar e usar o endereço certo da imagem.






Não fizemos o código já com o endereço de cada imagem, pois se muitas pessoas usarem a mesma imagem isso pode fazer com que ela seja removida do site de hospedagem por se tratar de um serviço grátis. Espero que esse código seja útil para enfeitar o seu blog para o Natal e outras ocasiões também, afinal como já dissemos você pode colocar qualquer imagem flutuando pelo seu blog de maneira bem fácil e rápida.

Quando visualizar seu blog pode ter a impressão que os flocos de neve passam apenas uma vez, mas não é isso que acontece, na verdade eles percorrem a pagina inteira até o final e não somente a parte que aparece na tela, então depois de aparecer a primeira vez os flocos demoram alguns segundos para começar novamente, mas isso é normal, veja que após ficar na pagina alguns segundos o efeito fica muito melhor que no inicio.

Para utilizar esse código com os novos modelos de template do blogger (designer do modelo) você deve colocar o código na pagina editar html, logo após a linha que abre o body:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Talvez no seu html não seja examente igual mas o importante é <body ......>, então logo abaixo desta linha cole o código que citamos no inicio deste tutorial sobre colocar o efeito neve no seu blog.

Aproveite e veja aqui a demonstração de um outro código para fazer o efeito neve no blog, este outro código é mais facil para colocar no blog porque só precisa adicionar um gadget sem mexer diretamente no html do blog.

Marcadores: Códigos, Ferramentas, Personalizar, Scripts

Uma grande dificuldade que vejo entre os blogueiros é acertar a distancia entre as colunas e a postagem do blog, ou seja, às vezes os menus ficam encostados um no outro ou muito distante, isso acontece tanto em relação às colunas como os posts do blog afinal todos são colunas. Para corrigir esse problema é só colocar padding-left ou padding -right no código da coluna que deseja dar um espaço.

Fazer essa correção pode parecer um pouco confusa, pois existem muitos modos de fazer a mesma coisa e, além disso, as variações de lado também podem confundir na hora de alterar os códigos, então vamos primeiro localizar o que vamos alterar. Vamos usar o exemplo da coluna das postagens estar encostada na coluna do lado esquerdo, você pode entrar na pagina editar HTML e procurar por:

#main {width: 490px;color:#000000;float: left;line-height: 140%;padding-left:5px;….

E colocar padding -left:15px, se já tiver algo assim no seu blog apenas altere o valor (não repita o mesmo código duas vezes) isso fará surgir um espaço de 15 pixels entre a coluna das postagens e o menu do lado esquerdo, note que aumentamos o espaço ocupado pela coluna (mais 10 px) então isso pode fazer que uma das colunas do seu blog vá parar no final da pagina por falta de espaço então normalmente quando fazemos esse tipo de alteração devemos reduzir a largura da coluna que em nosso exemplo é 490 isso está logo no inicio, assim manteremos a mesma largura total que a coluna ocupava. Note como funciona a coluna tinha 490 de largura mais 5 de margem, ou seja, 495, se aumentarmos a margem para 15 vamos diminuir a largura da coluna para 480 assim continuaremos ocupando 495.

O mesmo que fizemos com a coluna main(postagem) poderia ser feito com qualquer uma das colunas do blog. Para saber qual lado deve colocar a margem veja o float que está no código, geralmente a margem deve ser do mesmo lado. Outro detalhe é que dependendo do seu template usar padding pode atrapalhar no layout (dependendo das imagens e cores de fundo) então o mesmo que fizemos com padding poderia ser feito com margin, assim margin-left:15px; e tudo funciona do mesmo jeito apenas trocamos o código. Apesar de funcionar do mesmo padding e margin não são exatamente a mesma coisa você pode ver aqui a diferença entre usar padding ou margin, outra dica relacionada com esse tema é como alterar as larguras do blog.

Outra coisa que não poderíamos deixar de falar é que é muito bom visualizar seu blog em vários navegadores (pelo menos Internet Explorer e Firefox), pois é possível haver uma variação na aparência do seu blog entre eles.

Marcadores: Códigos, Html, Personalizar