Вот и Новый год уже не за горами. А под Новый год хочется украсить и принарядить свой дом как в реальном море так и виртуальном мире. Уверена, что в интернете вы найдете много красивых тематических переливающихся картинок, которые создадут у ваших читателей приподнятое настроение.На страницах этого блога я уже рассказывала, как устроить в блоге небольшой снегопад на 10 снежинок: Падающие снежинки в вашем блоге.
В прошлом году я сделала небольшой виджет с электронными открытками Merry Christmas and Happy New Year и рассказала читателям как его можно модифицировать и установить.
В этом году мне захотелось добавить немного волшебства и я запустила за курсором мышки магическую пыль или пыльцу.
Посмотрите (проведите курсором мышки):
Такое и даже более красивое волшебство вы сможете сделать в своем блоге!
Это просто:
0. Делаем резервную копию текущего шаблона: Сохраняем - Восстанавлмваем шаблон на Blogger'e.
1. Выбираем цвет "волшебной пыли". Можно по имени, а можно по числовому коду. Подробно я об этом писала вот здесь: Готовим краски для раскраски!
2. Идем по маршруту: Панель инструментов --> Дизайн --> Изменить Html
Ищем в Html коде нашего шаблона строчку начинающуюся с
<body
У некоторых блогеров это будет <body> у других <body expr:class='"loading" + data:blog.mobileClass'>
После найденной строчки вставляем несколько пустых строчек, а затем следующий "простой" код:
<!-- Magic dust BEGIN -->
<script type='text/javascript'>
// <![CDATA[
var colour="#13baf1";
var sparkles=50;
/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
<!-- Magic dust END -->
3. Цвет волшебной пыли (выделено в коде голубым) заменяем на подобранный на шаге 1.
4. Нажимаем ПРОСМОТР - немного терпения, ждем когда все загрузится и проверяем как волшебная пыльца работает и если все нас в ней устраивает нажимаем СОХРАНИТЬ, если цвет пыльцы оказался не совсем подходящий, меняем его. Если совсем все не понравилось и не работает нажимаем УБРАТЬ ИЗМЕНЕНИЯ.
Источник: http://www.mf2fm.com/rv/
Всем здоровья и удачи!
Света
Комментарии и вопросы более чем приветствуются,нужна помощь - поможем!
Читать дальше...
Спасибо большое! Получилось!!!
ОтветитьУдалитьKak klassno! Spasibo! S nastupayushim novim godom i (zapadnim) rojdestvom.
ОтветитьУдалитьСпасибо, спасибо) Давно хотела такую летающую пыльцу. Получилось здорово!
ОтветитьУдалитьне получилось. видимо что-то не так сделала
ОтветитьУдалитьВыдал:
Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
Сообщение об ошибке в XML: The element type "b:skin" must be terminated by the matching end-tag "".
очаровательная примочка, большое спасибо! счастья и удач в новом году!
ОтветитьУдалитьСпасибо большое!!! Очень понравилось! Сейчас буду пробовать)))) И с наступающими праздниками!
ОтветитьУдалитьВсем привет! Большое спасибо!
ОтветитьУдалитьЯ чайник из чайников, для меня все это темный лес, но у меня получилось! я все боялась вносить какие-то правки, думала вообще все потеряю. Но все работает. Может чему-то и научусь с Вашей помощью!
Еще раз спасибо! Успехов Вам!
Здравствуйте, спасибо за советы. По вашей подсказке установила у себя звездочки. А Вы незнаете как установить форму обратной связи на blogspot?
ОтветитьУдалитьКомментарии не в тему - 2
ОтветитьУдалитьПодскажите, пожалуйста, знающие люди, выход из такой ситуации: есть блог на blogspot (мой), не помню почту, аккаунт, на который он зарегистрирован.
Т.е. при восстановлении доступа отправляется письмо, но куда - вот вопрос?
Как поступить?
А у меня все получилось! Огромное спасибо и с наступающими праздниками !
ОтветитьУдалитьНе удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
ОтветитьУдалитьСообщение об ошибке в XML: The element type "b:skin" must be terminated by the matching end-tag "".
Хельга, Scaryazeri, GALINA, Paladina, Рафаэлла, Artv157, Надежда, Graf, спасибо, что заходите ко мне, что вдохновляете меня и что у вас ВСЕ получилось! Ура!!!
ОтветитьУдалитьС наступающим Новым Годом!
Света
Paffi и Фея у вас нестандартные шаблоны :(.
ОтветитьУдалитьПризнаюсь честно - очень я их нелюблю, потому что клепаются они обычно непрофессионалами на коленке, с огромным числом ляпов... Рада, что с появлением Дизайнера востребованность в таких шаблонах значительно снизилась... Но это так лирическое отступления.
Теперь давайте я попробую помочь вашей беде.
Заходите в Изменить Html и опять находите у себя в шаблоне строчку, начинающуюся с <head
Смело заменяете все что перед ней стоит на
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
СОХРАНЯЕТЕ.
А потом еще раз пытаетесь вставить код для "волшебной пыльцы".
Удачи и пишите.
Я с вами не прощаюсь.
Света
LaChesta, давайте адрес блога, может быть что-нибудь удастся от туда выцарапать. А еще можно попробовать написать по-английски на этот форум - туда иногда даже сотрудники Гугла и Блоггера заглядывают: http://www.google.com/support/forum/p/blogger/label?lid=42512ba1ddda2647&hl=en
ОтветитьУдалитьУдачи!
Спасибо за волшебную пыль, очень красиво и нежно.
ОтветитьУдалитьспасибо за Ваш полезный блог и с наступающими праздниками! :-)
ОтветитьУдалитьПрикольный эффект:)
ОтветитьУдалитьСпасибо, Светочка! Тут же претворила в жизнь в "Сплошном позитиве" ! No problems!
ОтветитьУдалитьСветочка, спасибо за волшебную пыль. Я сделала ее белой и получились снежинки:), только их слабо видно из-за свелого фона страницы. А можно сделать так, чтоб снежинок было побольше? Спасибо за Ваши интересные фишки и с наступающим Новым годом!
ОтветитьУдалитьСветлана, Ellen Belle, Soloveika - спасибо, что зашли, рада что эффект понравился :))).
ОтветитьУдалитьУдачи во всем!
Света
PS Soloveika, почаще появляйся в блогосфере не только как читатель, но и как автор - давно у тебя ничего не было ;).
Леночка(Rubric), спасибо за комментарий! Его правда Blogger в спам определил не иначе как за ссылку... но я его разыскала и очень рада, а то не знала где тебе и сказать - что пыль в блоге у тебя, конечно, красивая (я ее еще вчера заметила), но код кто-то из "великих позитивщиц" разместил не в том месте... у вас получилось между </head> и <body> что совсем-совсем неверно(!)
ОтветитьУдалитьПоставьте его, пожалуйста, после <head>, а то прямо позор на мою седую голову... даже если я знаю, что скрипт вы взяли не у меня ;).
Удачи в позитивных делах!
Света
Венера Владимировна, доброго времени суток!
ОтветитьУдалитьКак менять цвет пыльцы вы знаете, можно попробовать светло-розовый или золотисый как рамочки у картинок в вашем блоге... Количество пылинок поменять тоже можно для этого есть параметр sparkles, который сейчас 50 и этого должно быть достаточно,вот его можно и увеличить, если вы считаете это необходимым.
Удачи во всем!
Света
Спасибо за подсказку, Света. С золотистой пыльцой получилось гораздо лучше.
ОтветитьУдалитьСделала, слушаюсь! А в чём разница? Я даже не задумалась - увидала, что работает и побежала хвастаться! Неверно чисто структурно и как бы что не вышло? Или что-то еще, чего я не знаю?
ОтветитьУдалитьА вообще потрясающе! Мало того, что проверила, что работает, так она еще и в код полезла проверять! :) Светлана, я просто в умилительном шоке! :)
Спасибо за пыльцу... но вот у меня на блоге они медленно двигаются((( Подскажите, пожалуйста, что делать? Хотелось бы скорость как у вас....
ОтветитьУдалитьСпасибо,установила!Счастья ,вам!
ОтветитьУдалитьСпасибо БОЛЬШОЕ! Получилось на 2 блогах.
ОтветитьУдалитьhttp://szoh12.blogspot.com/
http://szoh12.blogspot.com/
А на одном - нет :))))
http://2achool12.blogspot.com/
Спасибо!!!Установил!!!Надеюсь читателям моего блога понравится!!!
ОтветитьУдалитьУ меня не по теме вопросик - хочу новогодний информер, но что нашла все такое страшное :(, мне б светленький или прозрачный в тон блога, без наворотов, только цифры (дни, часы, мин. сек), где взять, как сделать... подскажите?
ОтветитьУдалитьА от Вас установила снежинки, Большое спасибо!
Спасибо, Вы лучшие!!! С наступающим Вас!!!
ОтветитьУдалитьспасибо огромное!!! все получилось! очень позитивно!!!
ОтветитьУдалитьСветик, спасибо огромное и за снежинки, и за звездную пыль, все получилось с первого раза! Если загляните http://new-year2011.blogspot.com/ можно убедиться в результате))
ОтветитьУдалитьЯ добавила Вашего белого магического кота и Ваш блог в свои любимые ресурсы, поэтому хожу в гости запросто, почти как домой)))
Благодарю за все полезности, хорошего настроения в этот тихий снежный зимний вечер =)
Спасибо! я только учусь создавать блог, но пыльца уже получилась! :)
ОтветитьУдалитьполучилось все с первого раза и пыльца и снежинки, спасибо!!
ОтветитьУдалитьСимпатично! Спасибо!
ОтветитьУдалитьLet the stars guide you to your ways, the angels protect you and accompany you!
ОтветитьУдалитьA bell sound Greetings
Kvelli
Спасибо большое! Очень красиво смотрится!:)
ОтветитьУдалитьToday is New Year's Eve because I greet everyone I like. Therefore I send you from afar one thousand magic stars ...
ОтветитьУдалитьLove greeting
Kvelli
Света, поздравляю Вас с наступающими праздниками!!!
ОтветитьУдалитьСчастья и благополучия Вашему дому!!!
Отдельная благодарность вашему замечательному блогу здесь -
http://emilycreativeideas.blogspot.com/2010/12/my-new-blog-design.html
Спасибо Вам!!!
Света ,поздравляю с Новым годом,желаю процветания ,счастья и здоровья !
ОтветитьУдалитьИ ещё у меня вопросик: Подскажите, как добавить в блог проигрыватель, чтоб при открытии блога звучала музыка? И бесплатно ли это?Спасибо,Юля.
Светлана спасибо за пыль.Все получилось.Мой блог на белом фоне,настройки цвета оставил такими же.Вроде не дурно получилось)).Спасибо
ОтветитьУдалитьКак мне у Вас нравится! Всё интересно и доступно! С праздниками Вас!!!
ОтветитьУдалитьСвета, кроме Вас ни кто не поможет установить форму обратной связи, надежда только на Вас. Спасибо Вам за Ваш труд, всегда все ясно и понятно.
ОтветитьУдалитьЗдорово!!! :)
ОтветитьУдалитьспасибо большое!
С прошедшими!!!
Случайно попала к вам в гости и очень рада этому.совсем недавно открыла свой блог,долго мучилась с шаблонами,установила.попрбовала сделать пыль ,выдает ошибку,пробовала поменять как вы советовали (перед head)-результат тот же.жаль мне так нравится эксперементировать.наверно придется поменять весь шаблон,что скажете?Спасибо за ваш интересный и познавательный блог
ОтветитьУдалитьОй, мамочки! Как же давно я тут не отвечала на комментарии.... :(
ОтветитьУдалитьВсех со всеми нашими любимыми зимними праздниками!
Здоровья, счастья, любви и исполнения всех желаний!!!
Света
Здравствуйте, Светлана! Безумно благодарна Вам за эти волшебные статьи, которые стали настоящим подарком!!!
ОтветитьУдалитьНет слов, одна восторженность!!!
ОтветитьУдалитьСпасибо огромное!!!
ОтветитьУдалитьЗдравствуйте, наш дорогой помощник)) С этим скриптом возникла кое-какая неувязочка: если он включен, то выделение текста получается корявенько и при вводе комментариев в виджет vkontakte, половины букв не видно(((
ОтветитьУдалитьИз-за чего может быть такой трабл? Может конфликт каких-то других скриптов с этим?
Вы правы, Графф, иногда скрипт с пыльцой мешает Copy/Paste иногда нет... Но красота, как известно требует жертв, поэтому после новогодних праздников в этом блоге я показываю пыльцу только на этой странице, а вот в своем похудательном я эту пыльцу оставила - возможно навсегда: уж очень украшает дизайн ;).
ОтветитьУдалитьУдачи во всем!
Света
Класс,мне понравился Ваш блог,нашел для себя много полезного, просто восхищен Вашими фантастическими вещичками!!!
ОтветитьУдалитьОгромное спасибо! Вроде бы все получилось. Очень много для себя нашла полезного! Еще раз спасибо.
ОтветитьУдалитьЗдравствуйте! Ничего не получилось у меня. Пишут:
ОтветитьУдалитьНе удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
Сообщение об ошибке в XML: The element type "b:skin" must be terminated by the matching end-tag "".
Error 500
Я нашла это в коде:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
Пробовала вставить и перед фигурной скобкой, сразу после слова боди, и после, и внутри...
Извините, но вопрос снят. Сама разобралась, всё получилось! Получилось красивенько. А цвет взяла не наобум, а из этого же шаблона из цвета ссылок.
ОтветитьУдалитьСпасибочки!!!!!!!
http://myrussiammm.blogspot.com/
ОтветитьУдалитьЗдравствуйте Светлана.
Блогом занимаюсь 1,5 месяца.
Скопировал ваш код в HTML гаджет, и все сразу посыпалось и появилось.
У меня вопрос - Можно ли заменить крестики на буковки или $.
Спасибо.
P.S. Лазил много по инету, но все равно возвращаюсь на Ваш блог, все здесь есть и в доступной для *Чайника* форме.
Светочка, большое спасибо за нарядные снежинки! Я украсила ими два свои блога на блогспоте. Теперь вот бы вам с мужем вдохновения сделать в блогспоте код для ответа под комментарием, чтобы автору комментария дать ответ под его комментарием.
ОтветитьУдалитьС уважением, автор блога БАБУШКИН ОТВЕТ Алина Таранец.
Светлана, еще раз - огромное спасибо! Получилась и пыльца.
ОтветитьУдалитьПривет! мне ваш блог порекомендовала подруга я уже давно хотела себе установить такую пыльцу на курсор и вот наконец то моя мечта сбылась я такая счастливая ура!!!!!!!!!!!!!!
ОтветитьУдалитьСпасибо за статью!
ОтветитьУдалитьОчень понравилась такая функция :)
И разнообразие цветов
Светлана, здравствуйте! В прошлом году сделала волшебную пыльцу и была счастлива. А можно ли сделать вот такое чудо вверху сайта http://detstvo.m-sk.ru/Html/fdpol_2-1.php?id=18
ОтветитьУдалитьКак-то встретила это чудо даже со звенящими шариками при наведении курсора)