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'/>Estilo 2:
<script type='text/javascript'>
window.addEvent('domready', function(){
var el = $('myElement'),
font = $('fontSize');
new Slider(el, el.getElement('.knob'), {
steps: 35, // Tamanho máximo da letra
range: [8], // Tamanho mínimo da letra
onChange: function(value){
font.setStyle('font-size', value);
}
}).set(font.getStyle('font-size').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>
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>2. Agora procure por esta área:
<script type='text/javascript'>
window.addEvent('domready', function(){
var el = $('myElement'),
font = $('fontSize');
new Slider(el, el.getElement('.knob'), {
steps: 35, // Tamanho máximo da letra
range: [8], // Tamanho mínimo da letra
onChange: function(value){
font.setStyle('font-size', value);
}
}).set(font.getStyle('font-size').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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zWOdJHnCUbGoqpx8Ja7qbYeoWpnYUP0R9EPAwljBwBFp6wRtBQGVSBd977FvQuwLsY_RbuMBtHAlLWOUOBmODbdH2-Z1hTeWEZyFdE3II32fxUIyT-rQkGCx3rmOC7aD2HhaLQeoIlY/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>
...
<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>
<div id='fontSize'>Visualize e se estiver tudo bem, salve. Você não vai ver nada de diferente por enquanto.
<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>
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)
Nyuuuuuuu *w*
ResponderExcluirMais 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
Eu fico feliz por poder ajudar ^^
ExcluirAquele dos cabeçalhos é bom neh :3 Na dúvida, use dois cabeçalhos :d:
Obrigada e beijus ;3
Tutorial bem útil! :cat:
ResponderExcluirBeijos,
Camila Angelina
http://cantinhodacaps.blogspot.com.br (agora com TEMPLATE ANIMADO)
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.
ResponderExcluirMais parabéns por esse seu blog lindo, um grande beijo ;*
EU MORRI E VIM PRO CÉU, OU SEU BLOG É UMA MIRAGEM? HAHA
ResponderExcluirgente 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
que interresante,amei :)
ResponderExcluirÓtimo tutu! Adoreei *u*
ResponderExcluirBezoos >> My Candy Space
Yoo fofa-chan *-*
ResponderExcluirsigo 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*
Imagina o quanto eu tô feliz por vcs gostarem meninas!!!
ResponderExcluir: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!!!
Muito legal esse script, talvez eu use em algum lay ^^ Que saudade do seu blog, nunca mais tinha passado por aqui!
ResponderExcluirkissus
Cherry Bomb || Fanpage
Oi Liah ^^
ResponderExcluirSeja sempre bem-vinda! Obrigada e volte mais vezes ok? Beijus:v: