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



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

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

HTML код гаджета

Скопируйте 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 код гаджета
Скопируйте HTML код

<div style="background: url(https://goo.gl/zLvsq1);width: auto;height:350px;border:7px solid #03b4cc;">

<marquee behavior="scroll" direction="right"><img src="https://goo.gl/i1GXMU"; width="100" height="100"style="padding: 250px 40px 40px 80px;" /></marquee></div>

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

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

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

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

<div style="background: url(https://goo.gl/RMzDSN);width:auto;height:260px;border:7px solid #03b4cc;">

<marquee behavior="scroll" direction="right"><img src="https://goo.gl/fLPC3J"; width="120" height="120"style="padding: 100px 40px 40px 80px;" /></marquee></div>

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

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

Text.ru - 100.00%

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




Автор статьи ✎ Olga Protasova Выпуск ✹ 12/11/2018 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь Генератором HTML кода


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *