.png "English"){kind=small}
Script Aumentar Diminuir Letra do Texto
Esse efeito, "aumentar diminuir a fonte de texto", torna seu blog muito mais profissional. Sem fala que é super simples de instalar ele no seu blog. Esse hack é muito útil, por que se uma pessoa não enxerga direito, ela pode aumentar o testo do seu blog e consequentemente, você não irá perder visitas.
Tudo isso foi deselvolvido pelo Clau (Mundo
Blogger) e pelo Matheus Serafim (Personalizando), como foi eles que deselvolveram eu tenho abrigação de "dar os Créditos" a eles e isso já foi feito.
Como tutorial embora tendo só 3 (três) passos, ele é muito longo. Então nos iremos organizar ele por partes.
Passo 1: Intalar o Script No seu Template
Como de costume faça um backup do template original do seu blog. Depois entre no painel do Blogger, Clique em "Design", depois que carregar a página clique em "Editar HTML", lembrando não prescisa selecionar a opção "expandir modelos de widgets". Procure por essa tang:
Se você achou, cole o código a seguir ANTES da tang acima:
<!-- Script Aumentar/Diminuir Fonte by http://www.mundoblogger.com.br/ -->
<script type='text/javascript'> //<![CDATA[ function fontMais(){ var obj = document.getElementById("textoFonte"); if (obj.style.fontSize==""){obj.style.fontSize="12px"}; if (obj.style.fontSize=="10px"){obj.style.fontSize = "12px";} else if (obj.style.fontSize=="12px"){obj.style.fontSize = "15px";} else if (obj.style.fontSize=="15px"){obj.style.fontSize = "17px";} else if (obj.style.fontSize=="17px"){obj.style.fontSize = "19px";} else if (obj.style.fontSize=="19px"){obj.style.fontSize = "21px";} } function fontMenos(){ var obj = document.getElementById("textoFonte"); if (obj.style.fontSize==""){obj.style.fontSize="12px"}; if (obj.style.fontSize=="21px"){obj.style.fontSize = "19px";} else if (obj.style.fontSize=="19px"){obj.style.fontSize = "17px";} else if (obj.style.fontSize=="17px"){obj.style.fontSize = "15px";} else if (obj.style.fontSize=="15px"){obj.style.fontSize = "12px";} else if (obj.style.fontSize=="12px"){obj.style.fontSize = "10px";} } //]]> </script> <!-- Fim Script Aumentar/Diminuir Fonte by http://www.mundoblogger.com.br/ --> |
Salve Tudo.
Obs: não altere nada no código se não irá funcionar.
Passo 2: Imagens clicaveis (Efeito)
Se você fechou a página do "Editar HTML", abra-a novamente e selecione a opção "expandir modelos de widgets". agora procure pela Tang: . Agora cole esse código logo abaixo dela:
| <b:if cond='data:blog.pageType == "item"'> <a alt='Aumentar fonte' href='javascript:fontMais()'> <img src='http://img405.imageshack.us/img405/2006/fontmais.gif'/></a> <a alt='Diminuir fonte' href='javascript:fontMenos()'><img src=' http://img707.imageshack.us/img707/359/fontmenos.gif'/></a> </b:if> |
Esse código está configurado só para aparecer na postagem do seu blog (ou sejá, na página inicial não irá funcionar no seu blog). Se você quiser, você pode fazer com que o script funcione na página inicial do seu blog. Basta você apagar a parte vermelha do código e pronto.
Passo 3: Link Para Funcionar as Fontes
Ainda na página "Editar HTML", selecione a opção "expandir modelos de widgets" e procure pelo código a seguir:
| <div class='post-body entry-content'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> |
Se você encontreu, substitua TODO o código acima por esse abaixo:
| <div class='post-body entry-content'> <div id="textoFonte"> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> </div> |
Agora Salve o Modelo. Vejá seu blog se deu tudo certo ok. Se não deu certo, volte o modelo que você baixou antes.
Eu agradeço a Clau (Mundo Blogger) e o Matheus Serafim (Personalizando) por ter deixado eu a "divulgar" ou reproduzir o código que eles(as) criaram.
