Новогодняя гирлянда для сайта

Новогодняя гирлянда для сайтаНовогодние праздники не за горами, многие хотят добавить праздничного настроения и украсить свой блог. Предлагаю установить новогоднюю гирлянду для сайта. Гирлянда подойдет как для светлого, так и для темного дизайна. Располагаться она будет в самом верху браузера и сохранять свою позицию даже при прокрутке страницы, либо просто вверху сайта.

Жмите кнопку «Демо», смотрите как будет выглядеть работающая новогодняя гирлянда для сайта:

Д Е М О

Добавить гирлянду несложно, для этого достаточно добавить этот код в файл header.php (сразу после <body>) или footer.php (до </body>):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* Новогодняя гирлянда для сайта — начало */
<style type="text/css">  
#gerljanda {
position:fixed;top:0;
left:0;
background-image:url('http://lh5.googleusercontent.com/-obNunPiVVd4/VJOuk2f29_I/AAAAAAAAE3Y/SOoFIrFTTkk/s800/gerljanda1.png');height:36px;
width:100%;
overflow:hidden;
z-index:99
}  
#nums_1 {padding:100px}  
.gerljanda_1 {background-position: 0 0}  
.gerljanda_2 {background-position: 0 -36px}  
.gerljanda_3 {background-position: 0 -72px}  
</style>  
 
  <div id="gerljanda" class="gerljanda_3"><div id="nums_1">1</div></div>  
 
<script type="text/javascript">  
  function gerljanda() {  
  nums = document.getElementById('nums_1').innerHTML  
  if(nums == 1) {document.getElementById('gerljanda').className='gerljanda_1';document.getElementById('nums_1').innerHTML='2'}  
  if(nums == 2) {document.getElementById('gerljanda').className='gerljanda_2';document.getElementById('nums_1').innerHTML='3'}  
  if(nums == 3) {document.getElementById('gerljanda').className='gerljanda_3';document.getElementById('nums_1').innerHTML='1'}  
  }  
 
  setInterval(function(){gerljanda()}, 600)
  </script> 
/* Новогодняя гирлянда для сайта — конец */

Если боитесь залезать в программный код, используйте плагин Header and Footer. С его помощью легко можно добавлять и удалять коды, не меняя шаблона. Также можно использовать для этой цели виджеты или гаджеты (для Blogger). После того как закончатся праздники достаточно будет просто удалить код.

Строки 4 и 7 я выделила не случайно. В 4-ой строке можете оставить значение position:fixed (расположение вверху сайта сохраняется при прокрутке страницы) или установить position:absolute (расположение вверху сайта). В 7-ой строке url картинки, можете загнать себе в медиафайлы и изменить адрес ссылки на свой.

Светлана Ковалева

Мастер креатива и нестандартных решений
ВКонтакте Facebook Twitter Одноклассники
Запись опубликована в рубрике Сайтостроение с метками , , . Добавьте в закладки постоянную ссылку.
Подпишитесь на обновления блога:

8 комментариев: Новогодняя гирлянда для сайта

  1. Олеся Царёва говорит:

    Спасибо за фонарики.

  2. Ольга говорит:

    А в Блоггере это можно добавить?

  3. Руслан говорит:

    Спасибо авторам! Здорово украсил сайт!

  4. Михаил говорит:

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

  5. Михаил говорит:

    Добрый вечер Светлана, спасибо за соц иконки.

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