Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

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

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



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

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

    Всичко в кода, което се отнася за стиловете е на 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]+" <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:#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>


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

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

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

    BGtop




    11 коментара:

    1. Гергана Стоянова9:51

      Здравейте, за пореден път ми давате интересни идеи за дизайна моя блог. Благодаря ви! +1!

      ОтговорИзтриване
      Отговори
      1. Здравейте, радвам се, че сте тук. Заповядайте пак!

        Изтриване
    2. Чудесен урок. Имам едно питане, дали в анимирания фон със снежинки може да се сложат само снежинките без променящия тапет?

      +1 от мен!

      ОтговорИзтриване
      Отговори
      1. Здравейте! Да, може, но все пак някакъв фон, различен от белия, трябва да остане. Иначе снежинките ще са незабележими. Опитайте, като промените или махнете редовете:
        25%{background-color:#800000;}
        50%{background-color:#008B00;}
        75%{background-color:#00008B;}
        Ако ги премахнете от кода остава само синия фон - background-color:# 2288bb;}, който също може да бъде променен.

        Изтриване
      2. А не може ли да се зададе прозрачен фон и да се вижда този, който си стои по принцип на сайта? Така снежинките пак ще се виждат.

        Изтриване
      3. Да, може, забравих, че вашият блог има цветен фон, който трябва да се запази непроменен. Пробвайте този код-редактирала съм го.

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

        Изтриване
      4. Така пак не става при мен. Появява се блед фон и няма снежинки. Може грешката да е в моя "телевизор". :)

        Изтриване
      5. Сложих редактирания код в https://pipiskazka.blogspot.com. Вижте го.
        Фонът е в зелено и след инсталиране на новия код се запазва.Само снежинките тръгват от горе ляво, минават през центъра и се скриват в долу дясно. Но щом не става, да сме живи и здрави.

        Изтриване
      6. Здравейте, peSho, допълних публикацията с още един код за падащи снежинки, погледнете, този може и да стане при вас.

        Изтриване
      7. Сложих КОД1 и мисля, че това ми стига. С този, който опитах преди това явно има проблем с фона (лично избрания от мен), защото като му дадох настройка да показва син фон, със или без плаваща промяна към други цветове се получи.

        +1 Благодаря Ви отново!!!

        Изтриване
      8. Винаги се радвам на вашите успехи!

        Изтриване