TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Gratis nedräkningstimer -widget för Weebly -webbplats

26

Nedräkningstimerwidgeten låter dig visa upp en praktisk timer för produktlansering, händelselansering etc. Widgetkoden kan bäddas in i elementet " Bädda in kod " och kan därför läggas till var som helst på sidan tillsammans med annat innehåll. vill lägga till den på en separat sida för under byggarbetsplats utan navigeringsmenyer och sidfot, skapa sedan en ny sidlayout och lägga till widgetkoden.I den här artikeln kommer vi att fokusera på att lägga till den kostnadsfria nedräkningstimer -widgeten för Weebly -webbplatsen i ett sidinnehåll.

Nedräkningstimer -widgeten kommer att se ut nedan och du kan ändra färgerna som du behöver för att passa din webbplats layout.

Gratis nedräkningstimer -widget för Weebly -webbplats

Ladda ner skriptfilerna för att skapa denna widget.

Steg 1 – Ladda ner och lägg till skripten

Widgeten är baserad på skripten init.js / countdown.js och modifierad för att passa på en Weebly -webbplats med ytterligare CSS. Ladda ner skriptfilerna och ladda upp dem under avsnittet "Tema> Redigera HTML / CSS > tillgångar" på din Weebly -webbplats. Länka sedan skriptfilerna under avsnittet " Sidkod " på din sida enligt nedan:

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

Du kan också använda de absoluta filvägarna genom att prefixa ditt Weebly -webbplatsnamn till ovanstående webbadresser.

Steg 2 – Lägga till CSS

Lägg till nedanstående CSS under avsnittet "Rubrikkod" på din Weebly -sida:

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

Steg 3 – HTML för nedräkningstimern

Lägg till nedanstående HTML -kod i ett "Bädda in kod" -element och justera positionen till mitten. Glöm inte att ersätta rubriken och beskrivningen 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>

Steg 4 – Ställa in måldatum

Måldatumet för timern ställs in i "init.js" -skriptfilen som "31 december 2016" för demo -ändamål. Du kan ändra datumet efter dina behov, spara ändringarna och publicera webbplatsen för att se nedräkningstimern i funktion.

Gratis nedräkningstimer -widget för Weebly -webbplats

Måldatum för nedräkningstimer

Full Width Parallax Countdown Timer Widget

Om du lägger till widgeten ovan med hjälp av inbäddningskodelement ser det enkelt ut. Du kan göra en vacker parallax nedräkningstimer med hjälp av sektionselement som nedan:

Gratis nedräkningstimer -widget för Weebly -webbplats

Nedräkningstimer -widget med Parallax -bildbakgrund

Följ instruktionerna nedan för att skapa cirkeldiagram med parallaxbildsbakgrund.

  • Dra och släpp ett sektionselement. Klicka på sektionselementet på innehållsområdet och klicka sedan på alternativet "Redigera bakgrund".
  • Välj bild som bakgrund och ställ in rullningseffekt som parallax. Du kan också ställa in färgbakgrund och videobakgrunden är endast tillgänglig för proffsanvändare.
  • Dra och släpp nu ett inbäddningskodselement och lägg till HTML -koden enligt ovanstående avsnitt.
  • Publicera din webbplats och se det animerade cirkeldiagramet med parallaxbildsbakgrund.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer