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

03.12.2017

Счетчик "До Нового года осталось" на сайт
И снова год пролетел... Не успеем оглянуться, как будем вновь встречать Новый год... 
Итак, поехали! Обратный отсчет пошел! Устанавливаем на сайт красивый счетчик "До Нового года осталось..." со своей картинкой и думаем о подарках близким, друзьям, коллегам.
В ожидании 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://1.bp.blogspot.com/-28JelGun4wU/WiMzq30xc9I/AAAAAAAAAMM/F-I-QJdxP-AXQ5TCDLibBddPQ28ZXpbdgCLcBGAs/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://1.bp.blogspot.com/-28JelGun4wU/WiMzq30xc9I/AAAAAAAAAMM/F-I-QJdxP-AXQ5TCDLibBddPQ28ZXpbdgCLcBGAs/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://4.bp.blogspot.com/-qo3pDX-MQVQ/WiL5lRbDZNI/AAAAAAAAAKw/27crtDkPcHAJorMFzW-nLkAp3HBriLcegCLcBGAs/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://4.bp.blogspot.com/-wAqUh24K118/WiMGBoFbTPI/AAAAAAAAALI/FKiB1S2uGnUgWh9ZCYshXXBJdlFh61WEACLcBGAs/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://1.bp.blogspot.com/-28JelGun4wU/WiMzq30xc9I/AAAAAAAAAMM/F-I-QJdxP-AXQ5TCDLibBddPQ28ZXpbdgCLcBGAs/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://3.bp.blogspot.com/-nz-6xpY1QSg/WiMwSEqdSlI/AAAAAAAAAMA/RtcTdyNOoOoZOe5d1Tes4eAKANVmKuXDgCLcBGAs/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:


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

11 комментариев:

  1. Вот спасибо! Попробовала и у меня получилось, ура!)

    ОтветитьУдалить
  2. ЗДОРОВО! Да, скоро Новый год!

    ОтветитьУдалить
  3. Большое спасибо! Установила счётчик2 на школьный блог. Получилось красиво!

    ОтветитьУдалить
  4. Спасибо! Чудная зеленая елочка теперь есть и у меня! Скоро Новый Год!

    ОтветитьУдалить
  5. Мария, благодарю за внимание. Чудесные ёлочки.

    ОтветитьУдалить
  6. Все получилось, спасибо!

    ОтветитьУдалить
  7. Спасибо! Хорошего дня!

    ОтветитьУдалить
  8. Спасибо, очень красиво, но почему-то цифры оказались вне рамки.

    ОтветитьУдалить
  9. "Переповторила" - всё получилось! Очаровательная ёлочка! И по размеру подходит. Думаю, понравится детям! Ещё раз спасибо - и с наступающим праздником!

    ОтветитьУдалить
  10. Спасибо за чудесный счётчик. Поставила со снеговиком - очень даже украсил страничку моего блога!)))) Правда для него пришлось немного увеличить ширину колонки. Но не жалко - он такой классный!

    ОтветитьУдалить
  11. А вы не знаете как загружать картинку или брать ссылку на нее, что бы разместить эту картинку в гаджете HTML/JavaScript

    ОтветитьУдалить

Kwork.ru - услуги фрилансеров от 500 руб.

Загляните и на другие страницы ^