Весёлые смайлики для комментариев в BLOGGERе.


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


Не так давно в комментариях к статье как вставить изображение в комментарии блога, одна из моих читательниц спросила о том, как добавить смайлики в блог. Я с лёгкой руки "отфутболила" её в свободный поиск в интернете. Посчитала, что об этом информации воз и маленькая тележка. Однако, вспомнила себя начинающим блоггером и как мне просто не везло на эти смайлы. То код летел, то отображались не так. Короче говоря, махнула я на них рукой. Обойдусь. 
И вот один из всех вариантов, который всё же недавно установила на тестовом блоге, как-то прижился. И рожицы достаточно потешные. Да ещё  есть возможность, что-то подогнать под свой вкус и цвет. 

Когда необходимо вставить смайлик, появляется небольшое окно. Где написано подтвердите действие на блоге. Особо оно не напрягает, так как появляется всего один раз. Текст в окне можно написать свой. В моём случае это просто подсказка, как пользоваться установкой. 

смайлики

Смайлики для примера я сделала с фоном. Если он вам не нужен или захотите поменять цвет разберём ниже.

Копируйте следующий код в блокнот.

<style>
.emoWrap {
  background-color:#EEDE86;
  border:2px solid #D3BA59;
  padding:10px 14px;
  color:black;
  font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;
  text-align:center;
}

.emo,
.emoKey {
  display:inline-block;
  *display:inline;
  vertical-align:middle;
}

.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:normal bold 11px/normal Arial,Sans-Serif;
  padding:1px 2px;
  margin:0 0 0 2px;
  color:black;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<script>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "#comment-editor",
    emoMessage = "Нажмите на нужный смайлик, получите код и установите его в нужное место без пробела.Спасибо..";
//]]>
</script>
<script src='http://dte-project.googlecode.com/svn/trunk/jquery-emoticons.js'/>


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

Ну и перейдём к установке. Заходим во вкладку шаблон-изменить HTML. Сделайте заранее резервную копию шаблона на всякий случай. Находим закрывающийся тег </body> и сразу над ним устанавливаем готовый код. Нажмите просмотр и если всё нормально, сохраните шаблон.

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

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

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

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

      Удалить
  2. Здравствуйте! А можно ли создать форму комментариев, используя только кодирование? Как здесь, например:
    http://wishwishwish.net/

    ОтветитьУдалить
    Ответы
    1. Мария. Блог на который вы дали ссылку на WordPress.Там плагины. Саму форму , где укажите имя и прочее -нет. А вот поле со всеми комментариями можно.

      Удалить
  3. Ва-у, и смайлики в раздел комментариев удалось вставить. Ура. Спасибо, Вика!!!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста. С ними веселее правда.

      Удалить
  4. Вика, добрый день. Не могу понять, куда у меня делись смайлики. Попробовала вставить на пробном блоге, не работает. Не подскажете? Спасибо.

    ОтветитьУдалить
    Ответы
    1. Да, Любовь. Эта проблема сейчас возникла в Блогспот из за соединение HTTPS. Более подробную информацию можно получить в справке Гугл.
      https://support.google.com/blogger/answer/6286127 и здесь https://support.google.com/blogger/answer/6284029
      Добавить к этому пока ничего не могу. У меня на тестовых блогах некоторые гаджеты и фишки тоже не отображаются. Пока совсем времени нет всё это переделывать.

      Удалить
    2. Понятно, спасибо, Вика. Подождём до "лучших" времён ...

      Удалить
    3. Любовь, Гугл иногда любит подобные сюрпризы. Ладно, смайлики ведь не самое главное.

      Удалить

Пользовательский поиск
Foto Saya
My Photo