Translate my Blog

понедельник, 28 января 2013 г.

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


Ууууурррррррррраааааааааа!!!!!!!!!!!!!!!!
Поздравляю Вас дорогие мои друзья (ну и себя в том числе), с новинкой в моём блоге!!!!!!! 
Сбылась одна моя маленькая мечта.....
С сегодняшнего дня мы с Вами можем обмениваться в комментариях к моим новостям не только словами НО и СМАЙЛАМИ!!!!!! А также КАРТИНКАМИ!!!!!!


Я как истинный фанат смайликов в аське и скайпе не могла пережить такую несправедливость, как отсутствие смайлов в моём любимом Блоге :-( 
И вот посидев сегодня немного в интернете и перелопатив много всего по этому поводу я набрела на один ОЧЕНЬ понятный и доступный материал Мастер класс "Смайлики и картинки в комментариях блога"
Ниже Вы сможете найти подробное описание того, как сделать тоже самое у себя в Блоге, если захотите!

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

 Шаг 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'/>



Нажимаем "Сохранить шаблон" и получаем красивенькую подсказку для любимых читателей!

СПАСИБО ОГРОМНОЕ ОКСАНЕ ЧУРИЙ ЗА ПРЕДОСТАВЛЕННЫЙ МАТЕРИАЛ!!!

1 комментарий:

LinkWithin

Related Posts Plugin for WordPress, Blogger...