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

Автор: | 14.12.2014
8 комментариев

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

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

Д Е М О

Добавить гирлянду несложно, для этого достаточно добавить этот код в файл 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('/-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> 
/* Новогодняя гирлянда для сайта — конец */

/* Новогодняя гирлянда для сайта — начало */ <div id=»gerljanda» class=»gerljanda_3″><div id=»nums_1″>1</div></div> /* Новогодняя гирлянда для сайта — конец */

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

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

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

  1. Олеся Царёва

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

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

      Пожалуйста!

  2. Ольга

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

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

      Можно, Ольга. Внимательно почитайте, в сообщении написано как это сделать.

  3. Руслан

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

  4. Михаил

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

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

      Доброго времени суток, Михаил! Пожалуйста! Социальные иконки у меня с сайта Share42.com

  5. Михаил

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

Обсуждение закрыто.