Můj blog - Blogger - 14. Kapitola - Hodiny

Další díly najdete v rozcestníku.
Již v minulosti jsme si povídaly o tzv. gadgetech ("udělátka", která se zobrazují v postranním menu). Představily jsme si dva - gadget, který pomáhá prohledávat blog a také gadget usnadňující kontaktování autora blogu. Mezi známé gadgety také patří hodiny. Hodiny by zpravidla neměli rušit čtenáře od čtení, proto například není dobré na blog, který obsahuje převážně text přidávat rušivé analogové hodiny, ale spíše digitální a naopak. Nyní si ukážeme jak vložit na blog oba typy.

• Analogové hodiny: velkou škálu jich nabízí např. web ClockLink.com (nabízí i digitální ale ty jsou většinou příliš rušivé, ale lze je také použít). Postup vložení na blog je jednoduchý: na webu ClockLink si vyberete z levého menu příslušnou kategorii (sports, holidays,…) a vyberete si, které hodiny by se vám na vašem blogu líbily. Až budete mít vybráno, klikněte pod hodinami na tlačítko View HTML Tag (zobrazit HTML Tag), následně se vám zobrazí smluvní podmínky užívání těchto hodin, u kterých dáte Accept (souhlasím). Poté už si jen doladíte vzhled a časovou zónu (pro Českou republiku vyberte CET). Pokud jste s hodinami spokojeni, zkopírujte do schránky kód z prvního okna, vraťte se zpátky na do administrace vašeho blogu, poté Rozvržení → Přidat gadget → HTML/JavaScript a do okna vložte kód ze stránky a klikněte na uložit. 
• Digitální hodiny: pokud nepotřebujete nějaké speciální efekty hodin, stačí použít pouze jednoduchý postup. Výhodou těchto hodin je že se na ně nevztahují autorská práva (jedná se o jednoduchý skript), tudíž na nich není žádná reklama. Pro vložení přejděte na Blogger → Přidat gadget → HTML/JavaScript a do okna vložte tento kód a klikněte na uložit: 

<style>
  #hodiny {
    color: blue; /* barva písma */
    font-size: 20px; /* velikost písma */
    font-family: "Arial"; /* písmo */
  }
</style>

<center>
  <span id="hodiny">
  </span>
</center>

<script language="javascript" type="text/javascript">
  function hodiny (){
    var cas = new Date(); 
    var hodina = cas.getHours();
    var minuta = cas.getMinutes();
    if (minuta < 10){
      minuta = "0" + minuta; 
    }
    aktualniHodiny = hodina + ":" + minuta;
    window.document.getElementById("hodiny").innerHTML = aktualniHodiny;
  }

  hodiny();
  window.setInterval("hodiny()", 1000);
</script>

červeně zvýrazněné hodnoty můžete měnit