Arquivo da tag: Códigos

Como colocar botão “Imprimir” no Blogger

Nesse tutorial de hoje vou mostrar para vocês como colocar em seu site ou blog um botão com a função de imprimir a página caso o seu leitor queira e necessite é claro! Para fazer isso será preciso apenas coloca o código que irei mostrar na página que você quer que tenha essa função ou no HTML do seu site ou blog se quiser que apareça em todas as páginas.

Pode parecer algo muito sem utilidade para alguns, mas em alguns nichos de blog como por exemplo os que ensinam receitas é sem dúvida algo que não pode faltar, já que os leitores desse tipo de blog normalmente gosta de imprimir suas receitas para testar na cozinha!

– Veja também:

Mas você mais do que ninguém saberá se essa função será útil ao seu blog e aos seus leitores ou não, portanto usei como exemplo os blogs sobre receitas mas essa função pode ser usada em outros tipos de blogs também.

Ver um Exemplo!

Colocando em alguns Posts

1º Passo: Se você quer colocar essa função em apenas alguns postagens e não em todas, você pode fazer isso entrando na postagem em que você quer colocar essa função e clicando em “HTML“:

2º Passo: Agora basta você copiar o código abaixo e colar no local em que você quer o botão “Imprimir” apareça!

No caso você pode colocar acima do texto da sua postagem para aparecer no começo, ou no final da postagem para aparecer no final.

Código:

<center>
<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'block';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script><a href="http://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Imprimir"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/01.png" alt="Imprimir"/></a>
</center>

Veja no exemplo colocando no final da postagem:

Feito isso basta clicar em “Atualizar” e ver como ficou! Repita esse processo em outros posts que você quer essa função disponível!

Agora, se você quer mesmo é colocar essa função em todos os post,s você não precisa fazer isso em cada postagem, basta colocar o código no HTML do seu tema para que essa função apareça em todas postagens. Veja como logo abaixo!

Colocando em todos os Posts

1º Passo: Entre no painel de controle do seu Blogger e do lado esquerdo clique em “Modelo” e depois em “Editar HTML“:

2º Passo: Agora clique levemente sobre o código e aperte as teclas CTRL + F e pesquise pelo código abaixo e aperte “ENTER“:

<div class='post-footer-line post-footer-line-2'>

Detalhe: Terá dois códigos, então quando encontrar o primeiro aperte ENTER novamente para ir ao segundo que é o que queremos!

3º Passo: E logo ACIMA desse segundo código que encontramos, coloque o seguinte código:

<center>
<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'block';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script><a href="http://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Imprimir"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/01.png" alt="Imprimir"/></a>
</center>

Deve ficar mais ou menos como na imagem abaixo:

Feito isso clique em “Salvar modelo” e pronto! Agora é só entrar nas postagens para verificar se tudo funcionou!

Personalizando o botão

Você pode mudar o botão “Imprimir” por outros botões diferentes e para fazer isso basta você apagar no código o seguinte item como marquei na imagem abaixo e substituir por outro mostrados mais abaixo:

Botão 1 (Padrão)

https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/01.png

Botão 2

https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/02.png

Botão 3

https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/03.png

Botão 4

https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/04.png

Botão 5

https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/05.png

Botão 6

https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/06.png

Como colocar Papai Noel e Neve caindo no Blog

O natal chegando e todo mundo começa a entrar no clima natalino não é mesmo? E o blog não poderia ficar de fora dessa afinal o blog faz parte da vida de muita gente, seja para o dono e seja para os leitores que tanto foram ajudados.

Para entrar de vez no clima de natal vou mostrar como colocar em seu blog um Papai Noel com seu trenó “passeando” pela tela do computador assim que alguém entra no blog e, como não poderia faltar, alguns flocos de neves para deixar ainda mais no clima. Claro que você pode optar por colocar só o papai noel ou só o floco de neves como os dois.

Um detalhe importante é que por usar javascript para fazer isso o seu blog pode fica um pouco mais pesado para carregar e aí vai de você analisar se isso complicará muito para seus visitantes ou não.

Para ver um exemplo real de como ficará essa dica em seu blog clique na imagem do Papai Noel!

Como Fazer no Blog

1º Passo: Entre no painel de controle do seu Blogger e do lado esquerdo clique em “Modelo” e depois em “Editar HTML“:

2º Passo: Agora clique levemente sobre o código do tela e aperte CTRL + F e pesquise por:
</head>
3º Passo: E acima desse código que pesquisamos cole o código do efeito que você desejar. Você pode usar quantos quiser mas cuidado que usar muitos pode ser chato.

Detalhe: Caso for usar o floco de neve esse deve se o primeiro código!

Floco de Neve

Papai Noel e Trenó

Enfeites Natalinos

Outono

Explosão de Doces

Explosão de Folhas

Estrelas

Relógio de Natal

Pisca Pisca

Deverá ficar mais ou menos como na imagem abaixo:

Vídeo Tutorial

Como deixar o título do Blogger deslizando

Quase todo mundo que decide criar um blog na internet opta por usar a plataforma Blogger por ser muito usado e muito simples para se ter um blog na internet, e o melhor, sem pagar nada. Por ser muito usado por iniciantes, normalmente também gostam de colocar vários efeitos em todos lugares e hoje vou mostrar como colocar um efeito que tenho recebido por formulário de comentários.

– Veja também:

Vou mostrar como deixar o título do seu blog que aparece na aba do navegador deslizando. Esse é um efeito que chama bastante atenção dos usuários que estão no seu blog. Pode ser útil não só para chamar atenção para o nome do blog como para avisar algo!

Veja um exemplo do que vamos fazer na imagem abaixo:

Vídeo

Colocando no seu Blogger

1º Passo: Entre no painel de controle do seu Blogger e clique em “Modelo” e depois em “Editar HTML“:

2º Passo: Clique levemente sobre o código do tela e aperte CTRL + F e pesquise por:

</header>

3º Passo: Assim que entrar o código, acima dele coloque o seguinte código:

<script>
var repeat=1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
setTimeout(&quot;titlemove()&quot;,150)
}
if (document.title)
titlemove()
</script>

Deve ficar como na nessa imagem abaixo:

4º Passo: Clique em “Visualizar blog” e veja o resultado! Estando tudo certo clique em “Salvar modelo“: