TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Gratis nedtellingstimer -widget for Weebly -nettsted

15

Nedtellingstids widget lar deg vise frem en hendig timer for produktlansering, hendelseslansering, etc. Widgetkoden kan legges inn i elementet " Embed Code ", og kan derfor legges til hvor som helst på siden sammen med annet innhold. ønsker å legge den til på en egen side for under bygging uten navigasjonsmenyer og bunntekst, deretter opprette et nytt sidelayout og legge til widgetkoden.I denne artikkelen vil vi fokusere på å legge til gratis nedtellingstids widget for Weebly -nettsted i et sideinnhold.

Nedtellingstimeren vil se ut som nedenfor, og du kan endre fargene som du trenger for å passe nettstedets layout.

Gratis nedtellingstimer -widget for Weebly -nettsted

Last ned skriptfilene for å lage denne widgeten.

Trinn 1 – Last ned og legg til skriptene

Widgeten er basert på skriptene init.js / countdown.js og endret for å passe på et Weebly -nettsted med ytterligere CSS. Last ned skriptfilene og last dem opp under "Tema> Rediger HTML / CSS > Eiendeler" på Weebly -nettstedet. Deretter kobler du til skriptfilene under delen av bunnteksten på siden din:

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

Du kan også bruke de absolutte filbanene ved å prefikse navnet på Weebly -nettstedet til URL -adressene ovenfor.

Trinn 2 – Legge til CSS

Legg til CSS nedenfor under "Header Code" -delen på Weebly -siden din:

<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>

Trinn 3 – HTML for nedtellingstimeren

Legg til HTML -koden nedenfor i et "Embed Code" -element og juster posisjonen til midten. Ikke glem å erstatte overskriften og beskrivelsen med din egen.

<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>

Trinn 4 – Angi måldato

Måldatoen for timeren er satt i "init.js" -skriptfilen som "31. desember 2016" for demoformål. Du kan endre datoen etter behov, lagre endringene og publisere nettstedet for å se nedtellingstimeren i bruk.

Gratis nedtellingstimer -widget for Weebly -nettsted

Måldato for nedtelling

Full Width Parallax Countdown Timer Widget

Hvis du legger til widgeten ovenfor ved å legge inn kodeelement, vil det se enkelt ut. Du kan lage en vakker nedtellingstimer for parallaks ved å bruke seksjonselement som nedenfor:

Gratis nedtellingstimer -widget for Weebly -nettsted

Nedtellingstimer -widget med Parallax -bildebakgrunn

Følg instruksjonene nedenfor for å lage kakediagram med parallaksbildebakgrunn.

  • Dra og slipp et delelement. Klikk på seksjonselementet på innholdsområdet, og klikk deretter på alternativet "Rediger bakgrunn".
  • Velg bilde som bakgrunn og angi rulleeffekt som parallaks. Du kan også angi fargebakgrunn, og videobakgrunnen er bare tilgjengelig for profesjonelle brukere.
  • Dra og slipp nå et innebygd kodeelement og legg til HTML -koden som angitt i delen ovenfor.
  • Publiser nettstedet ditt og se det animerte sektordiagrammet med parallaksbildebakgrunn.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon