Творим красоту своими руками: Смайлики и картинки в комментариях блога

Ууууурррррррррраааааааааа!!!!!!!!!!!!!!!!

Поздравляю Вас дорогие мои друзья (ну и себя в том числе), с новинкой в моём блоге!!!!!!!

Сбылась одна моя маленькая мечта.....

С сегодняшнего дня мы с Вами можем обмениваться в комментариях к моим новостям не только словами НО и СМАЙЛАМИ!!!!!! А также КАРТИНКАМИ!!!!!!

Я как истинный фанат смайликов в аське и скайпе не могла пережить такую несправедливость, как отсутствие смайлов в моём любимом Блоге :-(

И вот посидев сегодня немного в интернете и перелопатив много всего по этому поводу я набрела на один ОЧЕНЬ понятный и доступный материал Мастер класс "Смайлики и картинки в комментариях блога".

Ниже Вы сможете найти подробное описание того, как сделать тоже самое у себя в Блоге, если захотите!

И так...

открываем редактор блога и начинаем!

Шаг 1
Открываем панель управления Blogger на вкладке "Шаблон"
Жмем кнопку "Резервное копирование и восстановление" в правом верхнем углу

Сохранение шаблона блога. Шаг 1

В открывшемся окошке жмем "Загрузить шаблон полностью"

Сохранение шаблона блога. Шаг 1

И сохраняем xml шаблон блога где-нибудь на компьютере.

Этот шаг можно пропустить, если Вы понимаете ЧТО Вы делаете или уже не в первый раз редактируете шаблон. В противном случае, эти небольшие манипуляции помогут Вам вернуть внешний вид и настройки блога, если что-то пойдет не так.
Кажется я об этом уже писала? ;)

Шаг 2
Сейчас, руководствуясь мастер классом от Блогер о "Blogger" будем вставлять вот такие смайлики:

Снова открываем панель управления Blogger на вкладке "Шаблон"
Жмем "Изменить HTML"

Редактирование шаблона блога. Шаг 2

Ставим галочку "Расширить шаблоны виджета"

Редактирование шаблона блога. Шаг 2

Жмем на клавиатуре Ctrl+F.
Внизу в браузере откроется окно поиска, в которое копируем вот этот тег:

</head>

и перед ним вставляем такой скрипт:

<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'/>

Далее в строку поиска браузера копируем:

</body>

и перед этим тегом вставляем код в зависимости от вида комментариев в Вашем блоге

Если у Вас иерархический формат комментариев:
<script src='http://aboutblogger.googlecode.com/files/widget_smiles.js' type='text/javascript'/>
Если у Вас линейный формат комментариев:
<script src='http://aboutblogger.googlecode.com/files/widget_smiles_ln.js' type='text/javascript'/>

Шаг 3
Если Вы хотите добавить возможность вставлять картинки в комментарии, тогда скопируйте перед тегом

</body>

код в зависимости от вида комментариев в Вашем блоге:

Если у Вас иерархический формат комментариев:
<script type='text/javascript'>
var cimw = 658;
var cimh = 500;
</script>
<script src='http://aboutblogger.googlecode.com/files/widget_img.js' type='text/javascript'/>
</body>
Если у Вас линейный формат комментариев:
<script type='text/javascript'>
var cimw = 658;
var cimh = 500;
</script>
<script src='http://aboutblogger.googlecode.com/files/widget_img_ln.js' type='text/javascript'/>

Затем скопируйте в строку поиска:

/* Comments

И вставьте после тега и пунктирной линии такой код:

#comment-img {
max-width: 100%;
max-height: 500px;
}

Жмем "Сохранить шаблон"

Сама возможность вставки картинок прописала в скрипте, который Вы вставили перед тегом </head>. Этим же действием мы поставили ограничение на размер картинок, которые могут опубликовать Ваши ПЧ в комментариях. Картинки автоматически будут уменьшаться до 500 пикселей.

Этот скрипт создан не мной, он взят из блога, ссылку на который я указала в начале Шага 2. Огромное спасибо автору!!!

Там же есть информация как именно править этот скрипт, если Вам не нравится подборка смайлов или других функций.

Шаг4

Теперь надо оповестить своих ПЧ о том, что в Вашем блоге в комментариях можно использовать картинки и смайлики, для этого, с благодарностями за наводку Любе Люера, я вставила под комментарии картинку:

Открываем панель управления Blogger на вкладке "Шаблон". И не забываем поставить галочку "Расширить шаблоны виджета".

Жмем на клавиатуре Ctrl+F.
В окно поиска копируем:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

!!!ВНИМАНИЕ!!!

Поисковик найдет четыре таких кода. Нам нужен второй и четвертый!
После второго и после четвертого кода добавляем в шаблон такую строку:

<img border='0' height='120' src='https://lh4.googleusercontent.com/-PMo4BTOcKms/UO57gFh96zI/AAAAAAAAHTA/Zs0qLhVBG9Q/s800/%25D0%259E%25D1%2580%25D0%25B8%25D0%25B3%25D0%25B8%25D0%25BD%25D0%25B0%25D0%25BB%2520%25D1%2581%25D0%25BC%25D0%25B0%25D0%25B9%25D0%25BB%25D0%25BE%25D0%25B2.png' title='Добавляем смайлики в сообщение' width='630'/>