Botões Aumentar Fonte, Diminuir Fonte, Imprimir e Fonte Padrão

► +A +/- -A
Olá, neste tutorial de hoje, venho trazendo um javascript bem legal, nele venho trazendo como colocar os botões de Aumentar Fonte, Diminuir Fonte, Imprimir e Fonte Padrão, apesar de ser bonitos e legais, dão uma aparência agradável ao seu blog.


Mas vamos ao tutorial:


Tutorial:
1. Acesse o Painel do seu Blog e clique na Guia Modelo.
2. Depois disso clique no Botão "Editar HTML".
3. Depois clique na Caixa "Expandir Modelos de Widgets"
4. Agora segure as teclas CTRL+F e procure por:



]]></b:skin>


5. E ACIMA dele cole o seguinte código:


.Buttons-post {float: right;text-align: right;display: inline;background: #DCDDDF;padding: 0px;padding-top: 10px;padding-bottom: 10px;width: 128px;padding-right: 12px;border: 1px solid gray;}
.Buttons-post a {color: white;background: url("http://3.bp.blogspot.com/-dh-4LvOcdso/TpFVqWBCIWI/AAAAAAAACMk/hnC9q1cYrm4/s1600/repeat-background-fonte.jpg") repeat-x;border: 1px solid #107EA3 !important;text-decoration: none;margin: 0px;padding: 5px 5px;outline: 0px solid white;-moz-border-radius: 2px;-webkit-border-radius: 2px;-goog-ms-border-radius: 2px;border-radius: 2px;text-shadow: 0px 0px white !important;font-weight: bold;}


6. Em seguida segure as teclas CTRL+F ( Atalho de busca ) novamente e procure por:


</head>


7. E ACIMA dele adicione o seguinte código:


<script src='http://dl.dropbox.com/u/44914301/codigos/fonte.js' type='text/javascript'/>


8. Depois segure as teclas CTRL+F ( Atalho de busca ) novamente e procure por:


<div class='post-body entry-content'>






9. E ABAIXO dele cole o seguinte código:


<div id="textoFonte">




10. Em seguida procure a linha "<data:post.body/>" que fica logo abaixo do código do passo 8.
11. E ao lado direito de "<data:post.body/>" adicione o seguinte código:


</div>


12. Agora pressione CTRL+F novamente e procure por:


post-footer-line-1'>


13. E até que enfim, abaixo do código citado acima adicione o javascript abaixo:

<div class='Buttons-post'>
<a href='javascript:fontMais()' title='Aumentar a fonte'>+A</a>
<a href='javascript:fontReset()' title='Resetar Fonte'>+/-</a>
<a href='javascript:fontMenos()' title='Diminuir Fonte'>-A</a>
<a href='javascript:window.print()' target='_self' title='Imprimir esta página'><img align='absmiddle' border='0' oncontextmenu='return false' ondragstart='return false' src='http://2.bp.blogspot.com/-d8-slI9GtX0/TpFU7ID7e3I/AAAAAAAACMg/Lc-nf6_juW8/s1600/print.png'/></a>
</div>



Pronto, agora e só clicar em salvar modelo.
Mas este tutorial foi grande né? mas terminamos, Mas preste atenção em todo o tutorial pois qualquer descuido pode causar algum erro e por isso e recomendando que você faça o backup do seu template.
                                                                                                      JavaScript por: Clau - Mundo Blogger
Botão imprimir e designer por: Iago Melanias - Blogando com Facilidade
► Postagens Relacionadas:

5 Comentários

Marcos disse...

Olá, Cara no meu blog não funcionou, não sei porque, uso uma aqui, então quero usar esta, e quando eu vou colocar, aparece um erro tem como você me ajudar?
Agradeço!

21 de outubro de 2011 17:38
Caio Vinicius disse...

Olá Marcos, O problema é: você já tinha outros botões Instalados em seu Template, então eles entraram em conflito, provavelmente, você deve remover o(s) código(s) relacionados aos outros botões!
Boa Sorte!

21 de outubro de 2011 17:44
Marcos disse...

Muito obrigado cara, adorei estes botões deu certissimo, Valeu!

25 de outubro de 2011 13:29
Anonimo disse...

O código deu certo, mas ficouno rodapé do meu blog de testes. Eu uso o Modelo do Blogger Espetacular Ltda.

25 de novembro de 2012 00:31
Matheus Amorim disse...

Muito obrigado por compartilhar o código. Infelizmente não consegui adicionar no meu por ser um template que criei totalmente diferente. Sim, tem as variáveis só que fica dando erro no .XML ao salvar. Mais agradeço mesmo assim pela liberação do código =D

13 de março de 2013 23:23

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!