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

No tutorial de hoje vamos aprender como colocar os botões de aumentar fonte, diminuir fonte, fonte pardão e imrpimir. Esses botões fica em cada uma das postagens de seu blog, dando um estilo agradável e atraente e também ajudando a muitos visitantes de seu blog.

Vamos ao Tutorial
1. Acesse o painel de seu blog
2. Clique na guia "Modelo"
3. Clique no botão "Editar HTML"
4. Em seguida clique na caixa "Expandir modelos de Widgtes"
5. Segure as teclas Ctrl+F e procure por:

]]></b:skin>

6. Acima da tag citada 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;}<br /> .Buttons-post a {color: white;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW-1yMbCcGYJEQuygNvaL9NIdwf-GKwVSD4tzWQmrW2kp7gfX1m7Cy_TVrNxZgGd-PhzjECvug7vZvAIT_XrYxi31636_VDs5YLYMLEMJZtRCmDqoPBfNqWv3PMqNdixlS9URldZb0TZE/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;}

7. Agora procure por ( Ctrl+F ):

</head>

8. E cole o código abaixo acima da tag ( </head> )

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

9. Procure por:

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

10. Cole abaixo o seguinte código:

<div id="textoFonte">

11. Agora localize a linha:

<data:post.body/>

12. Ao lado direito dele cole a seguinte tag:

</div>

13. Após isso procure por ( Ctrl+F ):

post-footer-line-1'>

14. E finalizando cole abaixo dele o seguinte código:

<div class='Buttons-post'><a href='javascript:fontMais()' title='Aumentar a fonte'>+A</a><br /> <a href='javascript:fontReset()' title='Resetar Fonte'>+/-</a><br /> <a href='javascript:fontMenos()' title='Diminuir Fonte'>-A</a><br /> <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/AVvXsEh1nk0KcGVFr8G1p4oTHqxER9sTHkZneZMixYzyOy-dhw080AZnkWqUspHVPn3rAJpm564yMn6srl2PRo9A4TMK1kun2NiUZ4s3FnlcAScDMD84ICcriHGSMNnM-H30WOkMptjc75QutX8/s1600/print.png'/></a><br /> </div>


Agora é só clicar em  "Salvar o Modelo"

Gostou? Compartilhe:

Tweet