Всем гостям и друзьям здравствуйте. Сегодня продолжение новогодней темы. Перейду сразу к идеям праздничного оформления. Чтобы было понятно, посмотрите в тестовом блоге примеры оформления, над сообщением четыре гаджета.
Виджет отсчета времени "До Нового осталось.."
Скопируйте 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://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 код
<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>
УПС, на сегодня вся информация. По всем вопросам обращайтесь в комментариях или контактную форму. Поделитесь со своими друзьями в социальных сетях. Всем пока, пока.
Рекомендую почитать:
Рекомендую почитать:
Рекомендуемый контент:
