Двигающиеся картинки на сайте. Как привлечь ещё больше внимания?

Привет читателям и гостям блога Seo bloga Fomika! Как ваше настроение? Если оно у вас сейчас унылое, то я постараюсь в этом посте вам его поднять. Как? Очень просто – двигающимися и прыгающими картинками. Update: Данный плагин работает на версиях  WordPress ниже 3.7.1
движущиеся картинки

Я расскажу сегодня про классный плагин, который заставляет картинки у вас на блоге двигаться. Нет, это не формат гиф, это намного круче…

Скачать двигающиеся картинки

anime avatar-mech blum cherniy-kot Chibi devki gubka-bob koniyzka kotik-tok ruka vaylent winnie-pooh

Как заставить картинки в посте прыгать или двигаться?

Для этого нужно всего-навсего установить себе на блог замечательный плагин SoreThumb. Лично я обозвал его “прыг-скок”Широкая улыбка.

Как работает этот плагин?

танцор

Плагин может осуществлять 8 различных движений в посте и на главной (Несколько дней я мучился с тем, чтобы “завести” картинку на главной и наконец-то решил эту задачу. Вот почему этот пост выходит с задержкой…)

Итак, вот эти движения:

  1. Tada!   — не переводится, но прикольноШирокая улыбка
  2. Pulse    — импульс
  3. Flash    — вспышка
  4. Bounse  — отскок
  5. Shake    — тряска
  6. Wobble   — дрожь
  7. Wiggle    — покачивание
  8. Swing     — колебание

Плагин буржуйский, но перевести при помощи браузера и разобраться в нём будет не сложно, тем более я вам всё расскажу. Из админки его не скачать. Бесплатно скачать его вы можете из моего дропбокс ящика, предварительно кликнув на одну из 3-х соц-кнопок на выбор. 

Пожалуйста, нажмите на одну из кнопок и получите подарок

Процедура установки и активации — обычная. После установки плагина в админке появляется отдельный раздел для его настроек.

По клику вы переходите в настройки плагина. На этой страничке настроек вы будете настраивать движения элементов на главной, так как настройка в постах будет непосредственно в редакторе, о чём я ниже расскажу.

Судя по панели настроек, можно использовать не более 3-х элементов. А больше и не нужно, так как переборщить можно с этим и оттолкнуть читателя. Правильно?

Сразу после установки и активации плагин по умолчании включён – Enabled.

Как заставить картинку плясать на главной странице?

Сейчас я вам расскажу и покажу, как настроить движение элемента на главной странице, так как это сложнее, чем в посте. Настраивать плагин я рекомендую на Денвере или поддомене, так как неизвестно, как поведёт себя у вас этот плагин, но я сам настраивал на реальном сайте, и ничего – всё отлично.

В поле Элемент 1 введите идентификатор элемента например, # theid и выберите эффект. Элемент 2 и Элемент 3 пока оставьте пустыми. Затем сохраните настройки. Не знаю какую фигуру вы будете активировать, я выбрал рисунок коробки моего бесплатного видеокурса. Код этой картинки вставлен у меня в виджете, в сайтбаре.

Открываем этот виджет и начинаем редактирование. Вот как выглядит мой отредактированный код.

<span class=»stp» id=»theid» rel=»pulse»><a href=»http://dengi-iz-ineta.ru/http://dengi-iz-ineta.ru/besplatnosti/moj-pervyj-besplatnyj-videokurs-na-temu-bezopasnosti-bloga-na-word-press-vyshel» target=»_blank»><img class=»aligncenter size-medium wp-image-2349″ title=»Узнай подробнее в моём бесплатном видеокурсе» src=»http://dengi-iz-ineta.ru/wp-content/uploads/2012/09/box-chit.jpg» alt=»безопасность wordpress» width=»250″ height=»300″ /></a></span>

Жирным я обозначил ту нужную строчку кода, в которую вы должны заключить код вашего изображения на главной, чтобы оно заработало. Зелёным – это название эффекта, которое отвечает за вид движения. Чтобы поменять эффект движения, поменяйте его в настройках плагина и пропишите в коде картинки. Попробуйте, у Вас должно всё получится и заработать.

Вот показываю ещё раз правильную строчку кода —

&lt;span id=&quot;theid&quot; rel=&quot;pulse&quot;&gt; код от картинки на главной &lt;/span&gt;

Как сделать танцующими изображения и текст в посте?

После активации плагина, инструмент, которым мы будем приводить в движение элементов в посте, вы увидите в текстовом редакторе. Это маленькая мишень и чекбокс с выбором эффектов.

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

После установки и активации плагина, под редактором контента появится ещё одно поле настроек этого плагина, но как я не проверял и не вносил туда изменения, они не сказывается на работе плагина. Но на всякий случай я продублировал некоторые значения. Например время действия эффекта и пауза между ними. Хотя галочка в чекбоксе — /Включить соретрамб/ у меня не стоит, плагин отлично работает…

Попробуйте и вы поработать с этим интересным на мой взгляд плагином, а если у вас возникнут какие-то проблемы – отпишитесь в комментах, я постараюсь вам помочь.

Как отключить пляшущие картинки и текст?

Можно конечно просто отключить плагин и изображения успокоятся, но нам ведь это не нужно, правильно? В настройках этого плагина я не нашёл никакой кнопки отключения самих картинок, поэтому всё придёться делать вручную. Это не сложно. Нужно просто удалить этот код и всё. В редакторе – в режиме HTML естественно, ну а на главной, там итак всё в этом режиме. Только не удалите ничего лишнего…

Друзья, тот кто не сможет настроить этой прыг-скок плагин, пишите мне, я вам помогу в этом. По крайней мере, бесплатно помогу первым 10 обратившимся…

chiz koniyzka kotik-tok kot-sex moloko na-divane nausniki nu-pogodi pechat poxot ruka rusalka

Победитель конкурса комментаторов за декабрь

В прошедшем сезоне моего ежемесячного марафона комментаторов, победу вновь одержала Анна – автор блога Отпускник Аня активно и содержательно комментирует мои посты уже 2 месяца. Молодец, так держать Аня! Мои поздравления!!! 100 рублей плывут в твой электро-кошелёк…
А Победителем кроссворда № 5 стал Денис, автор блога wpixel.ru  Приз я уже перевёл ему на следующий день, после выхода этого кросса. Поздравляю тебя Ден с очередным выигрышем на моём блоге! Розыгрыша в номинации “Случайный счастливчик” не будет по причине, которую я опишу ниже.
К сожалению, пока я приостанавливаю выход очередных кроссвордов из-за того, что не могу пока добыть прогу, которая будет выявлять хитрецов (её автор пока молчит), а просто так дарить деньги нечестным людям я не желаю…

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

Пока, пока.

С уважением, ваш Fomik…


Понравилась статья - поделись с друзьями!



Просмотр

Подпишитесь на обновления блога по почте :

Количество читателей блога


К записи "Двигающиеся картинки на сайте. Как привлечь ещё больше внимания?" 10 комментариев Самый активный комментатор в конце месяца получает денежный приз.

  1. Анна:

    Я не большая поклонница прыгающего и мерцающего, но у многих замечала подобные эффекты. Оказывается это такой хитрый плагин! Леша, а за счет чего меняются картинки в шапке на главной странице?
    P.S. Приз доплыл, большое спасибо!

    [Ответить]

    Алекс Fomik Reply:

    Тут главное — не переборщить. Аня, — это слайдер.

    [Ответить]

  2. Сергей:

    Прикольно. А как влияет SoreThumb на скорость загрузки сайта?

    [Ответить]

    Алекс Fomik Reply:

    Я не заметил особого торможения блога из-за него…

    [Ответить]

  3. Максим Козинец:

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

    [Ответить]

    Алекс Fomik Reply:

    На здоровья! Да, все очень просто)))

    [Ответить]

  4. Андрей:

    Я люблю делать гивки сам. придумывать раскадровку и прочее… Для меня это как микромультик.

    [Ответить]

    Алекс Fomik Reply:

    Это здорово, что умеете сами делать гивки. Да, кстати, а при помощи какой проги вы это делаете?

    [Ответить]

  5. Марк:

    Давно хотел научиться но все никак руки не доходят! Очень полезная статья. Вот только я про плагины не очень понял

    [Ответить]

    Алекс Fomik Reply:

    А что тут непонятного Марк… Плагин один и он устарел. Работает в версиях ВП ниже 3.7.1

    [Ответить]

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