Еще новогодние идеи для блоггер

---

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

Виджет отсчета времени "До Нового осталось.."

Скопируйте HTML код

<script language="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) 

     }

     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

     if (timediff<0){

     this.timesup=true

     this.container.innerHTML=this.formatresults()

     return

}

     var oneMinute=60

     var oneHour=60*60 

     var oneDay=60*60*24

     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"){

     hourfield=dayfield*24+hourfield

     dayfield="n/a"

     }

     else if (this.baseunit=="minutes"){

     minutefield=dayfield*24*60+hourfield*60+minutefield

     dayfield=hourfield="n/a"

     }

     else if (this.baseunit=="seconds"){

     var secondfield=timediff

     dayfield=hourfield=minutefield="n/a"

     }

     this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield) 

     setTimeout(function(){thisobj.showresults()}, 1000)

     }

     function formatresults2(){

     if (this.timesup==false){

     var displaystring="<span class='nonewyear'>До Нового года осталось "+arguments[0]+" Дней "+arguments[1]+" Часов<br>"+arguments[2]+" Минут "+arguments[3]+" Секунд</span>"

     }

     else{

     var displaystring="<span class='newyear1'>С Новым годом!!!</span>"

     //alert("С Новым годом!!!")

     }

     return displaystring

     }

     </script>

     <div id="countdowncontainer2">

</div>

<script type="text/javascript">

     var currentyear=new Date().getFullYear()

     var thischristmasyear=(new Date().getMonth()==0 && new Date().getDate()==1)? currentyear : currentyear + 1

     var christmas=new cdtime("countdowncontainer2", "january 1, "+thischristmasyear+" 0:0:00")

     christmas.displaycountdown("days", formatresults2)

</script>

Стиль CSS для гаджета, вставить дизайн-добавить гаджет

<style>

#HTML34{

font-size:18px; *// размер шрифта;

color: #0e5198; *// цвет шрифта;

}

</style>

HTML34 - ID виджета. нажмите в макете изменить гаджет, и в адресной строке посмотрите ID гаджета. В код CSS на свое усмотрение добавьте форму, размер и цвет рамки по желанию. Формы рамок посмотрите в меню содержание,  ярлык "Рамки".

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

Скопируйте HTML код

<div style="background: url(https://3.bp.blogspot.com/-RodA5svAX3E/XA_oUjs_wTI/AAAAAAAAR88/GrQtASkLkvgl9Yui2NHKtCEPjmNW6X8QACLcBGAs/s640/unnamed%2B%25281%2529.gif);width: auto;height:350px;border:7px solid #03b4cc;">

<marquee behavior="scroll" direction="right"><img src="https://2.bp.blogspot.com/-t3LODOGE0y4/XA2ZEacgn_I/AAAAAAAAR28/TD7GaCqzxNgw9N5_xXXmDpe9WfHIugynACLcBGAs/s1600/25.gif"; width="100" height="100"style="padding: 250px 40px 40px 80px;" /></marquee></div>

Голубым - url адрес новогодней картинки; выделено жирным - ширина и высота изображения; фиолетовым - форма, размер и цвет рамки;

Во второй части HTML кода: url адрес и размеры санты; padding: 250 px;  - настройка верх-низ персонажа; Пишите в комментариях, если возникнут проблемы с настройкой.

Еще пример оформления с другими изображениями:

Скопируйте HTML код

<div style="background: url(http://img1.liveinternet.ru/images/attach/d/0/139/628/139628085_WinterLandscape640x480.jpg); border:7px solid #03b4cc;width:640px;height:480px;">

<marquee behavior="scroll" direction="right"><img src="http://img0.liveinternet.ru/images/attach/d/0/139/628/139628086_177159.gif"; width="200" height="200"style="padding: 220px 40px 40px 80px;" /></marquee></div>

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

Рекомендую почитать:

• Новогодний внешний фон для блогов блоггер Оформление на CSS;
• Варианты оформления анимации текста на CSS для блоггер;
• Тень текста заголовка ссылок цитат в blogger используя CSS;
• Оформление горизонтальной линии HR с использованием CSS
• Унать ID гаджета в шаблоне блоггер Обновление;

Рекомендуемый контент: