Follow Us @soratemplates

sábado, 23 de junho de 2012

Escolha o Tamanho da Fonte com Mootools

Olá, tudo bem?
Antes de dar incício ao post, quero dizer que caso você tenha enviado uma mensagem pelo formulário de contato e ainda não obteve resposta, por favor, me avise; algumas vezes os e-mails não são enviados como deveriam ser ok? Agora, vamos a postagem.
De vez em quando vejo em alguns blogs os leitores pedindo para que o autor aumente o tamanho da fonte, isso até aconteceu comigo; as letras pequeninas são mais fofas, na minha opinião, porém, não agradam a todos ou dificultam a leitura de alguns. Pensando nisso, estive pesquisando e encontrei uma solução ótima para ambas as partes: deixar que o leitor controle o tamanho das letras de nosso blog. E para isso, basta algumas edições aqui e ali no template, adicionando um script chamado Mootools ^-^ Testei no modelo Picture Window do Blogger, editado pelo designer do Blogger.
Quer saber como?

1. Acesse a área de edição de HTML do seu modelo e procure por </head>; cole o código a seguir antes dele:
Estilo 1:
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent(&#39;domready&#39;, function(){

var el = $(&#39;myElement&#39;),
font = $(&#39;fontSize&#39;);

new Slider(el, el.getElement(&#39;.knob&#39;), {
steps: 35, // Tamanho máximo da letra
range: [8], // Tamanho mínimo da letra
onChange: function(value){
font.setStyle(&#39;font-size&#39;, value);
}
}).set(font.getStyle(&#39;font-size&#39;).toInt());

});
</script>

<style type='text/css'>
div.slider {
width: 220px; /* largura da barra */
height: 16px; /* altura da barra */
background: #fcc; /* cor da barra */
border-radius:10px;/** arredondamento **/
box-shadow:1px 2px 3px #fee;/** sombra **/
}
div.slider div.knob {
background: #fee; /* cor do seletor*/
width: 16px; /* largura do seletor */
height: 16px; /* altura do seletor */
cursor: move;
}
div#fontSize {
height: 40px;
}
</style>
Estilo 2:
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent(&#39;domready&#39;, function(){

var el = $(&#39;myElement&#39;),
font = $(&#39;fontSize&#39;);

new Slider(el, el.getElement(&#39;.knob&#39;), {
steps: 35, // Tamanho máximo da letra
range: [8], // Tamanho mínimo da letra
onChange: function(value){
font.setStyle(&#39;font-size&#39;, value);
}
}).set(font.getStyle(&#39;font-size&#39;).toInt());

});
</script>

<style type='text/css'>
div.slider {
width: 220px; /* largura da barra */
height: 20px; /* altura da barra */
background: #fcc; /* cor da barra */
border-radius:10px;/** arredondamento **/
box-shadow:1px 2px 3px #fee;/** sombra **/
}
div.slider div.knob {
background: url(http://4.bp.blogspot.com/-67dqQr9eRuU/TdvUK8no-6I/AAAAAAAAAG0/uy_SaLN7brc/s1600/86289.gif) no-repeat; /* cor do seletor*/
width: 20px; /* largura do seletor */
height: 20px; /* altura do seletor */
cursor: move;
}
div#fontSize {
height: 40px;
}
</style>
2. Agora procure por esta área:
...
<div class='column-center-inner'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>

</b:section>
</div>
Nem todo template tem as linhas acima de forma idêntica, por isso destaquei em negrito a parte encontrada em todos eles. Em alguns, no lugar de <div class='column-center-inner'> aparece <div id='main-wrapper'>. Adicione antes de qualquer um dos dois o que está em negrito no código abaixo:

<div id='fontSize'>
<div class='column-center-outer'>
 <div class='column-center-inner'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
</div>
</div>
Visualize e se estiver tudo bem, salve. Você não vai ver nada de diferente por enquanto.

3. Entre em Layout - Adicionar um novo gadget - HTML/JavaScript, e cole isso:
<div id="myElement" class="slider">
<div class="knob"></div>
</div>
<p>TEXTO TEXTO TEXTO</p>


Basta substituir o texto por outro que quiser, salvar e pronto.
Quando o leitor movimentar a barrinha, as letras aumentam ou diminuem.
Espero que gostem e beijus<3
Tutorial encontrado em: Ciudad Blogger (link na F.A.Q)

12 comentários:

  1. Nyuuuuuuu *w*
    Mais um tutorial suuper útil do seu blog :t:
    Eu realmente gosto dos tutoriais que vc passa aqui, eles são úteis e símples eu mesma já usei um deles no meu blog *w*
    O que ensina a usar cabeçalhos diferentes *u*

    Bye bye
    Kissu's

    ResponderExcluir
    Respostas
    1. Eu fico feliz por poder ajudar ^^
      Aquele dos cabeçalhos é bom neh :3 Na dúvida, use dois cabeçalhos :d:
      Obrigada e beijus ;3

      Excluir
  2. Tutorial bem útil! :cat:

    Beijos,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br (agora com TEMPLATE ANIMADO)

    ResponderExcluir
  3. Ai flor, brigada por seguir meu blog, estou muito feliz ;3 Desculpe-me por só esta retrebuindo o comentário agora, tinhna deixado para depois e acabei me esquecendo.

    Mais parabéns por esse seu blog lindo, um grande beijo ;*

    ResponderExcluir
  4. EU MORRI E VIM PRO CÉU, OU SEU BLOG É UMA MIRAGEM? HAHA
    gente que fofura é aqui, na moral, adorei tudo, os posts, o layout, tudo mesmo *o*
    tudo muito minha cara haha
    agora uma dica/critica: essa parte do post que ta em itálico tu podia ou mudar a fonte ou não colocar itálico, pq sei lá, pra mim pelo menos dificulta ver os codigos D:
    enfim, arrazou em *o* hehe bjbj

    http://rascunhosdasuuka.com

    ResponderExcluir
  5. Yoo fofa-chan *-*
    sigo seu blog a muchu mucho mucho tempo *w*
    amo suas postagens e praticamente fico babando arco-íris nesse blog tom fofo *u*
    agora que tive coragem de fazer o meu porque bem..
    não sei mecher --'
    em internet! mal sei mecher no face D:
    entom.. se voce tivesse um tempinho...
    poderia fazer um template decente pra min ? D:
    muito arigatou por ter esse blog lindo *0*

    ResponderExcluir
  6. Estou participando de uma votação no blog http://photoscapebrushes.blogspot.com.br/ para que meu blog seja divulgado durante um mês lá ! Por favor me ajude e vote no Cantinho da CAPS !

    Beijos,
    Muito obrigada e me desculpe pelo incomodo .

    ResponderExcluir
  7. Imagina o quanto eu tô feliz por vcs gostarem meninas!!!
    :v:Caps: fico feliz que tenha gostado e depois passo lá no outro blog pra votar ok? Beijus<3
    :v:Ge e :v:Sabrina que bom que gostaram! Beijus<3
    :v:Vitória: De nada; seu blog é muito fofo! Beijus<3
    :v:Suelen: Obrigada ^^ Eu deixo apagadinho assim nos códigos para ficar em destaque durante a seleção do texto :3 Beijus <3
    :v:Bia: muito obrigada mesmo de coração! Bem, eu não faço templates por encomenda ainda, até porque sei pouco também sobre HTML, estou aprendendo a cada dia mais, mas acho que ainda não o suficiente para um layout especial para alguém especial, como são as pessoas que acompanham.
    Eu disponibilizei um template que usei no Reino Kawaii como layout free ou base para quem gostar:
    http://reinokawaii.blogspot.com.br/2012/04/template-kawaii-free.html
    Talvez você goste dele ou use como base em seu blog.
    Quando me sentir mais segura, vou começar a fazer templates por encomenda ok?
    Beijus<3

    Obrigada a todas!!!

    ResponderExcluir
  8. Muito legal esse script, talvez eu use em algum lay ^^ Que saudade do seu blog, nunca mais tinha passado por aqui!
    kissus
    Cherry Bomb || Fanpage

    ResponderExcluir
  9. Oi Liah ^^
    Seja sempre bem-vinda! Obrigada e volte mais vezes ok? Beijus:v:

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart