Идеи за новогодишен дизайн на блога

Здравейте всички! Винаги преди Нова година много от нас са озадачени в търсенето на идеи за празнична украса на блога. Днес искам да споделя с вас моите идеи и да предложа някои възможности за оформянето на дизайна на нашия блог за предстоящия празник. Таймер за обратно броене, снежинки, новогодишни венци и гирлянди.

1. Таймер за обратно броене
2. Снежинки
3. Новогодишни гирлянди
4. Анимиран фон със снежинки
5. Падащи снежинки

Ако смятате, че е твърде рано, поставете тази публикация в отметките си. Забелязах, че някои блогъри вече украсяват своите блогове. Решението е ваше. Но мисля, че таймерът за обратното броене на оставащото време до предстоящия празник е време да се инсталира.
Всичко, което ви предлагам, без последния код, можете да тествате чрез този инструмент.

Таймер за обратно броене

Всичко в кода, което се отнася за стиловете е на CSS. Променете по свое усмотрение фон, цвят и размер на шрифта. Инсталира се в притурка HTML / JavaScript.

Код

<center><style>

.lcdstyle{

background:#BFE3FE ;

color:#1919B3 ;

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]+" ^дни "+arguments[1]+" ^часа "+arguments[2]+" ^минути "+arguments[3]+" ^{секунди}</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:#1919B3; padding-top:60px;">До новата 2019 година остават...</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></center>

Снежинки

Кодът на снежинките се инсталира в HTML режим на желано място в публикация.

Код за една снежинка

❄

<div style="text-align: center;"><span style="color: #45818e;font-size:26px"> 

&#10052;</span></div>

Код за три снежинки

✻✻✻

<div style="text-align: center;"><span style="color: #45818e; font-size: large;">

<b>&#10043;&#10043;&#10043;</b></span></div>

Или

<div style="text-align: center;"><span style="color: #45818e; font-size: large;">

<b>&#10052;&#10052;&#10052;</b></span></div>

Броят на снежинките може да се променя в частта  &#10052;&#10052;&#10052;

Новогодишни гирлянди

Малък Новогодишен гирлянд

Малкият гирлянд, фиксиран централно на страницата, изглежда чудесно и при превъртане на страницата винаги е пред очите ни.

Код

<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>

Анимиран фон със снежинки

Не дразни посетителя, защото се разполага само на заден план. Този код се задава в темата на блога преди реда ]]> </ b: skin>.

Код

body {
background-attachment: fixed;
background-color:#2288bb;
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:# 2288bb;}
}
@-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:# 2288bb;}
}
@-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:# 2288bb;}
}
@-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:# 2288bb;}
}

За тези от вас, които вече имат инсталиран някакъв цветен фон на блога си и не искат да го "загубят", предлагам редактиран код.

body {
background-attachment: fixed;
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;}

100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:# fff;}
}
@-moz-keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:# fff;}
}
@-webkit-keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}

100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:# fff;}
}
@-ms-keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}

100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:# fff;}
}

Падащи снежинки

Имам желание да помогна на един мой читател в коледната украса на блога му. По незнайни причини посочените по-горе кодове не се "връзват" с кода на темата му. Ето и още един код за падащи снежинки в два варианта, които се различават по брой и форма на падащите снежинки. Кодът се вписва в притурка HTML/JavaScript, която се инсталира в горната част на темата, колкото се може по-високо. Опитайте и вие.

Код 1

<script type="text/javascript">
  var snowsrc="http://blogger4you.narod.ru/Kartinki/snow3.gif"
  var no = 10;
  var hidesnowtime = 0;
  var snowdistance = "windowheight";
  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
 function iecompattest(){
 return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
 }
  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600;
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }
  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
  if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }

  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
  doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }
 function hidesnow(){
  if (window.snowtimer) clearTimeout(snowtimer)
  for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
 }
if (ie4up||ns6up){
    snowIE_NS6();
  if (hidesnowtime>0)

  setTimeout("hidesnow()", hidesnowtime*1000)
  }
</script>

Код 2

<script type="text/javascript">
  //Configure below to change URL path to the snow image
  var snowsrc="https://lh6.googleusercontent.com/-BY_1vzDtGGk/TuA3QE5YV9I/AAAAAAAACnU/N5CcD1uJfhE/s24/snow.gif"
  // Configure below to change number of snow to render
  var no = 15;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600;
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }
  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://lh6.googleusercontent.com/-BY_1vzDtGGk/TuA3QE5YV9I/AAAAAAAACnU/N5CcD1uJfhE/s24/snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
        if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }
  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }
    function hidesnow(){
        if (window.snowtimer) clearTimeout(snowtimer)
        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }
if (ie4up||ns6up){
    snowIE_NS6();
        if (hidesnowtime>0)
        setTimeout("hidesnow()", hidesnowtime*1000)
        }
</script>

Ако имате въпроси, моля пишете в коментарите. Успех!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: