Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

Идеи Новогодних украшений для блога

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

украшение сайта

Если вы считаете, что пока рановато, отложите этот пост в закладки. Я обратила внимание, что некоторые блогеры уже украшают свой блог. Решайте сами. А вот таймер обратного отчёта времени, думаю, установить самое время.

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

Таймер обратного отсчёта времени до Нового года.

В прошлом году я публиковала пост, как сделать новогодний таймер отсчёта времени. Вот ещё один вариант.

<style>
.lcdstyle{
background:#CCCCCC ;
color:#FFF ;
font: bold 20px arial;
padding: 15px;
border:2px solid #669999 ;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow: 5px 5px 5px #99CCCC ;
}

.lcdstyle sup{
font-size: 120%
} </style>

<script type="text/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) //update time every second
}

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 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
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"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}



//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc


function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until December 25, 2011 18:25:00"
}
else{ //else if target date/time met
var displaystring=""
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>дней</sup> "+arguments[1]+" <sup>часов</sup> "+arguments[2]+" <sup>минут</sup> "+arguments[3]+" <sup>секунд</sup></span> "
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("HAPPY NEW YEAR EVERYBODY!") //Instead, perform a custom alert
}
return displaystring
}

</script>
<table><tbody>
<tr>
<td>
<img style="float:left; " src="http://www.playcast.ru/uploads/2014/11/19/10704778.png " width="125px"; height,="125px" />
<h1 style="color:#003366; padding-top:60px;">До нового 2017 года осталось...</h1>
</td></tr>

<tr><td>
<div id="countdowncontainer"></div>

<div id="countdowncontainer2"></div>

<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)

var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>31)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer2", "December 31, "+thischristmasyear+" 23:59:59")
christmas.displaycountdown("days", formatresults2)
</script>
</td></tr></tbody></table>


Всё, что в коде отмечено синими строчками - это стили CSS. Меняйте их на своё усмотрение - это и сама картинка, фон, цвет и размеры шрифта.

Код устанавливается в гаджет HTML/JavaScript.

Новогодние веточки, шишки, шары по всем углам страницы.

Очень красиво смотрятся небольшие картинки в формате PNG в каждом углу блога.


<style>

.agsid 1{

LEFT: 0px; position: fixed; TOP: 0px;  }
.agsid2 { RIGHT: 0px; position: fixed; TOP: 0px;  }
 </style>
<div class="agsid1">
 <img width="180px" src=" http://www.playcast.ru/uploads/2016/01/02/16620074.png" border="0" /> </div>
 <div class="agsid2"> <img width="180px" src="http://www.playcast.ru/uploads/2016/01/02/16620074.png" border="0" /> </div>


Здесь замените адреса картинок на свои. Скопируйте код и посмотрите, как это выглядит в этом редакторе. Устанавливайте готовый код в гаджет HTML/JavaScript.

Фиксированная гирлянда по центру.

При скроллинге страницы она всегда на виду.

<div style="padding: 0px;">
<img class="st1" src="http://webanetlabs.net/ng2013/novyigod5.png " style="position:fixed; top: 0px;right:500px;border:none;z-index:5;"/></div>


Вставляйте своё изображение, в строку, отмеченную синим. Так же увидеть можно в редакторе кодов, ссылка на который выше.

Меняющийся задний фон со снежинками.

Такие не раздражают посетителя , потому что расположены не на всём, а только на заднем фоне.

новогодние снежинки в блоге


Понадобиться такой код

body {
background-attachment: fixed;
background-color:#000;
background-image:url('http://i39.servimg.com/u/f39/14/80/95/87/110.png'),
url('http://i39.servimg.com/u/f39/14/80/95/87/210.png'),
url('http://i39.servimg.com/u/f39/14/80/95/87/310.png'); /*картинки снега*/
-webkit-animation:snow 30s linear infinite;
-moz-animation:snow 30s linear infinite;
-ms-animation:snow 30s linear infinite;
animation:snow 30s linear infinite;
}

@keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;}
}
@-moz-keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;}
}
@-webkit-keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;}
}
@-ms-keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;}
}


Этот код устанавливаем в шаблоне блога перед строкой ]]></b:skin>.

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

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

Ещё по теме -

Красивый Новогодний пейзаж для блога 
И опять про Новый год

Думаю, что из предложенных вариантов оформления блога к Новому году, вы сможете что-то подобрать для себя. Вот здесь очень много всякой Новогодней красоты http://priroda.inc.ru/prazdnik/anima/anima1.html. 

Спасибо всем за внимание. Очень хочется посмотреть, как вы украсите свои блоги к празднику. Поделитесь, пожалуйста потом в комментариях. Всем удачи и до встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


22 комментария:

  1. Хороши идеи, Вика. Спасибо. Обязательно воспользуюсь.

    ОтветитьУдалить
  2. Люба, совсем забыла дать ссылку на танцующего Санта. Прикольно получается вот здесь почитай http://www.shpargalochki.ru/2015/12/santa-klaus-dla-bloga.html
    Украшай блог, загляну посмотреть.

    ОтветитьУдалить
  3. Виктория, у тебя появились часики прикольные! А они правильное время показывают?

    ОтветитьУдалить
    Ответы
    1. Ирина, да правильные. Это как раз таймер обратного отсчёта времени до праздника. В 12-00 31 числа они будет просто поздравление.

      Удалить
  4. Интересные украшалочки, спасибо, Вика! ╰⊰⊹✿

    ОтветитьУдалить
    Ответы
    1. Татьяна, приятно слышать. Спасибо Вам.

      Удалить
  5. А я что-то замоталась и забыла о таком всем.. Надо чего-нибудь нарядного себе на блог разместить для настроения.

    ОтветитьУдалить
  6. Наташ, вот так всегда у нас всех. как говорила моя бабушка - Как ехать, так кобылу шить.
    Но ещё есть время успеешь.

    ОтветитьУдалить
  7. У меня на блоге не получились угловые украшения. Но это не странно вообще-то, блог мой такой.. живет своей жизнью. Наблюдаю только. Иногда позволяет что-то менять, уже хорошо)

    ОтветитьУдалить
    Ответы
    1. Наташа, возможно -такое бывает. Где-то, что-то с чем-то не дружит. А вот таймер с петушком мне у тебя понравился.

      Удалить
  8. Ответы
    1. Семён, украшай свой блог к празднику. Забегу.

      Удалить
  9. Привет, Вика, спасибо за напоминание, надо бы что-нибудь украсить.
    Зашла к тебе в блог и подумала, туда ли я попала?) Новый дизайн в стиле минимализм?
    Наверное, не легко было попрощаться со старым-добрым оформлением.

    ОтветитьУдалить
    Ответы
    1. Привет, Олеся. рада видеть. ну ты по любому что-то придумаешь. А со старым надумала прощаться давненько, но подборка шаблона, все моменты до переноса и прочее немного напрягали. Но вот адаптовый нашла, да ещё пока подгоняла под себя. Хотелось более современный. Это выпуск 2016 года. Пока устраивает-нравится. посмотрим, как потом поведёт.

      Удалить
    2. Привет, решила пожаловаться!) На свой блог!
      Давно не трогала его, сегодня решила поиграться-поукрашать. На демоблоге без проблем поменяла на меняющийся фон со снежинками без проблем, подобрала цвета, а на основной не встал код, ничего не поменялось.
      Решила сделать шишечки по углам, вставляю в гаджет код, а после его сохранения участок кода, где стиль, пропадает, несколько раз пробовала. Кстати, в демоблоге та же история.
      Что за фигня? Бывают такие вирусы, которые жрут коды?)))

      Удалить
  10. Вика. Саночки в шапке и таймер с часиками - супер! Всё изящно смотрится. И вообще, повторюсь, "новый прикид" блога классный!

    ОтветитьУдалить
  11. Спасибо Люба за внимание и отзывы. .

    ОтветитьУдалить
  12. Класс! Люблю всякие украшения, создающие настроение! А я в прошлом году наустанавливала специальные плагины и чувствовала себя прямо-таки программистом :)

    ОтветитьУдалить
    Ответы
    1. Да, Олли. Я помню у тебя стояла красивая гирлянда вверху сайта. Очень красивая и настроение на самом деле праздничное.

      Удалить
  13. Олеся, да видимо ты многое пропустила. С переходом Блогггер на Htpps соединение можешь тут почитать https://security.googleblog.com/2016/05/bringing-https-to-all-blogspot-domain.html
    И гаджеты у многих полетели. тут у тебя надо смотреть как начинается адрес картинок Htpp или
    https
    Ну вот ещё про это http://www.ipetrenko.ru/2015/10/blogspot-https.html

    ОтветитьУдалить
  14. Вика. Ва-у, а снежок-то класс!!! Я подумала, почему же фон меняется, а у меня на пробном гаджет стоял с меняющимся фоном. http://000149.blogspot.ru/ Все твои "красивости" перепробую. Спасибо тебе большое.

    ОтветитьУдалить
    Ответы
    1. Люба, посмотрела у тебя на тестовом. Код со снежинками в этом сообщении делает снежинки на заднем фоне с меняющимся фоном. Правда красиво смотрится. Пробуй пока ещё время есть.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML