Como colocar relógio no blog / Site – FlipClock.js

Neste tutorial, iremos explicar como colocar um relógio nas páginas do seu site (ou blog, iremos exemplificar no blogger). Para isso, iremos usar o FlipClock.js, uma biblioteca bastante completa que oferece vários recursos.

O FlipClock.js coloca à sua disposição relógios no formato de 12 ou 24 horas, e ainda contagens regressivas ou contadores, que são sempre um excelente complemento nos sites e-commerce, por exemplo, para cronometrar as suas promoções.

Aqui fica uma demonstração do resultado final. Repare que é possível controlar o tamanho do relógio, no nosso exemplo, ajustamos para um tamanho que julgamos ser “padrão” para um Blogger.

Como colocar relógio no blog / Site – FlipClock.js

Para utilizar o Flipclock.js será necessário baixar e hospedar os respectivos arquivos num servidor (poderá usar o Google Firebase).

Comece por baixar a biblioteca do FlipClock.js para o seu computador através do site oficial.

Repare que o FlipClock.js já incluiu exemplos prontos a usar (pasta examples), facilitando todo o processo. Vamos exemplificar usando o relógio no formato 24h (twenty-four-hour-clock, presente na pasta “Examples”).

Agora será necessário fazer umas pequenas edições ao código, que consiste na inclusão dos links para os arquivos flipclok.js, flipclock.css e a biblioteca jQuery.

Para isso, você poderá usar o bloco de notas do Windows, ou o programa gratuito Notepad ++ (recomendado).

Hospedar os arquivos no Google Firebase

Aqui no MontarumBlog.com já explicamos como hospedar uma página HTML no Google Firebase. Caso tenha dúvidas, consulte os seguinte tutorial:Como hospedar Javascript no Google Firebase

Após hospedar os arquivos adicione os respectivos links de partilha no código fonte do relógio. Por exemplo:

[xml]

<html><head>

<link rel="stylesheet" href="link do arquivo de estilo css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="link do arquivo js do flipclock"></script>
</head>
<body>
<div class="clock" style="margin:2em;"></div>
<script type="text/javascript">
var clock; $(document).ready(function() { clock = $('.clock')
.FlipClock({ clockFace: 'TwentyFourHourClock' }); }); </script> </body>
</html>
[/xml]

Nota: Repare que o código de exemplo introduz o jQuery através dos servidores do Google. Uma forma simples de poupar recursos, mas também melhorar a velocidade de carregamento do seu relógio.

Implementar o relógio nas suas páginas:

Após realizar todas as alterações necessárias poderá hospedar o arquivo final (HTML) nos seus servidores, ou voltar a usar o Google Firebase. Por fim, inclua nas suas páginas o seguinte código:

[xml]
<iframe width="580" height="215"
src="http://www.link_do_relogio_hospedado.html" frameborder="0"></iframe>
[/xml]

No Blogger: Se você utiliza o Blogger basta incluir o código do iFrame numa postagem. Para adicionar o relógio na “sidebar” do blog, comece por aceder ao painel de controlo do Blogger e clique no menu “Esquema” (ou Layout em português do Brasil).

Surgirá o esquema do template do seu blog, clique no link “Adicionar uma miniaplicação” (ou Adicionar Gadget) de HTML / Javascript.

Como colocar relógio no blog / Site

Cole o código iframe na miniaplicação e visualize o resultado final.

Como diminuir o relógio?

O tamanho “original” do relógio FlickClock.js é bastante “grande”. Para resolver o problema você poderá usar um pequeno “truque”, usando a linguagem CSS para reduzir o tamanho do elemento.

Para isso, basta adicionar o seguinte código antes da tag </head>:

[css]
.clock{
zoom: 0.5;
-moz-transform: scale(0.5)
}[/css]

Caso seja necessário reduzir ainda mais, altere o valor do zoom e do “-moz-transform: scale” para outros valores (0.4, 0.3….).

Partilhar

Deixe um Comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *