Adicione o relógio personalizado na sua página usando o serviço gratuito FlipClock.js. Para isso, será necessário hospedar as librarias necessárias para publicar o relógio. Para mais detalhes consulte o nosso tutorial:
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.
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 Firebase
Aqui no MontarumBlog.com já explicamos como hospedar uma página HTML no Google Firebase. Caso tenha dúvidas, consulte os seguintes tutoriais:
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:<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 Firebase. 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….).
Nenhum comentário:
Postar um comentário
Por favor leia antes de Comentar