Счетчик "До Нового года осталось" на сайт

И снова год пролетел... Не успеем оглянуться, как будем вновь встречать Новый год... 

Итак, поехали! Обратный отсчет пошел! Устанавливаем на сайт красивый счетчик "До Нового года осталось..." со своей картинкой и думаем о подарках близким, друзьям, коллегам.

В ожидании 2017 Нового года в статье Обратный отсчет "До Нового года осталось" я рассказывала как добавить на сайт готовый виджет (гаджет) со счетчиком. Есть разные и интересные.

Но захотелось немного творчества. Долго искала такой счетчик, в который можно вставить свою картинку. Сегодня делюсь с Вами идеей (источник).

Как добавить на сайт счетчик "До Нового года осталось..."

Код счетчика я условно разделила на 2 части. В первой части можно изменить картинку, цвет текста таймера и рамочки. Вторая часть остается неизменной.

Обе части кода счетчика нужно копировать и вставлять в Blogger в гаджет HTML/JavaScript (Дизайн -> Добавить гаджет) - см. в конце статьи. 

(На сайтах, созданных на CMS Wordpress код нужно вставить в виджет Текст).

! Если будете в счетчик добавлять свою картинку, то советую до вставки это изображение подогнать (изменить/обрезать) под ширину части своего сайта - куда будет вставлять счетчик (например, ширину боковой панели, сайдбара). Затем загрузить в любой черновик сообщения в Blogger. При нажатии правой кнопки мыши по картинке можно будет скопировать URL картинки (ссылка на картинку).

Посмотрим первую часть кода счетчика "До Нового года".

<center><div align="center" style="padding:1px; border: 4px double blue; width: 200px; height: 350px;">
<a href="https://samasajt.blogspot.ru/ "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_qAf7ieJMpEM0IK4s6E2jY2T7eL4d3ZTwPv_yjyljPZhsuqwlBMPgOi78bQNeo4lJ41DN6j7LduTUl2c30vI4tOVDfScji4xH5yRmhv5rO5GAktLQWFLkZBkkGB6F2CpixlXOP3gwhY0/s1600/christmas-2846337_200x255.jpg" border="0" /></a>
<div align="center" style="width: 200px;"><span style="font: 12pt sans-serif;  color: #0000CC ">До Нового Года осталось

 <b><div align="center"><br />

То, что выделено цветом - можно настроить:

• border: 4px - толщина линии рамки
• double blue - цвет рамки
• width: 200px - ширина всей рамки вокруг картинки
• height: 350px - высота всей рамки вокруг картинки и таймера
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_qAf7ieJMpEM0IK4s6E2jY2T7eL4d3ZTwPv_yjyljPZhsuqwlBMPgOi78bQNeo4lJ41DN6j7LduTUl2c30vI4tOVDfScji4xH5yRmhv5rO5GAktLQWFLkZBkkGB6F2CpixlXOP3gwhY0/s1600/christmas-2846337_200x255.jpg - URL картинки
• color: #0000CC  - цвет всего таймера (текст и цифры)

Для выбора цвета счетчика есть таблица кодов цветов и онлайн-генераторы цвета.

Предлагаю Вам готовые счетчики "До Нового года осталось..." для Ваших сайтов или блогов, если не хочется возиться с настройками.

Счетчик 1 

 Первая часть кода: 

<center><div align="center" style="padding:1px; border: 4px double blue; width: 200px; height: 280px;">

<a href="https://samasajt.blogspot.ru/ "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEIoDZWYZ7IwyNR08cldSTGa8xrHsPZb36wc1wEjQrkNzGh6olHi5K8GDWTI__ivx1iVGDXz3WV-0gRvscRdOrsQVo6eLycpY7U3tRLEjkw6iACCEm3PaCieMy7N_J0YA6r7D7y7wuxjI/s200/holiday-1900055_640.jpg" border="0" /></a>

<div align="center" style="width: 200px;"><span style="font: 12pt sans-serif;  color: #6666FF ">До Нового Года осталось

 <b><div align="center"><br />

Счетчик 2 - этот обратный отсчет можно использовать на детских сайтах. 

 Первая часть кода:

<center><div align="center" style="padding:1px; border: 6px double red; width: 240px; height: 350px;">

<a href="https://samasajt.blogspot.ru/ "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1uTs0nDi2TiZ7znW2agZaZo8woKa6mb8rIgJnXLJ7bkSCmupBNk7b3TlGhHl9sa_nUJJwxqzr3lLAnb6zgGp9RaL8BwIUjLqxhUY7W7EqIYHnROhDfL_42RqaK21IE4-yQE5CMrlxDs/s1600/b04200420f3_.jpg" border="0" /></a>

<div align="center" style="width: 200px;"><span style="font: 12pt sans-serif;  color: #FF0066 ">До Нового Года осталось

 <b><div align="center"><br />

Счетчик 3 - красивый счетчик до Нового года в синих тонах

 Первая часть кода:

<center><div align="center" style="padding:1px; border: 4px double blue; width: 200px; height: 350px;">

<a href="https://samasajt.blogspot.ru/ "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_qAf7ieJMpEM0IK4s6E2jY2T7eL4d3ZTwPv_yjyljPZhsuqwlBMPgOi78bQNeo4lJ41DN6j7LduTUl2c30vI4tOVDfScji4xH5yRmhv5rO5GAktLQWFLkZBkkGB6F2CpixlXOP3gwhY0/s1600/christmas-2846337_200x255.jpg" border="0" /></a>

<div align="center" style="width: 200px;"><span style="font: 12pt sans-serif;  color: #0000CC ">До Нового Года осталось

 <b><div align="center"><br />

Счетчик 4 - красивый счетчик до Нового года для сайтов с темным фоном

 Первая чать кода:

<center><div align="center" style="padding:1px; border: 6px double grin; width: 240px; height: 350px;">

<a href="https://inetpodarki.blogspot.ru/ "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFbN3mK2YwGgJFSeFvPbq4nfb4kBYCB4JUhgwxJDXAEmWA86bRLMqslKJVujYAHpW1AbKLiYRsAlqluuY-Z8lgsywuX2C4uSNyM9J8bBVVE2GuszdQ4MU3XQbT8tqTxvYq1KGSH_f-wS8/s1600/christmas-2933007_202x272.jpg" border="0" /></a>

<div align="center" style="width: 200px;"><span style="font: 12pt sans-serif;  color: #00CC66 ">До Нового Года осталось

 <b><div align="center"><br />

ВНИМАНИЕ!!! Первая часть кода без второй работать не будет!!!

Вторая часть  кода счетчика до Нового года:

<script language="javascript">
function cdtime(container, targetdate){
 if (!document.getElementById || !document.getElementById(container)) return
 this.container=document.getElementById(container)
 this.currentTime=new Date()
 this.targetdate=new Date(targetdate)
 this.timesup=false
 this.updateTime()
 }
 cdtime.prototype.updateTime=function(){
 var thisobj=this
 this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
 setTimeout(function(){thisobj.updateTime()}, 1000)
 }
 cdtime.prototype.displaycountdown=function(baseunit, functionref){
 this.baseunit=baseunit
 this.formatresults=functionref
 this.showresults()
 }
 cdtime.prototype.showresults=function(){
 var thisobj=this
 var timediff=(this.targetdate-this.currentTime)/1000
 if (timediff<0){
 this.timesup=true
 this.container.innerHTML=this.formatresults()
 return
 }
 var oneMinute=60
 var oneHour=60*60
 var oneDay=60*60*24
 var dayfield=Math.floor(timediff/oneDay)
 var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
 var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
 var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
 if (this.baseunit=="hours"){
 hourfield=dayfield*24+hourfield
 dayfield="n/a"
 }
 else if (this.baseunit=="minutes"){
 minutefield=dayfield*24*60+hourfield*60+minutefield
 dayfield=hourfield="n/a"
 }
 else if (this.baseunit=="seconds"){
 var secondfield=timediff
 dayfield=hourfield=minutefield="n/a"
 }
 this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
 setTimeout(function(){thisobj.showresults()}, 1000)
 }
 function formatresults2(){
 if (this.timesup==false){
 var displaystring="<span class='nonewyear'>"+arguments[0]+" Дней "+arguments[1]+" Часов<br>"+arguments[2]+" Минут "+arguments[3]+" Секунд</span> "
 }
 else{
 var displaystring="<span class='newyear1'>С Новым годом!!!</span>"
 //alert("С Новым годом!!!")
 }
 return displaystring
 }
 </script>

 <div id="countdowncontainer2"></div>
 <script type="text/javascript">
 var currentyear=new Date().getFullYear()
 var thischristmasyear=(new Date().getMonth()==0 && new Date().getDate()==1)? currentyear : currentyear + 1
 var christmas=new cdtime("countdowncontainer2", "january 1, "+thischristmasyear+" 0:0:00")
 christmas.displaycountdown("days", formatresults2)
</script></div></b></span></div></div></center><b></b>

Итак, первую и вторую часть кода копируем и вставляем в один гаджет HTML/JavaScript:

Еще украшения для блогов и сайтов к Новому году.

P.S. Также смотрите и забирайте готовые красивые анимированные счетчики обратного отсчета до Нового года.