Приветствую, всех. Всегда перед Новым годом многие ломают голову в поиске идей для украшения сайта. Я в очередной раз хочу поделиться с вами своими мыслями и предложить некоторые варианты оформления блога к предстоящему празднику. И дам ниже ссылки на то, что приходило в голову в прошлогодних постах.
Если вы считаете, что пока рановато, отложите этот пост в закладки. Я обратила внимание, что некоторые блогеры уже украшают свой блог. Решайте сами. А вот таймер обратного отчёта времени, думаю, установить самое время.
Посмотрите как он выглядит на тестовом блоге. Сразу обратите внимание на оформление новогоднего пейзажа, всплывающего окна с Новогодними пожеланиями и зафиксированную гирлянду в верху. О них речь будет в этом сообщении.
Таймер обратного отсчёта времени до Нового года.
В прошлом году я публиковала пост, как сделать новогодний таймер отсчёта времени. Вот ещё один вариант.
Всё, что в коде отмечено синими строчками - это стили 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.
Фиксированная гирлянда по центру.
При скроллинге страницы она всегда на виду.
Вставляйте своё изображение, в строку, отмеченную синим. Так же увидеть можно в редакторе кодов, ссылка на который выше.
Меняющийся задний фон со снежинками.
Такие не раздражают посетителя , потому что расположены не на всём, а только на заднем фоне.
Понадобиться такой код
Этот код устанавливаем в шаблоне блога перед строкой ]]></b:skin>.
Не плохо будет смотреться бегущий за курсором текст, в качестве Новогоднего украшения.
Нужно будет только запомнить в какой гаджет установлены коды украшений, чтобы после праздника их легко было убрать.
Ещё по теме -
Красивый Новогодний пейзаж для блога
И опять про Новый год
Думаю, что из предложенных вариантов оформления блога к Новому году, вы сможете что-то подобрать для себя. Вот здесь очень много всякой Новогодней красоты http://priroda.inc.ru/prazdnik/anima/anima1.html.
Спасибо всем за внимание. Очень хочется посмотреть, как вы украсите свои блоги к празднику. Поделитесь, пожалуйста потом в комментариях. Всем удачи и до встречи.
Если вы считаете, что пока рановато, отложите этот пост в закладки. Я обратила внимание, что некоторые блогеры уже украшают свой блог. Решайте сами. А вот таймер обратного отчёта времени, думаю, установить самое время.
Посмотрите как он выглядит на тестовом блоге. Сразу обратите внимание на оформление новогоднего пейзажа, всплывающего окна с Новогодними пожеланиями и зафиксированную гирлянду в верху. О них речь будет в этом сообщении.
Таймер обратного отсчёта времени до Нового года.
В прошлом году я публиковала пост, как сделать новогодний таймер отсчёта времени. Вот ещё один вариант.
<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>
.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>
<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;}
}
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.
Спасибо всем за внимание. Очень хочется посмотреть, как вы украсите свои блоги к празднику. Поделитесь, пожалуйста потом в комментариях. Всем удачи и до встречи.
здесь можно оформить подписку на новые шпаргалки
Хороши идеи, Вика. Спасибо. Обязательно воспользуюсь.
ОтветитьУдалитьЛюба, совсем забыла дать ссылку на танцующего Санта. Прикольно получается вот здесь почитай http://www.shpargalochki.ru/2015/12/santa-klaus-dla-bloga.html
ОтветитьУдалитьУкрашай блог, загляну посмотреть.
Виктория, у тебя появились часики прикольные! А они правильное время показывают?
ОтветитьУдалитьИрина, да правильные. Это как раз таймер обратного отсчёта времени до праздника. В 12-00 31 числа они будет просто поздравление.
УдалитьИнтересные украшалочки, спасибо, Вика! ╰⊰⊹✿
ОтветитьУдалитьТатьяна, приятно слышать. Спасибо Вам.
УдалитьА я что-то замоталась и забыла о таком всем.. Надо чего-нибудь нарядного себе на блог разместить для настроения.
ОтветитьУдалитьНаташ, вот так всегда у нас всех. как говорила моя бабушка - Как ехать, так кобылу шить.
ОтветитьУдалитьНо ещё есть время успеешь.
У меня на блоге не получились угловые украшения. Но это не странно вообще-то, блог мой такой.. живет своей жизнью. Наблюдаю только. Иногда позволяет что-то менять, уже хорошо)
ОтветитьУдалитьНаташа, возможно -такое бывает. Где-то, что-то с чем-то не дружит. А вот таймер с петушком мне у тебя понравился.
Удалитьспасибо огромное
ОтветитьУдалитьСемён, украшай свой блог к празднику. Забегу.
УдалитьПривет, Вика, спасибо за напоминание, надо бы что-нибудь украсить.
ОтветитьУдалитьЗашла к тебе в блог и подумала, туда ли я попала?) Новый дизайн в стиле минимализм?
Наверное, не легко было попрощаться со старым-добрым оформлением.
Привет, Олеся. рада видеть. ну ты по любому что-то придумаешь. А со старым надумала прощаться давненько, но подборка шаблона, все моменты до переноса и прочее немного напрягали. Но вот адаптовый нашла, да ещё пока подгоняла под себя. Хотелось более современный. Это выпуск 2016 года. Пока устраивает-нравится. посмотрим, как потом поведёт.
УдалитьПривет, решила пожаловаться!) На свой блог!
УдалитьДавно не трогала его, сегодня решила поиграться-поукрашать. На демоблоге без проблем поменяла на меняющийся фон со снежинками без проблем, подобрала цвета, а на основной не встал код, ничего не поменялось.
Решила сделать шишечки по углам, вставляю в гаджет код, а после его сохранения участок кода, где стиль, пропадает, несколько раз пробовала. Кстати, в демоблоге та же история.
Что за фигня? Бывают такие вирусы, которые жрут коды?)))
Вика. Саночки в шапке и таймер с часиками - супер! Всё изящно смотрится. И вообще, повторюсь, "новый прикид" блога классный!
ОтветитьУдалитьСпасибо Люба за внимание и отзывы. .
ОтветитьУдалитьКласс! Люблю всякие украшения, создающие настроение! А я в прошлом году наустанавливала специальные плагины и чувствовала себя прямо-таки программистом :)
ОтветитьУдалитьДа, Олли. Я помню у тебя стояла красивая гирлянда вверху сайта. Очень красивая и настроение на самом деле праздничное.
УдалитьОлеся, да видимо ты многое пропустила. С переходом Блогггер на 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
Вика. Ва-у, а снежок-то класс!!! Я подумала, почему же фон меняется, а у меня на пробном гаджет стоял с меняющимся фоном. http://000149.blogspot.ru/ Все твои "красивости" перепробую. Спасибо тебе большое.
ОтветитьУдалитьЛюба, посмотрела у тебя на тестовом. Код со снежинками в этом сообщении делает снежинки на заднем фоне с меняющимся фоном. Правда красиво смотрится. Пробуй пока ещё время есть.
Удалить