13.12.10

Blogger: Волшебная пыльца!

61 comments

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

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

В прошлом году я сделала небольшой виджет с электронными открытками Merry Christmas and Happy New Year и рассказала читателям как его можно модифицировать и установить.

В этом году мне захотелось добавить немного волшебства и я запустила за курсором мышки магическую пыль или пыльцу.

Посмотрите (проведите курсором мышки):

Такое и даже более красивое волшебство вы сможете сделать в своем блоге!

Это просто:
0. Делаем резервную копию текущего шаблона: Сохраняем - Восстанавлмваем шаблон на Blogger'e.

1. Выбираем цвет "волшебной пыли". Можно по имени, а можно по числовому коду. Подробно я об этом писала вот здесь: Готовим краски для раскраски!

2. Идем по маршруту: Панель инструментов --> Дизайн --> Изменить Html

Ищем в Html коде нашего шаблона строчку начинающуюся с

<body


У некоторых блогеров это будет <body> у других <body expr:class='&quot;loading&quot; + 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/

Всем здоровья и удачи!
Света

Blogger: кошка.Комментарии и вопросы более чем приветствуются,нужна помощь - поможем! Читать дальше...

61 комментарий:

  1. Спасибо большое! Получилось!!!

    ОтветитьУдалить
  2. Kak klassno! Spasibo! S nastupayushim novim godom i (zapadnim) rojdestvom.

    ОтветитьУдалить
  3. Спасибо, спасибо) Давно хотела такую летающую пыльцу. Получилось здорово!

    ОтветитьУдалить
  4. не получилось. видимо что-то не так сделала
    Выдал:
    Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
    Сообщение об ошибке в XML: The element type "b:skin" must be terminated by the matching end-tag "".

    ОтветитьУдалить
  5. очаровательная примочка, большое спасибо! счастья и удач в новом году!

    ОтветитьУдалить
  6. Спасибо большое!!! Очень понравилось! Сейчас буду пробовать)))) И с наступающими праздниками!

    ОтветитьУдалить
  7. Всем привет! Большое спасибо!
    Я чайник из чайников, для меня все это темный лес, но у меня получилось! я все боялась вносить какие-то правки, думала вообще все потеряю. Но все работает. Может чему-то и научусь с Вашей помощью!
    Еще раз спасибо! Успехов Вам!

    ОтветитьУдалить
  8. Здравствуйте, спасибо за советы. По вашей подсказке установила у себя звездочки. А Вы незнаете как установить форму обратной связи на blogspot?

    ОтветитьУдалить
  9. Комментарии не в тему‎ - 2

    Подскажите, пожалуйста, знающие люди, выход из такой ситуации: есть блог на blogspot (мой), не помню почту, аккаунт, на который он зарегистрирован.
    Т.е. при восстановлении доступа отправляется письмо, но куда - вот вопрос?
    Как поступить?

    ОтветитьУдалить
  10. А у меня все получилось! Огромное спасибо и с наступающими праздниками !

    ОтветитьУдалить
  11. Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
    Сообщение об ошибке в XML: The element type "b:skin" must be terminated by the matching end-tag "".

    ОтветитьУдалить
  12. Хельга, Scaryazeri, GALINA, Paladina, Рафаэлла, Artv157, Надежда, Graf, спасибо, что заходите ко мне, что вдохновляете меня и что у вас ВСЕ получилось! Ура!!!

    С наступающим Новым Годом!

    Света

    ОтветитьУдалить
  13. 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'>

    СОХРАНЯЕТЕ.

    А потом еще раз пытаетесь вставить код для "волшебной пыльцы".

    Удачи и пишите.

    Я с вами не прощаюсь.

    Света

    ОтветитьУдалить
  14. LaChesta, давайте адрес блога, может быть что-нибудь удастся от туда выцарапать. А еще можно попробовать написать по-английски на этот форум - туда иногда даже сотрудники Гугла и Блоггера заглядывают: http://www.google.com/support/forum/p/blogger/label?lid=42512ba1ddda2647&hl=en

    Удачи!

    ОтветитьУдалить
  15. Спасибо за волшебную пыль, очень красиво и нежно.

    ОтветитьУдалить
  16. спасибо за Ваш полезный блог и с наступающими праздниками! :-)

    ОтветитьУдалить
  17. Спасибо, Светочка! Тут же претворила в жизнь в "Сплошном позитиве" ! No problems!

    ОтветитьУдалить
  18. Светочка, спасибо за волшебную пыль. Я сделала ее белой и получились снежинки:), только их слабо видно из-за свелого фона страницы. А можно сделать так, чтоб снежинок было побольше? Спасибо за Ваши интересные фишки и с наступающим Новым годом!

    ОтветитьУдалить
  19. Светлана, Ellen Belle, Soloveika - спасибо, что зашли, рада что эффект понравился :))).

    Удачи во всем!

    Света
    PS Soloveika, почаще появляйся в блогосфере не только как читатель, но и как автор - давно у тебя ничего не было ;).

    ОтветитьУдалить
  20. Леночка(Rubric), спасибо за комментарий! Его правда Blogger в спам определил не иначе как за ссылку... но я его разыскала и очень рада, а то не знала где тебе и сказать - что пыль в блоге у тебя, конечно, красивая (я ее еще вчера заметила), но код кто-то из "великих позитивщиц" разместил не в том месте... у вас получилось между </head> и <body> что совсем-совсем неверно(!)

    Поставьте его, пожалуйста, после <head>, а то прямо позор на мою седую голову... даже если я знаю, что скрипт вы взяли не у меня ;).

    Удачи в позитивных делах!
    Света

    ОтветитьУдалить
  21. Венера Владимировна, доброго времени суток!

    Как менять цвет пыльцы вы знаете, можно попробовать светло-розовый или золотисый как рамочки у картинок в вашем блоге... Количество пылинок поменять тоже можно для этого есть параметр sparkles, который сейчас 50 и этого должно быть достаточно,вот его можно и увеличить, если вы считаете это необходимым.

    Удачи во всем!
    Света

    ОтветитьУдалить
  22. Спасибо за подсказку, Света. С золотистой пыльцой получилось гораздо лучше.

    ОтветитьУдалить
  23. Сделала, слушаюсь! А в чём разница? Я даже не задумалась - увидала, что работает и побежала хвастаться! Неверно чисто структурно и как бы что не вышло? Или что-то еще, чего я не знаю?

    А вообще потрясающе! Мало того, что проверила, что работает, так она еще и в код полезла проверять! :) Светлана, я просто в умилительном шоке! :)

    ОтветитьУдалить
  24. Спасибо за пыльцу... но вот у меня на блоге они медленно двигаются((( Подскажите, пожалуйста, что делать? Хотелось бы скорость как у вас....

    ОтветитьУдалить
  25. Спасибо БОЛЬШОЕ! Получилось на 2 блогах.
    http://szoh12.blogspot.com/
    http://szoh12.blogspot.com/
    А на одном - нет :))))
    http://2achool12.blogspot.com/

    ОтветитьУдалить
  26. Спасибо!!!Установил!!!Надеюсь читателям моего блога понравится!!!

    ОтветитьУдалить
  27. У меня не по теме вопросик - хочу новогодний информер, но что нашла все такое страшное :(, мне б светленький или прозрачный в тон блога, без наворотов, только цифры (дни, часы, мин. сек), где взять, как сделать... подскажите?
    А от Вас установила снежинки, Большое спасибо!

    ОтветитьУдалить
  28. Спасибо, Вы лучшие!!! С наступающим Вас!!!

    ОтветитьУдалить
  29. спасибо огромное!!! все получилось! очень позитивно!!!

    ОтветитьУдалить
  30. Светик, спасибо огромное и за снежинки, и за звездную пыль, все получилось с первого раза! Если загляните http://new-year2011.blogspot.com/ можно убедиться в результате))

    Я добавила Вашего белого магического кота и Ваш блог в свои любимые ресурсы, поэтому хожу в гости запросто, почти как домой)))

    Благодарю за все полезности, хорошего настроения в этот тихий снежный зимний вечер =)

    ОтветитьУдалить
  31. Спасибо! я только учусь создавать блог, но пыльца уже получилась! :)

    ОтветитьУдалить
  32. получилось все с первого раза и пыльца и снежинки, спасибо!!

    ОтветитьУдалить
  33. Let the stars guide you to your ways, the angels protect you and accompany you!

    A bell sound Greetings

    Kvelli

    ОтветитьУдалить
  34. Спасибо большое! Очень красиво смотрится!:)

    ОтветитьУдалить
  35. 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

    ОтветитьУдалить
  36. Света, поздравляю Вас с наступающими праздниками!!!
    Счастья и благополучия Вашему дому!!!
    Отдельная благодарность вашему замечательному блогу здесь -
    http://emilycreativeideas.blogspot.com/2010/12/my-new-blog-design.html

    Спасибо Вам!!!

    ОтветитьУдалить
  37. Света ,поздравляю с Новым годом,желаю процветания ,счастья и здоровья !
    И ещё у меня вопросик: Подскажите, как добавить в блог проигрыватель, чтоб при открытии блога звучала музыка? И бесплатно ли это?Спасибо,Юля.

    ОтветитьУдалить
  38. Светлана спасибо за пыль.Все получилось.Мой блог на белом фоне,настройки цвета оставил такими же.Вроде не дурно получилось)).Спасибо

    ОтветитьУдалить
  39. Как мне у Вас нравится! Всё интересно и доступно! С праздниками Вас!!!

    ОтветитьУдалить
  40. Света, кроме Вас ни кто не поможет установить форму обратной связи, надежда только на Вас. Спасибо Вам за Ваш труд, всегда все ясно и понятно.

    ОтветитьУдалить
  41. Здорово!!! :)
    спасибо большое!

    С прошедшими!!!

    ОтветитьУдалить
  42. Случайно попала к вам в гости и очень рада этому.совсем недавно открыла свой блог,долго мучилась с шаблонами,установила.попрбовала сделать пыль ,выдает ошибку,пробовала поменять как вы советовали (перед head)-результат тот же.жаль мне так нравится эксперементировать.наверно придется поменять весь шаблон,что скажете?Спасибо за ваш интересный и познавательный блог

    ОтветитьУдалить
  43. Ой, мамочки! Как же давно я тут не отвечала на комментарии.... :(

    Всех со всеми нашими любимыми зимними праздниками!

    Здоровья, счастья, любви и исполнения всех желаний!!!

    Света

    ОтветитьУдалить
  44. Здравствуйте, Светлана! Безумно благодарна Вам за эти волшебные статьи, которые стали настоящим подарком!!!

    ОтветитьУдалить
  45. Нет слов, одна восторженность!!!

    ОтветитьУдалить
  46. Здравствуйте, наш дорогой помощник)) С этим скриптом возникла кое-какая неувязочка: если он включен, то выделение текста получается корявенько и при вводе комментариев в виджет vkontakte, половины букв не видно(((
    Из-за чего может быть такой трабл? Может конфликт каких-то других скриптов с этим?

    ОтветитьУдалить
  47. Вы правы, Графф, иногда скрипт с пыльцой мешает Copy/Paste иногда нет... Но красота, как известно требует жертв, поэтому после новогодних праздников в этом блоге я показываю пыльцу только на этой странице, а вот в своем похудательном я эту пыльцу оставила - возможно навсегда: уж очень украшает дизайн ;).

    Удачи во всем!
    Света

    ОтветитьУдалить
  48. Класс,мне понравился Ваш блог,нашел для себя много полезного, просто восхищен Вашими фантастическими вещичками!!!

    ОтветитьУдалить
  49. Огромное спасибо! Вроде бы все получилось. Очень много для себя нашла полезного! Еще раз спасибо.

    ОтветитьУдалить
  50. Здравствуйте! Ничего не получилось у меня. Пишут:

    Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы 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);
    }

    Пробовала вставить и перед фигурной скобкой, сразу после слова боди, и после, и внутри...

    ОтветитьУдалить
  51. Извините, но вопрос снят. Сама разобралась, всё получилось! Получилось красивенько. А цвет взяла не наобум, а из этого же шаблона из цвета ссылок.

    Спасибочки!!!!!!!

    ОтветитьУдалить
  52. http://myrussiammm.blogspot.com/

    Здравствуйте Светлана.
    Блогом занимаюсь 1,5 месяца.
    Скопировал ваш код в HTML гаджет, и все сразу посыпалось и появилось.
    У меня вопрос - Можно ли заменить крестики на буковки или $.
    Спасибо.
    P.S. Лазил много по инету, но все равно возвращаюсь на Ваш блог, все здесь есть и в доступной для *Чайника* форме.

    ОтветитьУдалить
  53. Светочка, большое спасибо за нарядные снежинки! Я украсила ими два свои блога на блогспоте. Теперь вот бы вам с мужем вдохновения сделать в блогспоте код для ответа под комментарием, чтобы автору комментария дать ответ под его комментарием.
    С уважением, автор блога БАБУШКИН ОТВЕТ Алина Таранец.

    ОтветитьУдалить
  54. Светлана, еще раз - огромное спасибо! Получилась и пыльца.

    ОтветитьУдалить
  55. Привет! мне ваш блог порекомендовала подруга я уже давно хотела себе установить такую пыльцу на курсор и вот наконец то моя мечта сбылась я такая счастливая ура!!!!!!!!!!!!!!

    ОтветитьУдалить
  56. Спасибо за статью!
    Очень понравилась такая функция :)
    И разнообразие цветов

    ОтветитьУдалить
  57. Светлана, здравствуйте! В прошлом году сделала волшебную пыльцу и была счастлива. А можно ли сделать вот такое чудо вверху сайта http://detstvo.m-sk.ru/Html/fdpol_2-1.php?id=18
    Как-то встретила это чудо даже со звенящими шариками при наведении курсора)

    ОтветитьУдалить

Популярные сообщения