Kuinka lisään sivulle Google-kalenterin

mennessä tammi 28 2020 Google Kaikki ohjeet Widgetit 0 Kommenttia

 

Google-kalenteri – erinomainen apu ajan hallintaan

 

Google-kalenteri on web-sovellus aikasi hallintaan.

Tässä ohjeessa kerrotaan kuinka lisäät Google-kalenterin Webnode-sivuille.

 

  1. Ensimmäinen vaihe on tilin luominen Googlella – täällä.

2. Googlen ohjeesta löydät lisätietoja Google-kalenterin luomisesta ja kalenterin HTML-koodin saamisesta.

 

 

 

3. Jaa kalenteri julkisesti kalenterin asetuksissa “Pääsyoikeudet“ -osiossa.

4. Lisää kalenterin HTML-koodi Webnode-sivullesi.

Voit käyttää tämän koodin ja lisätä sen verkkosivun sisältöön – kohtaan, jossa haluat Google-kalenterin näkyvän.

<div class="googleCalendar">PLACE THE GOOGLE CALENDAR IFRAME CODE HERE</div>
view raw google-calednar.html hosted with ❤ by GitHub

5. Klikkaa “Sivut“ editorin yläpalkissa » Valitse sivu, jolla on Google-kalenteri » “Sivun SEO-asetukset” » ”Mukautettu HTML ylätunnistekoodi“ ja lisää tämä koodi:

<style>
.googleCalendar{
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.googleCalendar iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
view raw google-calednar.css hosted with ❤ by GitHub

6. Ja olet VALMIS. Google-kalenteri on lisätty sivullesi ja se on responsoiva, eli kalenterin koko sopeutuu mobiililaitteisiin (puhelimet, tabletit jne.).

Verkossa kalenteri näyttää tältä:

Yhteenveto:

Sinun tulee lisätä verkkosivulle 2 koodia. Ensimmäinen koodi tulee muokata ja lisätä se sivun runkoon (<body>) Webnoden HTML-toiminnon avulla.

Toinen koodi tulee lisätä sivulle, jolla kalenteri on, nimittäin Sivun SEO-asetuksiin ylätunnisteessa (<head>).

Koodi sivun runkoon

Koodi sivun ylätunnisteeseen

<div class="googleCalendar">PLACE THE GOOGLE CALENDAR IFRAME CODE HERE</div>
view raw google-calednar.html hosted with ❤ by GitHub
<style>
.googleCalendar{
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.googleCalendar iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
view raw google-calednar.css hosted with ❤ by GitHub

Lisää mahtavia oppaita

Viliam
Follow me
Latest posts by Viliam (see all)
0 0 votes
Article Rating
Subscribe
Notify of
guest


0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments