Tutorial: Diminuindo e aumentando a fonte em um clique


Cá estou eu com um tutorial que eu me apaixonei assim que o vi. É muito útil mesmo. Bom, funciona assim. É um botão na postagem que faz com que o leitor possa aumentar e diminuir o tamanho da fonte do blog. E o legal é que não é a página toda. É apenas a área do texto. Aprendi no Mundo Blogger, mas preferi fazer um meu, com uma explicação mais simples. Vamos lá, aprender.

Entre em seu blog, em designer e em editar HTML. Marque a opção "Expandir Modelos de Widgets" clique em F3 ou em CTRL + F e procure por </head>

Agora pegue o código abaixo e cole ANTES de </head>
<!-- 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/ -->
Agora, procure por:  <div class='post-header-line-1'/>
Assim que achar, cole o código a seguir ABAIXO da tag indicada acima:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
Muito bem. Agora procure por: <data:post.body/>
A tag vai estar entre um código assim:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Apague todo o trecho acima. E o substitua por esse:
<div class='post-body entry-content'>
<div id="textoFonte">
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats --> </div>
</div>
Visualize primeiro, e salve se tudo estiver certo.
Eu já fiz esse tuto no Blog Milk Shake, eu adorei o resultado. É muito mais agradável para os leitores.
Espero que tenham gostado. Beijos meus docinhos ^^

15 comentários:

Bikoti disse...

ai desculpa eu errei e de um site de dominios , que eu paguei em torno de 20r$ a 15r$
#Bezos Rawr -----> Bikoti.com

Unknown disse...

Muito legal o tutorial, bem facil e simples. gostei muito. Visite meu cantinho e se gostar me siga, sigo todos de volta. TÔ te esperando lá!

http://anavidadeestilista.blogspot.com/

Ingrid Ramires disse...

Ah que legal gostei mt , é nem útil mesmo ^^, bjinhos Mary , tem post novo no BI
http://blogdaingridzinha.blogspot.com/

DELUXE disse...

Noossa realmente isso é MUITO útil, bom que não precisa ficar indo no personalizar. hauahua'

Beeijos
Giih
http://deluxemoda.blogspot.com

Raissa disse...

Que legal esse tutorial ,queria saber se aceita afiliação?
http://podemudardelink.blogspot.com/

IzaCarrion disse...

Adorei o tutorial. Ás vezes dá até preguiça de ir lá e trocar tudo novamente, Super útil!
http://prooximaparada.blogspot.com

Luuh Fernanda disse...

Adoreei seu blog...achei os tutorias que queriaa, aqui no seu blog..!
Mais achei fofiissimo , e obrigada pela sua visita la
bjs

www.dicasluh.blogspot.com

Maria Lua disse...

ótimo tutorial
http://perfeitateen.blogspot.com/

jackie Zanini disse...

ok linda então eu tirarei o milk Shake da enquete, ai depois vc resolve, BeijãO!

Anônimo disse...

adorei o tutorial rsrs *-* e o blog tbm, estou seguindo!
o cabeçalho do blog é muito fofo! rs
ah, poderia seguir devolta? iria ficar muito feliz rsrs
aah, sempre q puder , venho comentar aqui :3 rs
ah, tem novo post lá no meu blog, passa lá e comenta?

beijos e brigada
http://bnascimentooo.net.tc

Letícia ღ disse...

Hooy , eu ainda nao consegui te seguir >< mas continuo tentando ! Eu to com vagas de afiliados , eu queria saber se vc quer ser afiliada do meu blog ? Beijão ! www.cachinhosdamel.blogspot.com

Ayuzawa Misaki (Ray) disse...

Ah , já sabia disso , mas o código era bem maior , rs :3 Ah , flor , como descobriu meu blog ? Hahá u.u ' Pelo tumblr ? k k Enfim , beijos :3 Amei aqui , muito lindo , me apaixonei pelo layout *--* Já estou seguindo ! :D
http://i-say-life.blogspot.com/

Letícia ღ disse...

Fiz lá uma postagem especial só pra você ! tem umas fotos de cosplay , beijos !

LUANA ANDRADE disse...

Otimo tutorial,adorei aqqi ! *-*
te convido a visitar o meu blog e se gostar siga.
beijos , luh
www.paradateen1.blogspot.com

Dani Ribeiro disse...

Muito fofo o seu blog, viu? Estou seguindo ele, claro *-* Passa no meu depois?

Beijos, Dani.
onthefame.blogspot.com

Postar um comentário