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

Por | Atualizado em 2016-09-18

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, contadores, etc. Aqui fica uma demonstração do resultado final:

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 Drive).

Comece por baixar a biblioteca do FlipClock.js para o seu computador através do site oficial. Após o Download, será necessário extrair os arquivos para o seu computador, podendo usar um programa como o WinRar ou o Universal Extrator (se tiver dúvidas, consulte o seguinte tutorial: Como descompactar arquivos).

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 Drive

Aqui no MontarumBlog.com já explicamos como hospedar Javascript e CSS no Google Drive. Caso tenha dúvidas, consulte os seguintes tutoriais:

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

<html>
<head>
<link rel="stylesheet" href="https://googledrive.com/host/XXLINKDEPARTILHAGOOGLEDRIVEXX">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://googledrive.com/host/XXLINKDEPARTILHAGOOGLEDRIVEXX"></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>


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 Drive. Por fim, inclua nas suas páginas o seguinte código:

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

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.

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>:

		
.clock{
zoom: 0.5;
-moz-transform: scale(0.5)
}

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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *