Весёлые смайлики для комментариев в 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