RSS
 

 

До нового года осталось…

25 Дек

Меньше недели осталось до нового 2012 года. Многие дано наверно установили и нарядили уже елки дома.  А на свои сайты и блоги поставили елку?

Предлагаю вам это сделать.

Совершенно случайно наткнулся я на интереснейшую статью на хабре Создаем новогоднюю ёлку-таймер при помощи CSS3.  Используя идеи там заложенные, и немного поработав в графическом редакторе и  был создан текст для виджета, впрочем этот текст можно вставить и просто в пост.

Результат моих трудов   можете наблюдать справа вверху под полем  поиска, ну а подробности в продолжении

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

Изначально мне понравилась идеи и ее метод реализации, но отсутствие  полной поддержки CSS3  у всех браузеров остановил меня и изображение елки я сделал фоновой картинкой PNG.

также я немного подобрал размеры шрифта и блока чтобы он оптимально вписывался в большинство сайдбаров. Размер виджета -елки счетчика 165Х250 точек.

Собственно для пользователей WordPress ,как и большинства других сайтов и движков, в сайдбар нужно добавит обычный текстовый виджет поддерживающий встаку HTML.

Вот собственно и сам код:

<script type="text/javascript" src="http://s2.tumencev.pp.ua/js/jquery.countdown.js"></script>
<script type="text/javascript">
jQuery(function () {
 var austDay = new Date(2011, 1, 1, 00, 00, 00) ;
 austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 1);
 jQuery('#defaultCountdown').countdown({until: austDay});
 jQuery('#year').text(austDay.getFullYear());
});</script>
<style type="text/css" media="screen">.countdown_section{font-size: 80%;text-align: center;display: block}.countdown_amount{font-size: 200%}</style>
<div class="ny-tree" style="width:165px;height:250px;padding:0px;overflow:hidden;background:url(http://s1.tumencev.pp.ua/images/ny-tree.png) no-repeat 0 0;">
<div id="defaultCountdown" style="font-size: 14px;color: #ffffff;font-family: Verdana, Arial;padding-top:50px;"></div></div>

Пример работы скрипта можно посмотреть на отдельной странице - http://www.tumencev.pp.ua/ny-tree.htm

Замечания:

1. Для работы счетчика нужна всем известная и широко распространенная библиотека jQuery v1.5 и выше. Если у вас не используется jQuery то добавьте перед первой строчкой

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>

2. В первой строке скрипт плагина таймера   берется с моего сайта (http://s2.tumencev.pp.ua/js/jquery.countdown.js) и настроен на украинский язык. Локализации для других языков и подробности по  jquery-countdown - http://code.google.com/p/jquery-countdown/

3.Фоновое изображение елочки находится по адресу http://s1.tumencev.pp.ua/images/ny-tree.png можете заменить его на свое.

PS. Пользуйтесь на здоровье, рассказывайте остальным, просите друзей и знакомых помочь вам установить на сайт такую елочку если у самих не получилось.  В конце концов спрашивайте меня - помогу с удовольствием.

 


 
 

Метки: , , , , , 25.12.2011