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

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzzFtLJ_-R6-r9ZD2_U0e1Pa4zN4pZ900csZYulSjFmxfz4lrRpY_anoHfmTZPBlq58CvDQz1bG1VNLwLF1RzSkEivQCgKGlj0Zp3mYXlgU9Qh4Am3J3tx0GR2ED91njgLXYGsHsRNP28/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9KBAsqaZt_AXQGSnMgjuSxrI5uBmhgr0O5G6UqbJCTGliHLUKwZxYrG4h_vaFyREavSRZsxmOCWxfMlJl5D2idz27t0SG9poq1LWmxZcWfNgUlggK3Jv8EGJsQKBco-MIUVB6Fd1a24Q/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