Вставляем смайлы в посты и комментарии

[kolyaseg]

У меня иногда возникает желание вставить смайлы, как это делается в Скайпе или аське. К сожалению ЖЖ не умеет парсить значки вида :-) или :-( в картиночки. Придется его учить. Скажу сразу это немного муторно, но реально
.

Для начала посмотрим, как это сделать в общем виде. Пишите вы пост или комментарий, для того чтобы вставить смайл, нужно в тексте вписать некий HTML-тэг для вставки картинки:
. Пример:

Привет, как дела?

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

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

1. Выбрать сверху в главном меню ЖЖ "Стиль журнала":


2. На открывшейся странице справа выбираем "Настройте свой стиль":


3. И теперь в меню слева выбираем "Custom CSS":


А теперь в окошко "Custom stylesheet" добавляем следующий код:

.smile {
background-repeat: no-repeat;
background-image: url('http://www.kolobok.us/smiles/icq/smile.gif');
width: 21px;
height: 25px;
display: inline-block;
}
.smile.wink { background-image: url('http://www.kolobok.us/smiles/icq/wink.gif'); }
.smile.bad { background-image: url('http://www.kolobok.us/smiles/icq/bad.gif'); width:22px; height:26px; }
.smile.lol { background-image: url('http://www.kolobok.us/smiles/icq/biggrin.gif'); }
.smile.lol2 { background-image: url('http://www.kolobok.us/smiles/icq/lol.gif'); }
.smile.confused { background-image: url('http://www.kolobok.us/smiles/icq/blush.gif'); width:28px; height:28px; }
.smile.tongue { background-image: url('http://www.kolobok.us/smiles/icq/blum1.gif'); }
.smile.bomb { background-image: url('http://www.kolobok.us/smiles/icq/bomb.gif'); width:26px; height:24px; }
.smile.bye { background-image: url('http://www.kolobok.us/smiles/icq/bye2.gif'); width:37px; }
.smile.cool { background-image: url('http://www.kolobok.us/smiles/icq/cool.gif'); width:22px; height:21px; }
.smile.cry { background-image: url('http://www.kolobok.us/smiles/icq/cray.gif'); width:31px; height:26px; }
.smile.crazy { background-image: url('http://www.kolobok.us/smiles/icq/crazy.gif'); height:28px; }
.smile.diablo { background-image: url('http://www.kolobok.us/smiles/icq/diablo.gif'); width:39px; height:34px; }
.smile.drink { background-image: url('http://www.kolobok.us/smiles/icq/drinks.gif'); width:51px; height:28px; }
.smile.rose { background-image: url('http://www.kolobok.us/smiles/icq/give_rose.gif'); width:31px; height:26px; }
.smile.thumbup { background-image: url('http://www.kolobok.us/smiles/icq/good.gif'); width:27px; height:26px; }
.smile.kiss { background-image: url('http://www.kolobok.us/smiles/icq/kiss3.gif'); width:49px; }
.smile.hihi { background-image: url('http://www.kolobok.us/smiles/icq/mocking.gif'); width:26px; }
.smile.music { background-image: url('http://www.kolobok.us/smiles/icq/music.gif'); width:27px; height:26px; }
.smile.pardon { background-image: url('http://www.kolobok.us/smiles/icq/pardon.gif'); width:34px; }
.smile.sad { background-image: url('http://www.kolobok.us/smiles/icq/sad.gif'); }
.smile.scratchhead { background-image: url('http://www.kolobok.us/smiles/icq/scratch_one-s_head.gif'); width:29px; }
.smile.shock { background-image: url('http://www.kolobok.us/smiles/icq/shok.gif'); height:26px; }
.smile.sorry { background-image: url('http://www.kolobok.us/smiles/icq/sorry.gif'); width:32px; height:26px; }
.smile.dontknow { background-image: url('http://www.kolobok.us/smiles/icq/unknown.gif'); width:35px; }
.smile.kicked { background-image: url('http://www.kolobok.us/smiles/icq/wacko1.gif'); height:26px; }
.smile.kote { background-image: url('http://www.kolobok.us/smiles/user/anna-horosho_01.gif'); width:20px; height:24px; }
.smile.ravshan { background-image: url('http://www.kolobok.us/smiles/user/Cherna_02.gif'); width:52px; height:28px; }
.smile.mamba { background-image: url('http://www.kolobok.us/smiles/big_madhouse/mamba.gif'); width:28px; height:26px; }
Теперь, чтобы вставить смайл, пишем
, где вместо xxxxx вписываем название класса, например "kicked" для
или scratchhead для
А для того чтобы добавить простую улыбочку, пишем просто

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

UPDATE: Немного попортили жизнь нам фишинговые атаки, из-за чего сломались классы в CSS