» » "До Нового года осталось" таймер на Блоггер

"До Нового года осталось" таймер на Блоггер

На сайте много статей о декоре на блог для украшения его перед какими-либо праздниками. Так как приближается Новый год, то подыскала для вас разнообразные коды виджета До Нового года осталось... 
Добавлять код выбранного информера нужно в Дизайн - Добавить гаджет - HTML/JavaScript. 
Выбирайте и устанавливайте себе на сайт.

Информеры

1. Можно в коде поменять текст, размер и цвет текста. На следующий год нужно поменять в коде год. (выделен синим цветом)
виджет
<div style="font-size:18px; border:solid 1px #ececec; background:#EEEFEF; color:#222; text-align:center; margin:20 auto; padding:10px; margin-bottom:10px; -moz-border-radius: 1px; -webkit-border-radius: 1px; -khtml-border-radius:1px; border-radius: 1px;"><script language="javascript">
document.write('<span id="ny_date">До Нового года</span>')
function ojidanieNG()
{
  var today = new Date();
  var BigDay = new Date("January 01, 2020");
  var timeLeft = (BigDay.getTime() - today.getTime());
  var e_daysLeft = timeLeft / 86400000;
  var daysLeft = Math.floor(e_daysLeft);
  var e_hrsLeft = (e_daysLeft - daysLeft)*24;
  var hrsLeft = Math.floor(e_hrsLeft);
  var e_minsLeft = (e_hrsLeft - hrsLeft)*60;
  var minsLeft = Math.floor(e_minsLeft);
  var seksLeft = Math.floor((e_minsLeft - minsLeft)*60);
  if (BigDay.getTime() > today.getTime() )
  document.getElementById("ny_date").innerHTML = '<font color="#c00"><b>До Нового года осталось</b></font>: <b>'+daysLeft+'</b> дней <b>'+hrsLeft+'</b> час. <b>'+minsLeft+'</b> мин. <b>'+seksLeft+'</b> сек.'
  else
  document.getElementById("ny_date").innerHTML = '<b>Поздравляем с <font color=red>Новым годом!</font>!!!</b>'
}
setInterval("ojidanieNG()", 50)
</script>
</div>
2. Следующий виджет так же без картинок, только текст и отсчёт времени. Можно менять цвет и размер чисел и слов. А также текст. Кроме этого, каждый год меняйте дату отсчёта времени, прежде чем устанавливать виджет на блог перед праздниками.
Следующий виджет
<link href="http://fonts.googleapis.com/css?family=Metamorphous" rel="stylesheet" type="text/css" />
<style type="text/css">
a.bgt-clock-link { text-decoration: none; display: block; outline: none; }
#TimerDiv { background: transparent;color: #000;text-shadow: 0 0 6px #00cc00;font-family: 'Metamorphous', cursive;font-size: 28px;text-align: center;line-height: normal; }
.bgt-clock-sep { -moz-animation: sep-blinks 1.1s linear 0s infinite; -webkit-animation: sep-blinks 1.1s linear 0s infinite; animation: sep-blinks 1.1s linear 0s infinite;}
@-moz-keyframes sep-blinks
{
0% {opacity:1}
50% {opacity:0}
100% {opacity:1}
}
@-webkit-keyframes sep-blinks
{
0% {opacity:1}
50% {opacity:0}
100% {opacity:1}
}
@keyframes sep-blinks
{
0% {opacity:1}
50% {opacity:0}
100% {opacity:1}
}
#bgt-clock-days{color:#00cc00;font-weight:900;}#bgt-clock-hr,#bgt-clock-mins,#bgt-clock-secs{font-family:courier new}#bgt-clock-hr{background:#00cc00;font-weight:700}#bgt-clock-secs{background:#ccc;color:#2aa4cf;}#bgt-clock-mins{background:#2aa4cf;}
</style>
<a target="_blank" class="bgt-clock-link" href='http://www.blogolect.com/2014/12/new-year-countdown-widget-v2-for-blogger.html'>
<div id="TimerDiv">
До нового года осталось<br /><span id="bgt-clock-days"></span> Дней<br /><span id="bgt-clock-hr"></span><span class="bgt-clock-sep"> : </span><span id="bgt-clock-mins"></span><span class="bgt-clock-sep"> : </span><span id="bgt-clock-secs"></span></div>
</a>
<script type="text/JavaScript">
function startTimer() {
var newyr=new Date("January 1, 2020 00:00:00");
var newyeartime=newyr.getTime();
var todaytm=new Date();
var todaytime=todaytm.getTime();
var timeleft=newyeartime-todaytime;
var leftdays = timeleft/86400000;
var lefthr=23-todaytm.getHours();
var leftmin=59-todaytm.getMinutes();
var leftsec=59-todaytm.getSeconds();
if (Math.floor(leftdays) <= -1) {
document.getElementById('TimerDiv').innerHTML="С Новым Годом!<br/>Новый год 2020";
}
else {
document.getElementById('bgt-clock-days').innerHTML= Math.floor(leftdays);
document.getElementById('bgt-clock-hr').innerHTML= lefthr;
document.getElementById('bgt-clock-mins').innerHTML= leftmin;
document.getElementById('bgt-clock-secs').innerHTML= leftsec;
}
t=setTimeout('startTimer()',999);
}
startTimer();
</script>

3. Следующий виджет хорош тем, что вы можете добавить свою любую картинку (фон), можно даже анимированную. Так же меняем цвет, размер, шрифт слов и чисел. Меняем текст. Размер гаджета подгоняйте под свой (в коде выделила красным). И устанавливайте год, число и так далее остановки таймера (выделила синим). Адрес картинки — выделила розовым. Размер картинки зависит от размера вашей боковой панели.
<div id="TimerDiv">
До Нового Года осталось<br />
<span id="bloggerknown-clock-days">
</span> Дней<br /><span id="bloggerknown-clock-hr">
</span><span class="bloggerknown-clock-sep"> : </span>
<span id="bloggerknown-clock-mins"></span>
<span class="bloggerknown-clock-sep"> : </span>
<span id="bloggerknown-clock-secs"></span></div>
<script type="text/JavaScript">
function startTimer() {
var newyr=new Date("January 1, 2020 00:00:00");
var newyeartime=newyr.getTime();
var todaytm=new Date();
var todaytime=todaytm.getTime();
var timeleft=newyeartime-todaytime;
var leftdays = timeleft/86400000;
var lefthr=23-todaytm.getHours();
var leftmin=59-todaytm.getMinutes();
var leftsec=59-todaytm.getSeconds();
if (Math.floor(leftdays) <= -1) {
document.getElementById('TimerDiv').innerHTML="Наступил 2020 год!<br/>С Новым Годом!";
}
else {
document.getElementById('bloggerknown-clock-days').innerHTML= Math.floor(leftdays);
document.getElementById('bloggerknown-clock-hr').innerHTML= lefthr;
document.getElementById('bloggerknown-clock-mins').innerHTML= leftmin;
document.getElementById('bloggerknown-clock-secs').innerHTML= leftsec;
}
t=setTimeout('startTimer()',999);
}
startTimer();
</script>
<style type="text/css">
a.bloggerknown-clock-link { text-decoration: none; display: block; outline: none; }
#TimerDiv {padding: 5px;background: url("https://i.yapx.ru/GAPu6.jpg") no-repeat scroll 0% 0% transparent;width: 250px;color: #f5f5f5;font-family: -webkit-pictograph;font-size: 25px;text-align: center;text-shadow: 0 0 5px #96FFE8;line-height: normal;}
.bloggerknown-clock-sep { -moz-animation: sep-blinks 1s linear 0s infinite; -webkit-animation: sep-blinks 1s linear 0s infinite; animation: sep-blinks 1s linear 0s infinite;}
@-moz-keyframes sep-blinks {0% {opacity:1}50% {opacity:0}100% {opacity:1} }
@-webkit-keyframes sep-blinks {0% {opacity:1}50% {opacity:0}100% {opacity:1} }
@keyframes sep-blinks {0% {opacity:1}50% {opacity:0}100% {opacity:1} }
</style>
Встретимся в Новом 2020 году! Желаю вам всего того, о чём мечтается!!!

Отправить комментарий

Комментарии со спамом удаляются.