ClockHub
BlogWidgetMakipag-ugnayan

Maglagay ng orasan sa iyong website

Pumili ng istilo, itakda ang time zone, kopyahin ang isang snippet. Tumatakbo ang orasan sa loob ng iframe, kaya hindi nito ginagalaw ang CSS o script ng iyong page. Walang signup, walang iinstall.

Flip cards

Format ng oras
Segundo
Tema
Laki
ร—
Kulay
Posisyon ng AM/PM
Buksan ang site kapag pinindot

Plain digits

Format ng oras
Segundo
Tema
Laki
ร—
Kulay
Ipakita
Posisyon ng AM/PM
Buksan ang site kapag pinindot

Paano ito idagdag

  1. 1

    Kopyahin ang code

    Gamitin ang button sa itaas. Simpleng HTML lang ito โ€” walang build step, walang package na iinstall.

  2. 2

    I-paste sa iyong page

    Kahit saan na tumatanggap ng raw HTML: custom HTML block, code block, o template file ng tema.

  3. 3

    I-save at i-reload

    Lalabas agad ang orasan. Wala nang ibang isesetup, at wala nang iaupdate mamaya.

Saan ito gumagana

WordPress

Gumamit ng Custom HTML block, o i-paste sa text widget.

Squarespace

Magdagdag ng Code Block sa page at i-paste ang snippet sa loob.

Notion

I-type ang /embed at i-paste ang iframe address, hindi ang buong snippet.

Clock widget na hindi nagpapabagal sa page mo

Karamihan ng clock widget ay may kasamang JavaScript library, web font, at isang request sa third-party server. Ang isang ito ay isang HTML file lang, mga 5 KB kapag compressed, at nakalagay sa loob ang estilo at logic. Naglo-load ito sa iframe, kaya hindi nito mababago ang CSS ng page mo, hindi mapipigilan ang scripts mo, at hindi mababasa ang anumang itinatype ng bisita.

Dalawang istilo ang available. Ginagaya ng flip cards ang split-flap display ng lumang departure board sa istasyon, kung saan bumabagsak pasulong ang bawat digit na may malambot na anino. Tinatanggal ng plain digits ang cards at nagpapakita ng malalaking tabular numeral, na mas bagay sa mga article page at dashboard. Pareho silang iginuguhit sa iisang scale, kaya hindi gumagalaw ang layout kapag nagpalit ka.

Maaari mong i-pin ang orasan sa kahit anong IANA time zone, o iwanan ito sa lokal na oras ng bisita. Ang daylight saving ay galing sa time zone database ng browser, kaya ang orasang nakatakda sa Europe/London ay sumusunod sa BST switch nang walang update mula sa amin.

Libre ang embed at mananatiling libre. Walang account at walang watermark.

Mga madalas itanong

Libre ba talaga ang clock widget?+

Oo. Walang account, walang bayad, walang watermark, at walang limit sa dami ng orasang i-embed mo. Ang link sa ilalim ng orasan lang ang hinihiling naming iwanan.

Kailangan bang itago ang Clockhub link?+

Hindi ito ipinipilit at gumagana ang orasan kahit wala ito. Pero ito lang ang pinagkukunan ng pondo ng proyekto, kaya hinihiling naming iwanan ito. Nakapaloob na ito sa snippet na kinokopya mo.

Papabagalin ba ng iframe ang page ko?+

Ang buong embed ay mga 5 KB kapag compressed, mas maliit pa sa isang larawan. May loading="lazy" din ito, kaya hindi ito kinukuha ng browser hanggang malapit na ito sa viewport.

Gumagana ba ito sa WordPress, Squarespace, at Notion?+

Gumagana sa WordPress at Squarespace โ€” ilagay ang buong snippet sa custom HTML o code block. Ibang paraan ang Notion: URL ang iniembed nito, hindi HTML, kaya ang iframe address lang ang ilalagay sa /embed block. Sa ganitong kaso, hindi lalabas ang attribution link.

Maaari bang ibang time zone ang ipakita?+

Oo. Pumili ng zone sa configurator at isasama ito ng snippet bilang tz parameter. Kahit anong IANA name ang tatanggapin, halimbawa Asia/Manila o America/New_York.

Tama pa rin ba ang oras kung mali ang orasan ng device ng bisita?+

Hindi. Binabasa ng orasan ang oras ng device ng bisita at ico-convert sa napiling zone, kaya kung mali ang orasan ng device, mali rin ang makikita. Para makakuha ng awtoritatibong oras, kailangang tumawag sa server sa bawat page load, na sadyang hindi namin ginawa para manatiling 5 KB ang embed.