TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Ilmainen lähtölaskenta -widget Weebly -sivustolle

9

Ajastin -widgetin avulla voit esitellä kätevän ajastimen tuotteen lanseerausta, tapahtuman käynnistämistä jne. Varten. Widget -koodi voidaan upottaa " Upota koodi " -elementtiin, joten se voidaan lisätä mihin tahansa sivulle yhdessä muun sisällön kanssa. haluat lisätä sen erilliselle sivulle rakenteilla olevalle sivustolle ilman navigointivalikoita ja alatunnistetta, sitten luoda uuden sivun asettelun ja lisätä widget -koodin. Tässä artikkelissa keskitymme Weebly -sivuston ilmaisen ajastimen widgetin lisäämiseen sivun sisältöön.

Ajastin -widget näyttää alla olevalta ja voit muokata värejä tarpeen mukaan sivustosi ulkoasun mukaan.

Ilmainen lähtölaskenta -widget Weebly -sivustolle

Lataa komentosarjatiedostot tämän widgetin luomiseksi.

Vaihe 1 – Lataa ja lisää komentosarjat

Widget perustuu komentosarjoihin init.js / countdown.js ja sitä on muokattu sopimaan Weebly -sivustolle, jossa on lisä CSS. Lataa komentosarjatiedostot ja lataa ne Weebly -sivustosi Teema> Muokkaa HTML / CSS > Sisältö -osiossa. Linkitä sitten komentosarjatiedostot sivusi alatunniste -osioon seuraavasti:

<script src="/files/theme/countdown.js" type="text/javascript"></script> <script src="/files/theme/init.js" type="text/javascript"></script>

Voit myös käyttää absoluuttisia tiedostopolkuja liittämällä Weebly -sivustosi nimen edellä mainittuihin URL -osoitteisiin.

Vaihe 2 – CSS: n lisääminen

Lisää alla oleva CSS Weebly -sivusi Otsikkokoodi -osioon:

<style> .countdowntimer { background: rgb(92, 57, 57) none repeat scroll 0% 0%; padding:20px 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 25px; } .title #desc { margin: 25px 0 25px 0; text-align:center; color: lightyellow; font-size: 18px; } .title #head { font-size: 30px; color: #ffffff; } ul#countdown { text-align:center; } ul#countdown li { color:#fff; display: inline-block; margin-right:18px; width: 100px; height: 90px; text-align: center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #333333; -webkit-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3); -moz-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3); box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3); } ul#countdown li span { font-size: 42px; font-weight: bold; color: #fff; position: relative; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1); top: 10px; } ul#countdown li p.timeRefDays, ul#countdown li p.timeRefHours, ul#countdown li p.timeRefMinutes, ul#countdown li p.timeRefSeconds { text-shadow: 1px 1px 2px rgba(150, 150, 150, 1); margin-top: 15px; } </style>

Vaihe 3 – Ajastimen HTML

Lisää alla oleva HTML -koodi Upota koodi -elementtiin ja kohdista sijainti keskelle. Muista korvata otsikko ja kuvaus omalla.

<div class="countdowntimer"> <div class="title"> <h3 id="head">This is a countdown timer widget</h3> <h5 id="desc">Remaining time for official product or website launch</h5> </div> <ul id="countdown"> <li> <p class="timeRefDays">days</p> <span class="days"></span> </li> <li> <p class="timeRefHours">hours</p> <span class="hours"></span> </li> <li> <p class="timeRefMinutes">minutes</p> <span class="minutes"></span> </li> <li> <p class="timeRefSeconds">seconds</p> <span class="seconds"></span> </li> </ul> </div>

Vaihe 4 – Tavoitepäivämäärän asettaminen

Ajastimen tavoitepäiväksi asetetaan “init.js" -skriptitiedoston sisällä “31. joulukuuta 2016” esittelyä varten. Voit muokata päivämäärää tarpeen mukaan, tallentaa muutokset ja julkaista sivuston nähdäksesi ajastimen toiminnassa.

Ilmainen lähtölaskenta -widget Weebly -sivustolle

Ajastimen tavoitepäivämäärä

Täysi leveys Parallax Countdown Timer Widget

Kun lisäät yllä olevan widgetin upotuskoodin avulla, se näyttää tavalliselta. Voit tehdä kaunis parallaksi ajastimen avulla profiilielementin kuten alla:

Ilmainen lähtölaskenta -widget Weebly -sivustolle

Ajastin -widget Parallax -kuvan taustalla

Luo ympyräkaavio parallaksikuvan taustalla noudattamalla alla olevia ohjeita.

  • Vedä ja pudota osion elementti. Napsauta osioelementtiä sisältöalueella ja valitse sitten "Muokkaa taustaa".
  • Valitse kuva taustaksi ja aseta vieritystehoste parallaksi. Voit myös asettaa värin taustan, ja videon tausta on vain ammattilaisille.
  • Vedä ja pudota upotuskoodi ja lisää HTML -koodi yllä olevan osan mukaisesti.
  • Julkaise sivustosi ja katso animoitu ympyräkaavio parallaksikuvalla.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja