С наступающим годом Лошади или скрипт таймера для блога

0_64c55_fa660494_XLЗдравствуйте, дорогие читатели и гости сайта «Тестируем шаблон». Рада новой встрече на блоге.

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

Конечно, такой информер можно сделать с помощью плагина (ну или почти такой), но про плагин я уже писала, а вот с помощью скрипта сделать виджет указывающий на количество дней оставшихся до какого-то события намного практичнее и нагрузка вроде поменьше, чем от плагина должна быть ;-)

Скрипт я нашла на сайте http://www.zaucoz.ru/ . До установки этого скрипта, я перепробовала порядка пяти-шести, но все они не работали при установке в сайдбар, а этот скрипт нужно просто скопировать и в категории настроек «Виджеты»  добавить его виджет «Текст».

Хочу отметить, что скрипт можно использовать не только к новогоднему празднику, но и меняя немного содержимое, использовать к какому-то другому мероприятию на блоге.

  • Синим шрифтом в коде я выделила дату, которую можно заменить на собственную,
  • красным шрифтом выделен текст, просматриваемый в виджете,
  • а вот розовым выделен текст, который появится после того, как таймер достигнет заданной даты.

<div id=»bp_count_down_div»></div> <script language=»JavaScript»> var bp_date_target = new Date(«January 01, 2014 00:00:00«); var bp_date_now = new Date(); var bp_count_down_complete_message = «Поздравляю с Новым 2013 годом! Желаю вам счастья и удачи!«; if (bp_date_now >= bp_date_target) { document.getElementById(«bp_count_down_div»).innerHTML = bp_count_down_complete_message; } else { bp_time_difference = Math.floor(((bp_date_target — bp_date_now).valueOf()) / 1000); display_time_difference(bp_time_difference); } function display_time_difference(bp_time_difference) { if (bp_time_difference <= 0) { document.getElementById(«bp_count_down_div»).innerHTML = bp_count_down_complete_message; return; } bp_count_down_message = bp_format_seconds(bp_time_difference, 86400, 100000) + » дней » + bp_format_seconds(bp_time_difference, 3600, 24) + » часов » + bp_format_seconds(bp_time_difference, 60, 60) + » минут » + bp_format_seconds(bp_time_difference, 1, 60) + » секунд  осталось до Нового  2014 года.«; document.getElementById(«bp_count_down_div»).innerHTML = bp_count_down_message; setTimeout(«display_time_difference(» + (bp_time_difference — 1) + «)», 1000); } function bp_format_seconds(secs, num1, num2) { num = ((Math.floor(secs / num1)) % num2).toString(); if (num.length < 2) s = «0» + num; return «» + num + «»; } </script>

Теперь пару слов о том, как разукрасить такой таймер, точнее добавить к нему картинку.

В этот же виджет «Текст» над кодом таймера нужно добавить код картинки, лучше если она будет хранится на вашем блоге в медиабиблиотеке.

Код картинки выглядит так, если вы хотите, чтобы изображении располагалось по центру, если же нет, то уберите тег center по краям.

<center><img title=»С наступающим праздником!» src=»http://test-shablon.ru/wp-content/uploads/2012/08/14.gif» alt=»» width=»132″ height=»107″ border=»0″ /></center>

Синим выделен адрес картинки на блоге, а красным-надпись, которая видна при наведении мышкой на картинку. Единственно, не забывайте менять параметры изображения в коде, чтобы картинка не деформировалась, а все данные можно найти в медиабиблиотеке: синим на фото выделен адрес, а параметры наверху, рядом с самой картинкой.

Plagin                            WordPress Tooltip4222Для тех читателей, кто решится установить скрипт, я подобрала несколько изображений без фона и небольшого размера, специально для виджета в сайдбаре.

Просто копируйте понравившуюся картинку и сохраняйте себе на блог.

0_561d2_832b499c_S

index_4225

28

299199231

563843859

Теперь из окошечка ниже можно скопировать скрипт таймера,

<div id="bp_count_down_div"></div> <script language="JavaScript"> var bp_date_target = new Date("January 01, 2014 00:00:00"); var bp_date_now = new Date(); var bp_count_down_complete_message = "Поздравляю с Новым 2013 годом! Желаю вам счастья и удачи!"; if (bp_date_now >= bp_date_target) { document.getElementById("bp_count_down_div").innerHTML = bp_count_down_complete_message; } else { bp_time_difference = Math.floor(((bp_date_target - bp_date_now).valueOf()) / 1000); display_time_difference(bp_time_difference); } function display_time_difference(bp_time_difference) { if (bp_time_difference <= 0) { document.getElementById("bp_count_down_div").innerHTML = bp_count_down_complete_message; return; } bp_count_down_message = bp_format_seconds(bp_time_difference, 86400, 100000) + " дней " + bp_format_seconds(bp_time_difference, 3600, 24) + " часов " + bp_format_seconds(bp_time_difference, 60, 60) + " минут " + bp_format_seconds(bp_time_difference, 1, 60) + " секунд  осталось до Нового  2014 года."; document.getElementById("bp_count_down_div").innerHTML = bp_count_down_message; setTimeout("display_time_difference(" + (bp_time_difference - 1) + ")", 1000); } function bp_format_seconds(secs, num1, num2) { num = ((Math.floor(secs / num1)) % num2).toString(); if (num.length < 2) s = "0" + num; return "" + num + ""; } </script>

а из этого окошечка код изображения, и не забудьте добавить в код адрес вашего изображения.

<center><img title="С наступающим праздником!" src="адрес вашей картинки" alt="" width="132" height="107" border="0" /></center>

Удачи в настройках! До новых встреч, с вами была Юлия. О других находках мы поговорим в следующих статьях рубрики «Дизайн сайта».  Подборку новогодних плагинов и скриптов для снега можно посмотреть в этой статье. 

:heart: Расскажи другу, пусть тоже дизайном займется :good:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • LinkedIn
  • Digg
  • Blogger
  • Блог Li.ру
  • Сто закладок
  • RSS
  • Одноклассники

Об авторе Юлия

Меня зовут Юлия. Этот сайт я начала из-за моей проснувшейся и непонятной любви к рассмотрению настроек шаблонов. Сама я пока создавать темы на Вордпресс не умею, но надеюсь, что это когда-нибудь случится. Пишите в комментариях свои вопросы: я обязательно отвечу. Ну и замечания тоже приветствуются-))
Метки: . Закладка Постоянная ссылка.

52 комментария: С наступающим годом Лошади или скрипт таймера для блога

  1. Светлана пишет:

    Юлечка, спасибо тебе огромное, ты самая настоящая волшебница! :rose: :heart: Пошла ставить таймер себе на блог

  2. Алёна пишет:

    А вот мой как обычно — не стал дружить (

    • Юлия пишет:

      Уж на что у Светланы шаблон привередливый (она не даст соврать ;-) ) и то в этот раз обошлось без приключений…

      • Светлана пишет:

        Еще какой привередливый, я в прошлом году все предложенные Юлией навороты к Новому году перепробовала- и ничего не вышло. А тут с первого раза все удалось!!!

  3. Ирина пишет:

    Юлечка спасибо огромное, впервые у меня получилось с первого раза. Я установила, урааааааа…

  4. Larisenok пишет:

    вот это — С Наступающим… — куда вставлять?

  5. Larisenok пишет:

    это боковая панель? а наверху как?

    • Юлия пишет:

      Где у тебя в шаблоне есть области под виджет, туда и можешь закинуть ;-) … Виджет «Текст» и все дела, ну если только шаблон не заартачится…

  6. Larisenok пишет:

    я попробую

  7. Ирина пишет:

    Юля, супер!!! Спасибо!!! Классный получился таймер. Ирина

  8. Ирина пишет:

    Хороший учитель! Совершенствуюсь.

  9. Елена пишет:

    Юля, спасибо!! Так здорово получилось!!

  10. Светлана пишет:

    Вот видишь, Юля, сколько желающих нашлось поставить себе такой информер :-)

  11. Лара пишет:

    Ой, какие лошадки красивишные :good: Тож такую хочуууу… на выходных буду пробовать, только лошадку бы подобрать :heart:

  12. Сергей пишет:

    По мне, так надо было деда мороза на коня посадить. Эффектно бы смотрелось! :good:

  13. Светлана пишет:

    красивая лошадка и вообще идея классная!
    а у меня яша и так косяки выдает на блоге…уже и боюсь что вставлять. последний раз поставила сео два в одном и вот не знаю — в нем ли причина глюков с индексацией или что-то еще…вобщем не знаю что делать — в вебмастере одно, а в выдаче другое..

  14. Ирина пишет:

    Юля! Ты как всегда на высоте! Спасибо огромное! Я в прошлом году долго искала такой информер и не нашла. Ставила на тебя глядя плагин. Но сейчас как-то больше люблю скриптами все ставить.
    На скорую руку поставила такой скрипт (и это вместо того, чтобы кормить детей :whistle: — не смогла удержаться)

  15. Irina пишет:

    Здорово придумала! Красиво главное будет! Теперь к кому не зайдешь у всех такой таймер будет?
    Пойду у Светы посмотрю. Потом себе поставлю.

    • Юлия пишет:

      Ирочка, в каждом шаблоне такой таймер еще по-разному смотрится. Вот у Иринки лошадка очень красивая-так и таймер иначе смотрится :good:

  16. Irina пишет:

    Сходила к Свете! Понравилось! Только лошадку хочу другую. Поищу в инете.

  17. Наталья пишет:

    Год лошади- это мой год. Но ставить или нет, пока подумаю. Может позже. Пока как-то не ощущается этот новый год. :yes:

  18. Наталья пишет:

    замечательный скрипт, я правда уже другой поставила, но если тот заартачится, знаю куда бежать ;)

    • Юлия пишет:

      Надеюсь, что Вам код с того красивого сайта не принесет неприятного сюрприза, как мне прошлый год. Я теперь такие скрипты обхожу стороной, да и ссылка на другой сайт на главной…., вообщем мне больше не хочется Happy-Grin

      • Наталья пишет:

        а у меня не на главной и исходящей ссылки нет, я проверила

        • Юлия пишет:

          Да, Наталья, извините, конечно, он не на главной, да и ссылок исходящих нет. У Вас все хорошо…

          Я просто не очень люблю виджеты с переходом на другой чужой сайт, и ничего с собой поделать не могу, извините. Heart

  19. Лариса пишет:

    Лошадки, просто очаровашки, чуть позже тоже воспользуюсь этим скриптом, поставлю таймер.

  20. mrs.interesno пишет:

    Последняя лошадка просто лапа. :)
    Себе что-ли ее забрать.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

[+] Жми на плюс- Открой тайник- Чтоб прикольный СМАЙЛ возник!
:bye: 
:good: 
:negative: 
:scratch: 
:wacko: 
:yahoo: 
B-) 
:heart: 
:rose: 
:-) 
:whistle: 
:yes: 
:cry: 
:mail: 
:-( 
:unsure: 
;-)