воскресенье, 20 января 2013 г.

Как вставить изображение в КОММЕНТАРИИ?

ПРОСТИТЕ, НО ПОСЛЕ НЕКОТОРЫХ ИЗМЕНЕНИЙ, КОТОРЫЕ ВНЕСЛИ САМИ РАЗРАБОТЧИКИ, ДАННЫЕ СКРИПТЫ НЕ РАБОТАЮТ.

Сегодня у нас крутая тема! Почему крутая? Потому что будем прокачивать комментарии  в своём блоге. Вы наверно заметили, что в большинстве блогов комментарии без изысков.Необычные формы для отзывов можно встретить разве что в блогах профессиональных програмистов, да и то особыми интересностями они не блещут. Максимум иногда встречаются блоги, где в комментариях можно вставить смайлик. Но это скорее редкость.Многие даже капчу не отменили.

Мы уже научились вставлять в комментариях активные ссылки как у себя в блоге, так и в чужом. 

Сейчас же я расскажу как 
  1. Вставить небольшое изображение слева. (брать изначально маленькую картинку)
  2. Вписать большое изображение на всю ширину комментариев (100%) 
  3. Эффект бегущей строки справа налево
  4. Установить размер текста
  5. Установить цвет текста
  6. Отцентрировать текст (разместить текст в центре строчки)
  7. Бегущая строка теперь слева направо
  8. Прямоугольная обводка текста
  9. Выделить текст
  10. Установить фон с обводкой области
  11. Установить цвет фона

Для начала, чтобы понять о чем речь, перемотайте пост до самого низа, то бишь до моих комментариев. Там в том же порядке, что и в списке (см. выше) приведены примеры апгрейда наших комментариев. Любуемся и возвращаемся вдохновленными назад, Обещаю, что все будет как всегда в моих инструкциях просто и понятно.
Для тех, кто был не очень внимателен, напоминаю, что сегодня мы делаем крутыми комментарии В СВОЁМ БЛОГЕ! Чужим блогам можно помочь разве что рабочей ссылкой на этот пост.

Начнем? В этот раз мы снова полезем в шаблон, но обещаю, что это будет не сложно.
Открываем панель управления блогом (админку), выбираем слева в колонке ШАБЛОН, жмем ИЗМЕНИТЬ HTML, в открывшемся окне ставим галочку в РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА.

Теперь сочетанием клавиш ctrl+F вызываем справа вверху окно быстрого поиска, в котором вводим </body>  и нам мигом находят этот тэг в коде. 

Ставим курсор перед этим боди и вставляем скрипт на ссылку 

<script src='http://hosting.gmodules.com/ig/gadgets/file/105066904960012479556/nccode.js' type='text/javascript'/>

Сохраняем шаблон и, выждав немного, закрываем его. Начало положено! Теперь в ваших комментариях уже можно проделывать то, что Вы видели в моих. Но как? Ооо, дальше сущая ерунда.

Для начала сохраним для себя (где-нибудь в папочке на компьютере) следующие теги:

[im].....[/im]
[im#]...[/im]
[ma]....[/ma]
[si="2"]...[/si]
[co="red"]...[/co]
[ce]...[/ce]
[ma+]...[/ma+]
[box]...[/box]
[mark]...[/mark]
[card="blue"]...[/card]
[hi="yellow"]...[/hi]

Они все расположены согласно списка (то есть отвечают за тот или иной эффект) . Сохраните сразу соединив оба списка, чтобы было понятно какой тег за что в ответе. Красным цветом  в кавычках выделены размер или цвет на английском языке, их можно заменить на любой по вашему усмотрению.

Теперь самое приятное)))

Например Вы хотите разместить картинку как у меня в первом варианте.
Соответственно выбираем тэги из первой строчки и вставляем в окне комментариев (да-да, там где Вы пишете отзыв обычно). Между тегами вместо точек вставляем URL картинки (или скопированный адрес картинки, для тех кто в Opera) и публикуем. До публикации все это так и остается буквами и закорючками, а вот после виден результат.

Если хотите не картинку, а текст с выбранным эффектом, то просто вместо точек между тэгами пишете текст и публикуете.

С этим мы разобрались. Что делать с вашими читателями? Они же не знают, что у вас теперь крутые комментарии. Советую создать отдельную страницу , в которой расписать правила комментирования.

Простите, но об этом я расскажу завтра, мне пора дочку собирать в садик.

ВАЖНО! Не размещайте больше под этим постом свои картинки. Пост вместе с комментариями стал слишком тяжелым и изображения перестали загружаться. Поэтому прошу прощения, но я удалю большинство комментариев (только в этом посте) для того, чтобы было видно чего ради стоит стараться и сделать такое в своем блоге. 

45 комментариев:

  1. 1. Вставка изображений слева (изначально выбирать маленькие картинки)

    [im]http://im0-tub-ru.yandex.net/i?id=296171969-27-72&n=21[/im]

    ОтветитьУдалить
  2. 2.Вписать изображение во всю ширину комментариев (изображение по ширине подгоняется под ширину поля комментария)

    [im#]http://img1.liveinternet.ru/images/attach/c/4/79/322/79322329_yu.jpg[/im]


    ОтветитьУдалить
    Ответы
    1. [im#]http://img1.liveinternet.ru/images/attach/c/4/79/322/79322329_yu.jpg

      Удалить
  3. 3.Эффект бегущей строки (справа налево)

    [ma]Чудеса встречаются там, где в них верят[/ma]

    ОтветитьУдалить
  4. 4.Установить размер текста

    [si="1"]Размер 1[/si]
    [si="2"]Размер 2[/si]
    [si="3"]Размер 3[/si]
    [si="4"]Размер 4[/si]
    [si="5"]Размер 5[/si]
    [si="6"]Размер 6[/si]
    [si="7"]Размер 7[/si]
    [si="8"]Размер 8[/si]
    [si="9"]Размер 9[/si]
    [si="10"]Размер 10[/si]

    ОтветитьУдалить
  5. 5.Установить цвет текста.

    [co="red"]Вы все молодцы, что подписались на мой блог! Спасибо![/co]

    ОтветитьУдалить
  6. 6.Отцентрировать текст, то бишь разместить его по центру (мне казалось, что пробел тоже может помочь)

    [ce]Будьте щедрыми, рассказывайте своим читателям о моём блоге и делитесь ссылками[/ce]

    ОтветитьУдалить
  7. 7.Бегущая строка (аа, от первой ее отличает то, что бежит слева направо)

    [ma+]Чудеса встречаются там, где в них верят![/ma+]

    ОтветитьУдалить
    Ответы
    1. в первом случае она более читабельна, здесь не очень удобно читать задом наперед..но есть же и другие языки)))

      Удалить
  8. 8.Прямоугольная обводка текста.

    [box]Сегодня обязательно случится что-то замечательное[/box]

    ОтветитьУдалить
    Ответы
    1. Такс! У меня на черном фоне это выглядит не позитивно((( А на белом фоне все будет хорошо.

      Удалить
  9. 9.Выделить текст.

    [mark]Хочешь увидеть, как девушка сходит с ума? Дай ей денег и закрой в квартире.[/mark]

    ОтветитьУдалить
  10. 10.Установить фон с обводкой области.

    [card="blue"]У меня сегодня очень полезное настроение - меня одну можно на войну отправлять... разобью всех![/card]

    ОтветитьУдалить
  11. 11.Установить фон для текста

    [hi="yellow"]У меня есть я. Мы справимся.[/hi]

    ОтветитьУдалить
  12. ВАУ! СУПЕР! Бегущая строка очень порадовала!

    ОтветитьУдалить
    Ответы
    1. Дерзайте! Я загляну побаловаться в ваших комментариях)))

      Удалить
  13. Крутооооо! Я только однажды у кого-го видела картинку в комментариях, а все эти причуды вообще впервые вижу! Ты сегодня мне Америку открыла ))

    ОтветитьУдалить
    Ответы
    1. [im]http://im6-tub-ru.yandex.net/i?id=104641301-23-72&n=21[/im]
      Вот что меня удивляет, так это то, что я еще нахожу чем тебя удивить, человека, кто правил мой блог пару ночей)) Впрочем Америку за утро я для тебя открыла дважды.

      Удалить
    2. [im]http://img-fotki.yandex.ru/get/6307/91771020.221/0_8f3fc_1efa6897_XL[/im]
      Да да, аж дважды )))

      Удалить
    3. Умница! Я у тебя в блоге тоже побывала с картинками))))

      Удалить
    4. Да, я уже видела ))
      То есть я правильно понимаю, если бы я не изменила в своем блоге шаблон, ты бы не могла оставить у меня нестандартный комментарий?

      Удалить
    5. Ты все правильно понимаешь. Да, именно внесенные изменения в ТВОЙ шаблон, дали мне возможность оставить в ТВОЁМ блоге нестандартные комментарии.

      Удалить
  14. Вот это да!!!!! до чего техника дошла!!! :))) Спасибо!
    Обязательно все попробую ). Наташа, и когда ты все это успеваешь: и столько много полезностей опубликовать и детей не обделить? :). У тебя время хоть на сон остается? ;)

    ОтветитьУдалить
    Ответы
    1. Семья у меня на первом месте, за компьютер сажусь только когда всех усыплю, в том числе и любимого мужчину) Спать удается утром. У меня очень самостоятельные девочки. Младшая в свои 2 годика сегодня вполне справилась самостоятельно позавтракать, благо завтрак и воду для питья я для нее приготовила заранее.

      Удалить
  15. Вот это вещь!
    Сделала!
    Спасибо!!!

    ОтветитьУдалить
    Ответы
    1. Я и говорила, крутая тема))) Рада, что понравилось. Ищу другие интересности и на подходе еще несколько постов к публикации

      Удалить
  16. Но тут есть момент... мы не можем добавить картинки тем, у кого в шаблонах нет тех же изменений, что и у нас...

    ОтветитьУдалить
    Ответы
    1. Да, но об этом написано в самом посте. Зато мы имеем возможность сделать СВОЙ блог более эффектным, чем у остальных. Скажем прямо- круче чем у большинства)))

      Удалить
  17. Энн, спасибо большое за информацию!!

    ОтветитьУдалить
  18. Ой!Спасибо,сколько нового и интересного!Вернусь с отдыха,займусь блогом!!!

    ОтветитьУдалить
  19. ура! получилось! значит я что-то неправильно сделала в прошлый раз!

    ОтветитьУдалить
  20. Спасибо:) И у меня все получилось!

    ОтветитьУдалить
  21. (((( А у меня ничего не получилось...... еще на стадии: галочку напротив "РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА". просто не пойму где ее ставить эту галочку шаблон-изменить html - там получилось большое окошко с этим кодами, а вверху кнопки "сохранить шаблон" "список виджетов" изменить шаблон" посмотреть шаблон " "восстановить шаблоны виджетов по умолчанию" итд а где "расширить шаблоны виджета" не вижу.... расстроилась видимо я совсем .... чайник

    ОтветитьУдалить
    Ответы
    1. ПЫСЫ. вставила бы рыдающий смайлик, но не могу))))))

      Удалить
    2. Анастасия, Вы здесь ни при чем. огда я писала статью, то писала описывая реальный процесс. Позже разработчики от Гугл внесли изменения. Теперь достаточно действий без РАСШИРИТЬ.... Нужно внести изменения и сохранить.

      Удалить
  22. [im]http://img-fotki.yandex.ru/get/4125/198250778.0/0_b2708_1e2bf032_M.gif[/im]
    Дорогая Энн! Всё отлично! Но есть одно но... В гаджете "Последние комментарии" появляется ссылка и смотрится не очень! Может есть ещё какой вариант! У Вас чудесный блог! Очень много полезной информации. Огромное спасибо!

    ОтветитьУдалить
    Ответы
    1. Лидия Лазарева, боюсь, что пока не могу поделиться другим способом, так как другого не знаю. Рада, что нашли у меня много полезного!

      Удалить
  23. Очень жаль, что не работают(((

    ОтветитьУдалить
  24. Почему то в Гугле не отображаются картинки. А в мозиле нормально.

    ОтветитьУдалить
  25. Я вставила и все работает, но как теперь сообщить об этом посетителям? Вот у Вас текст под окошком комментария, как Вы его вставляли? Я бы вставила читателям объявление о возможности публиковать картинки так же :-)

    ОтветитьУдалить
  26. Энн, все получилось, спасибо!

    ОтветитьУдалить
  27. Добрый день, Энн! Почему-то в комментарии все равно вставляется ссылка, что- то делаю не так, подскажите как правильно сделать. Нашла, вставила, но результата нет,только ссылка

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

Дорогой мой читатель, если Вам понравилась статья, то напишите отзыв, мне очень приятно читать комментарии. А если Вы посчитаете, что статья достойна того, чтобы ее порекомендовать остальным, нажмите на +1.

Хотите сохранить полезную информацию в соц.сетях? Выбираем и сохраняем!

LinkWithin

Related Posts Plugin for WordPress, Blogger...