Gratis nedtellingstimer -widget for Weebly -nettsted

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.

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.

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:

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.