BaukastenHilfe24

BaukastenHilfe24 - Hier wird dir geholfen!

Intro2

"Countdown2":






  Veröffentlicht am: 05.10.2014

  Bewertung:




Dieses Intro hat es wirklich in sich. Es bietet nicht nur den Countdown sondern auch noch einen Footerbereich. Außerdem ist es dem Besucher möglich oben links den Hintergrund und die Farbe des Intros selbst auszuwählen.

Den folgenden Code müsst ihr im Extra "Intro" im dortigen "Quellcode" einfügen:
*/Intro mit Countdown - Coding by www.baukastenhilfe24.de.tl/*

<link media="all" href="http://www.loaditup.de/files/830016_3qpgmyer9e.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://www.google.com/jsapi" ></script> <script type="text/javascript">
google.load("jquery", "1.6.4");
</script> <script type="text/javascript">

$(function () {
var countDay = new Date();
countDay = new Date('December 25, 2014 00:01:00');
$('#defaultCountdown').countdown({until: countDay,
format: 'DHMS',
layout: '<div id="counter">'+
'<div id="values">'+
'<div id="counter_days" class="grey numbs rounded shadow">{dnnn}<p class="date_label">{dl}</p></div>'+
'<div id="counter_hours" class="grey numbs rounded shadow">{hnn}<p class="date_label">{hl}</p></div>'+'<div id="counter_minutes" class="grey numbs rounded shadow">{mnn}<p class="date_label">{ml}</p></div>'+ '<div id="counter_seconds" class="grey numbs rounded shadow">{snn}<p class="date_label">{sl}</p></div>'+
'</div>'+
'</div>'});
$('#year').text(countDay.getFullYear());
});
</script> <script type="text/javascript" src="http://www.loaditup.de/files/830034_yw88sm9anp.js"></script> <script type="text/javascript" src="http://www.loaditup.de/files/830017_93bqfvfx5s.js"></script><script type="text/javascript">
$(document).ready(function(){
SubscribeForm();
});
</script> <!-- Options Panel -->
<div class="rounded" id="options">
<h2>OPTIONS PANEL</h2>
<div id="texture_options">
<h3>Textures</h3>
<img width="32" height="24" alt=" " src="http://www.loaditup.de/files/830024_4y89kup6gm.png" /> <img width="32" height="24" alt=" " src="http://www.loaditup.de/files/830025_g3rmdvvhxc.pngg" /> <img width="32" height="24" alt=" " src="http://www.loaditup.de/files/830026_cb7ttqxf3u.png" /> <img width="32" height="24" alt=" " src="http://www.loaditup.de/files/830027_w37w9rgxaa.png" /> <img width="32" height="24" alt=" " src="http://www.loaditup.de/files/830028_t45uxpvhdv.png" /> <img width="32" height="24" alt=" " src="http://www.loaditup.de/files/830030_pqs9unknsr.png" /></div>
<div id="color_options">
<h3>Color Options</h3>
<div class="color" id="color1">&nbsp;</div>
<div class="color" id="color2">&nbsp;</div>
<div class="color" id="color3">&nbsp;</div>
<div class="color" id="color4">&nbsp;</div>
<div class="color" id="color5">&nbsp;</div>
<div class="color" id="color6">&nbsp;</div>
</div>
</div>
<div class="rounded" id="options_button">&nbsp;</div>
<!-- end Options Panel --> <!-- Main page -->
<div id="page"><!-- Company Name or logo -->
<h1 class="engraved color_text">Deine Webseite</h1>
<p class="engrave_text">Die Webseite ist in&nbsp;Bearbeitung und er&ouml;ffnet wieder in:</p>
<!-- Countdown -->
<div class="engraved color_text" id="defaultCountdown">&nbsp;</div>
<!-- end Countdown -->
<div class="grey rounded shadow" id="content"><!-- Short description of the company -->
<div id="about">
<h2 class="engraved color_text">&Uuml;ber Uns</h2>
<div class="grey rounded shadow" id="image_placeholder"><img width="160" height="160" alt=" " src="http://www.loaditup.de/files/830035_evft44wf2u.png" /></div>
<p class="engrave_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id sollicitudin risus. In arcu risus, imperdiet et pulvinar in, pellentesque et diam. Cras ultrices lobortis nisl, sed dapibus libero sodales at. Aenean sed mi eu justo porta mollis. Vivamus rutrum, arcu non pellentesque malesuada, sem odio ullamcorper diam, in euismod elit risus eu nibh.</p>
<p class="engrave_text">Fusce ac augue non arcu luctus aliquam mollis a ipsum. In adipiscing condimentum est eget fringilla. Etiam quis volutpat dui. Curabitur vel justo eget urna scelerisque feugiat. Phasellus vitae eros ut eros iaculis ullamcorper quis nec ligula. Aliquam in bibendum magna.</p>
</div>
<!-- end Short description -->
<div id="right-panel"><!-- Social Icons -->
<h2 class="engraved color_text">Soziale Netzwerke</h2>
<a target="_blank" href="http://www.facebook.com"><img width="32" height="32" alt="facebook icon" src="http://www.loaditup.de/files/830032_vsmcq6bkr5.png" class="img_align" /></a> <a target="_blank" href="http://www.delicious.com"><img width="32" height="32" alt="delicious icon" src="http://www.loaditup.de/files/830031_cqsmr29bnm.png" class="img_align" /></a> <a target="_blank" href="http://www.twitter.com"><img width="32" height="32" alt="twitter icon" src="http://www.loaditup.de/files/830033_vae46h8z7n.png" class="img_align" /></a></div>
<!-- end Social Icons --></div>
<!-- end Main Page -->
<div class="engrave_text" id="footer">&copy; Copyright 2011<a href="LINK">Deine Seite</a> // Coding by<a href="http://baukastenhilfe24.de.tl">BaukastenHilfe24</a> // All Rights Reserved.<br>
</div>
<!--end #footer--></div>
<!-- end #page -->

So stellst du die Countdown-Zeit ein:
Relativ am Anfang des Codes findest du folgenden Ausschnitt:

$(function () {
var countDay = new Date();
countDay = new Date('January 5, 2014 12:00:00');
$('#defaultCountdown').countdown({until: countDay,


In dem rotmarkierten Ausschnitt definierst du das Datum und die Uhrzeit ein.
Als erstes gibt ihr den Monat ein, danach der Tag, dann das Jahr und danach die Uhrzeit. Oben ist zum Beispiel der 5.Januar 2015, 12:00 Uhr definiert.

Achtung! : Der Monat muss in Englisch geschrieben werden!

Ihr dürft dieses Template kostenlos verwenden und verändern, allerdings muss das Copyright unverändert bleiben!

Kurz-Infos

Datumsausgabe
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=