Aumentando Aréa dos posts para se ter uma leitura melhor

► +A +/- -A
Anuncio
Olá Amigo Leitor do Tecnoblog, No artigo que você esta lendo agora venho ensinando como instalar um "hack" de expandir a areá de do post para que o leitor possa ter uma leitura mais privilegiada, um dos problemas comuns são dos leitores que possuem problema de visão, então esta é uma ferramenta muito boa para seu blog, Então vamos ao tutorial abaixo.


Instalando no Blog

1. Faça o Login no Blogger
2. Em seguida vá na aba Modelo
3. Depois clique no botão Editar HTML.
4. Segura as Teclas CTRL+F e procure por:

</head>

5. E acima da Tag Citada Acima Adicione o Seguinte Código: 

<script type='text/javascript'>
//<![CDATA[
function agrandarentrada(){
div = document.getElementById("sidebar-wrapper");
div.style.display="none";
div = document.getElementById("main-wrapper");
div.style.width="970px";
div.style.fontSize="16px";
}
function achicarentrada(){
div = document.getElementById("sidebar-wrapper");
div.style.display="";
div = document.getElementById("main-wrapper");
div.style.width="700px";
div.style.fontSize="12px";
}
//]]>
</script>



Ajuste as medidas destacadas de acordo com as características do seu blog:
Onde está escrito div.style.width="970px"; e div.style.fontSize="16px"; são as medidas da área de post depois de aumentada, 970px é o comprimento da área e 16px é o tamanho do texto. O comprimento pode ser encontrado em #outer-wrapper ou sumamos o comprimento do main-wrapper com o da sidebar-wrapper.
Em div.style.width="700px"; e div.style.fontSize="12px"; são as medidas da área de post do seu blog e o tamanho do texto dos posts do seu blog, 700px pode ser encontrado no #main-wrapper e 12px no body. Tenha em conta as margens que se encontram entre o main-wrapper e a sidebar-wrapper.

6. Agora Procure pelo Seguinte código:

<div class='post-body entry-content'>
<div class='post-header-line-1'/>
<data:post.body/>

7. Caso não ache o código que citei acima procure por este outro:

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

8. E acima do seguinte código que citei, procure pelo seguinte:

<a href='javascript:achicarentrada();'><img alt='Voltar à Área Padrão do Post' src='http://4.bp.blogspot.com/_WvACVGW1iPE/TESCN5imqaI/AAAAAAAABLw/nPZTbdTw8lI/s320/arrow_left.png' title='Voltar à Área Padrão do Post'/></a> <a href='javascript:agrandarentrada();'><img alt='Aumentar Área do Post' src='http://2.bp.blogspot.com/_WvACVGW1iPE/TESCQ1YcjdI/AAAAAAAABL4/Gk42jcjsLtQ/s320/arrow_right.png' title='Aumentar Área do Post'/></a> 

9. As partes Destacadas de Vermelho Poderão ser substitui-da por imagens personalizadas que você queira. Basta trocar as URL's


10. Agora Clique em Visualizar e  se estiver tudo certo. Clique em Salvar modelo.


Pronto, Tudo feito.
Até a próxima pessoal, e qualquer duvida basta comentar.

► Postagens Relacionadas:

5 Comentários

Daniel Silva disse...

Caio, um ótimo código, incrivelmente incrivel ..rsrs
Parabéns pelo Ótimo artigo que desenvolveste, gostei!

Abraços!

21 de março de 2012 11:55
Caio Vinicius disse...

Que bom Que Gostou Daniel, Agradeço pelo elogio e Por participar do nosso Blog.
Fico muito Grato.
Abração, Até mais.

21 de março de 2012 12:04
Daniel Silva disse...

Não há de que!

21 de março de 2012 12:21
Mufãnsblogs disse...

Vish, sempre precisei disso, awe valeu por compartilhar ficou massa.
seu blog e excelente. parabéns. Flw.

22 de março de 2012 15:20
Caio Vinicius disse...

Que bom que gostou, Obrigado por elogiar nosso Blog. Até mais.
Abraços.

22 de março de 2012 15:57

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!