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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCbK-G4LDP0GwfPNR_EfEopgR3Dkie50tHVQF2zTED0dm7OT5uTOe6F6fjx7anW4nm8kZsSDiYoR4xbyTouEFqyg20pOU0ZFWEgBeruEvvM0LpxP6Hi3Z9Bq0Fn5XY2w7rQ4T_eAxNoy64/s320/arrow_left.png' title='Voltar à Área Padrão do Post'/></a> <a href='javascript:agrandarentrada();'><img alt='Aumentar Área do Post' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXI6zMQPjLAaqMG1Ol9nC0AaJFi7KF99lqKOoo3GyDER6jEK91RGb7bQRiYn-6zw1Wnhi036_Fmife7_Qw8_vvgQPXWwBBoA9RFXnGH2Ftd2JqkZrK9sWhyphenhyphen_Tg4NBiEEz6u2BCzd01uTUI/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.
5 Comentários
Caio, um ótimo código, incrivelmente incrivel ..rsrs
21 de março de 2012 às 11:55Parabéns pelo Ótimo artigo que desenvolveste, gostei!
Abraços!
Que bom Que Gostou Daniel, Agradeço pelo elogio e Por participar do nosso Blog.
21 de março de 2012 às 12:04Fico muito Grato.
Abração, Até mais.
Não há de que!
21 de março de 2012 às 12:21Vish, sempre precisei disso, awe valeu por compartilhar ficou massa.
22 de março de 2012 às 15:20seu blog e excelente. parabéns. Flw.
Que bom que gostou, Obrigado por elogiar nosso Blog. Até mais.
22 de março de 2012 às 15:57Abraços.
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!