вторник, 19 июля 2011 г.

Как вставить картинку в боковую панель на Blogger

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


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


Для этого необходимо:



1. Зайти в Панель инструментов своего блога и выбрать вкладку Дизайн


2. В открывшемся окне жмем на Добавить гаджет


3. Из многочисленного списка выбираем HTML/JavaScript (не бойтесь такого страшного названия, на самом деле всё проще, чем кажется)


4. В появившемся окне заполняем Название (по желанию), а в поле Содержание копируем вот такой шаблон

<a href="Ссылка на страницу, которая должна открываться при нажатии на картинку"><img height="150" src="Ссылка на картинку" width="150"/></a>

5. Теперь заменяем слова, выделенные жирным шрифтом, на необходимые нам ссылки. Где их получить рассмотрим на рисунке.


Под цифрой 1 ссылка на страницу, которая должна открываться при нажатии на картинку.
Нажав на Копировать URL картинки (под цифрой 2) получим ссылку на саму картинку.

Внимание! "Копировать URL" картинки может звучать по-другому, например: "Копировать ссылку на изображение". Все зависит от того, какой программой пользоваться для входа в Интернет.

Вот что отобразилось у меня в поле Содержание после копирования ссылок

<a href="http://natashka-joy.blogspot.com/2011/07/blog-post_1122.html"><img height="150" src="http://1.bp.blogspot.com/-iRXUolaLgS4/TiQQE9v77qI/AAAAAAAAA0k/waTdw-_a9DE/s320/ovechka.jpg" width="150"/></a>

6. Половина дела сделана. Теперь позаботимся о размерах картинки. За них отвечают вот эти параметры

<a href="http://natashka-joy.blogspot.com/2011/07/blog-post_1122.html"><img height="150" src="http://1.bp.blogspot.com/-iRXUolaLgS4/TiQQE9v77qI/AAAAAAAAA0k/waTdw-_a9DE/s320/ovechka.jpg" width="150"/></a>

height – это высота картинки, width – ширина, цифры в кавычках – это их значение.
Так как шаблон, практически у каждого блога индивидуален, то подбирать их надо исходя из своей ширины колонки.
Например, у меня ширина левой колонки равна 210. При этом максимальная ширина картинки, которую я могу себе позволить – это 170 (вычислено опытным путём). Для данной картинки из примера я поставила значения height и width равными 150. Если бы картинка была прямоугольной, а не квадратной, пришлось бы немного заняться математикой.

Внимание!Нужно помнить, что изменять ширину и высоту картинки надо пропорционально, на одинаковое количество пикселей (именно в них измеряются высота и ширина картинки), иначе изображение на ней может некрасиво растянуться или сжаться.

Для того чтобы под картинкой отображалась дополнительная надпись, в конце кода необходимо добавить <p>"Надпись"</p>. Слова Надпись легко заменяются на любые другие:)

Вот собственно и всё! Пусть блогодомик всегда радует Вас своим видом:)

P.S. Для тех, кто не любит или не хочет возиться с HTML кодом обещаю подготовить статью на эту же тему, но без "ужасных закорючек".
P.S.S.Особая благодарность за помощь в написании статьи Natashka

33 комментария:

  1. Таня, я выполнила задание! :)
    для первой своей "квадратной картинкой".
    Сейчас попробую повычислять для для прямоуголькой картинки :)

    А еще - я добавила себе подпись под картонку - что бы не забыть, когда розыгрыш - мне кажется это тоже нужно :)
    Не могу сюда тег этот вставть - коммент не отправляется... Пошлю тебе по почте.. Если нужно - добавишь себе в статью :)

    И - спасибо за ликбез! :)

    ОтветитьУдалить
  2. И было бы интересно узнать, как это можно сделать без "закорючек" :)

    ОтветитьУдалить
  3. Всегда рада помочь:) Тег для подписи под картинкой - действительно нужная вещь. Спасибо за подсказку!

    ОтветитьУдалить
  4. Интересно!
    у меня ширина меняется автоматически.
    сделала картинку-кнопочку, захожу в блог, нажимаю редактировать а потом сохранить (в новом окне)
    и всё! само все регулируется

    ОтветитьУдалить
  5. Возможно всё дело в "сделала картинку-кнопочку" :)Т.е. Вы её как-то редактируете до того как в блог вставить?

    ОтветитьУдалить
  6. А у меня почему то так не получилось, перед картинкой отображается текст, который пишу в содержании (((.

    ОтветитьУдалить
  7. Просмотрите еще раз внимательно свой код. Скорее всего где-то пропущен один из символов или добавлен лишний. Как вариант - пришлите мне свой код полностью на почту. Адрес есть в профиле. Постараюсь помочь.

    ОтветитьУдалить
  8. Людмила, у Вас в коде появилась лишняя строка.Вставить в комментарий код не могу. Выслала на Вашу почту как она выглядит.

    ОтветитьУдалить
  9. несколько раз пробовала и проверяла, все равно текст перед картинкой(((

    ОтветитьУдалить
    Ответы
    1. Ирина, не нашла у Вас в блоге картинки на боковой панели. Попробуйте вставить еще раз, если не получится -пришлите код мне на почту. Постараюсь помочь.

      Удалить
  10. Большое спасибо, все отлично получилось и с прямоугольной картинкой )))

    ОтветитьУдалить
  11. Спасибо большое!!! За 1 минуту все сделала, а до этого голову ломала не могла придумать)))) очень полезно для начинающих блогеров!

    ОтветитьУдалить
    Ответы
    1. я сама начинающий блогер:) приятно, что статья оказалась Вам полезной.

      Удалить
  12. Спасибо! Получилась аккуратная картинка! Оказывается в шаблоне, которым я раньше пользовалась стояли цифры 220

    ОтветитьУдалить
  13. Спасибо огромное!!!!! Наконец-то все получилось :-)

    ОтветитьУдалить
  14. Этот комментарий был удален автором.

    ОтветитьУдалить
  15. То что доктор прописал! Спасибо! Очень понадобилось! :-)))

    ОтветитьУдалить
    Ответы
    1. Да, иногда вот такие мелочи и спасают:)

      Удалить
  16. Таня спасибо вам огромное! Только после ваших рекомендаций получилось все как надо!

    ОтветитьУдалить
  17. СПАСИБО ! ! ! Очень помогли начинающему блоггеру.

    ОтветитьУдалить
  18. Вы - моя спасительница!!!!!! пол утра сегодня вазюкаюсь с боковой панелькой..никак не уменьшались картинки на конкурсы других блоггеров.
    Спасибо!!!!

    ОтветитьУдалить
  19. А у меня не совсем вопрос по теме..как мне сделать так чтобы у меня на странице в блоге была не только правая боковая панель но и слева..

    ОтветитьУдалить
    Ответы
    1. Оксана, заходите в Настройки блога --- слева выбираете вкладку Дизайн.

      Вверху будет написано, что "Ширину столбцов можно задать в дизайнере шаблонов". Вот на этот "дизайнер шаблонов" нажимаете и попадаете на новую страницу.

      Вверху слева выбираете Дизайн.

      Теперь можно изменять дизайн основной части и нижнего колонтитула.

      Если что неясно - пишите:)

      Удалить
  20. Танечка! Спасибо большое за хорошее объяснение. Начала вести блог, но не все понимаю как делать. А вы все так прекрасно объяснили, все получилось сразу! Спасибо-спасибо!!!

    ОтветитьУдалить
    Ответы
    1. И Вам спасибо!
      Очень яркий у Вас блог. С удовольствием почитаю:)

      Удалить
  21. Спасибо!!! Жду вас, Таня, приходите!!!

    ОтветитьУдалить
  22. И от меня мега спасибо!!! И вправду очень хорошо описано! Спасибо Вам!

    ОтветитьУдалить