Красивая подпись для картинки в блоге.

надпись на изображении блогаДоброго времени суток, всем кто читает мои шпаргалки. Разберём сегодня тему, как в Блоггере сделать красивую надпись для изображения. Так как без картинок практически не обходится ни одно сообщение в блоге, хочется как-то их оформить. Вкусы у всех разные. Кто-то хочет оригинальную рамку, а кому-то, наоборот, она не нравится.
Кстати, если вы пропустили пост , как убрать рамку вокруг изображения в блоге, почитайте здесь.



А сейчас, как с помощью инструментов, которые нам предложили разработчики Блоггер и небольших дополнений сделать красивое оформление картинки.

Когда мы загрузили изображение, у нас есть возможность расположить его в любом месте относительно текста, прописать свойства и сделать надпись. Для этого мы просто нажимаем на картинке правой кнопкой мыши и пользуемся нужной функцией.

И в результате получаем вот такой, немного унылый вид с едва заметной подписью.


А сейчас посмотрите, как может выглядеть это же изображение.

надпись для картинки
Для того чтобы получить такое уникальное оформление изображения и более яркую подпись, воспользуемся следующим кодом.

<style>table.tr-caption-container {
    border: 5px solid #dc143c;
border-radius: 10px;
    padding: 10px 10px 10px 10px;
}

table.tr-caption-container img {
    width: 90,5%;
   border: 2px solid #dc143c;

}

td.tr-caption {
color:#0000ff;
    font-size: 20px;
    font-style:  italic;
    text-transform:uppercase ;}</style>


Первая часть кода table.tr-caption-container-(внешний блок)

 border: 5px solid #dc143c; -внешняя  рамка (толщина, цвет) меняйте на своё усмотрение.
border-radius: 10px; закругление углов(убираем строку если нужно прямоугольную)
padding: 10px 10px 10px 10px;-внутренние отступы (если изображение расположилось не по центру меняем значения соответственно-верх, справа, низ, слева).

Вторая часть кода table.tr-caption-container img -(сама картинка)

width: 90,5%;- ширина картинки в процентном отношении (регулируется)
border: 2px solid #dc143c;- ширина и цвет рамки вокруг картинки (не нужно-удаляем строку)

Третья часть кода td.tr-caption - (надпись)

color:#0000ff;-цвет шрифта.
font-size: 20px;-размер шрифта
font-style:  italic;- шрифт.
 text-transform:uppercase ;- прописные символы текста.

Вот вроде весь код по полочкам разобрали. Оставляйте так если устраивает. Или меняйте на ваше усмотрение.

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

Сегодня у меня всё. Спасибо что читаете мой блог. До новых встреч.
Удачи всем нам.


Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

Введите Ваш email ...:


27 комментариев:

  1. Оригинальное решение Вика. Просто, быстро и красиво.

    ОтветитьУдалить
  2. Спасибо, Ольга. А если тут ещё с кодами поиграться вообще можно уникальное изображение сделать.

    ОтветитьУдалить
  3. Просто здорово, картинка изменилась разительно.

    ОтветитьУдалить
    Ответы
    1. Баяс, как я рада Вас видеть. Css творят чудеса. Как говорится дёшево и сердито. Честное слово -увлеклась.

      Удалить
  4. Спасибо,Вика!!!
    Возьму на заметку)

    ОтветитьУдалить
    Ответы
    1. Лариса, здравствуй. Тебе такой вариант на блоге очень даже пригодится может. Как завернёшь свою очередную конфетку в такой фантик, знаешь сколько желающих будет.

      Удалить
  5. Здравствуйте, Вика! Вопрос немного не в тему. Изображение вообще не могу загрузить уже второй день. Появляется пустой квадрат без всяких признаков на загрузку. ?????

    ОтветитьУдалить
  6. Елена, если с Пикассо, то там бывают проблемы. Можете ещё вот эту справку почитать https://support.google.com/blogger/answer/42538?hl=ru
    У меня нормально всё. Сейчас только работала в блоге.

    ОтветитьУдалить
  7. Добрый поздний вечер, Вика!! С картинкой у меня ничего не получается.
    1. В обычном режиме по url я вставляю картинку.
    2. В режим HTML я вставляю код расположенный выше.
    3. Перехожу в режим просмотра - ничего не меняется.
    Что я сделала не так??

    ОтветитьУдалить
    Ответы
    1. Лариса, сегодня проверила на своих тестовых блогах. На двух всё работает нормально. Вот например http://b-v-blog.blogspot.ru/ а вот на одном этот фокус тоже не проходит. Надпись, да меняется, а рамки нет. Думаю это из-за особенности шаблона. Надо будет подумать.

      Удалить
    2. Жаль, что не работает...

      Удалить
    3. У меня, кстати до публикации тоже ничего не меняется, а потом в блоге появляется.

      Удалить
  8. Привет, Вика. Сделала код под себя, вставила в сообщение, все хорошо. А в каком месте в шаблоне его вставить, чтобы во всех сообщениях появилось?

    ОтветитьУдалить
    Ответы
    1. Привет,Олеся. Как всегда Перед строкой ]]>. Но уже без тегов style. Вот так -

      table.tr-caption-container {
      border: 5px solid #dc143c;
      border-radius: 10px;
      padding: 10px 10px 10px 10px;
      }

      table.tr-caption-container img {
      width: 90,5%;
      border: 2px solid #dc143c;

      }

      td.tr-caption {
      color:#0000ff;
      font-size: 20px;
      font-style: italic;
      text-transform:uppercase ;}

      Удалить
    2. Ах вот в чем дело, я решила псамодеятельничать и оказывается выставила в нужное место, но style не убрала. Спасибо, завтра попробую.

      Удалить
  9. Пожалуйста. Вот такой оказывается фокус.

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

      Удалить
    2. Олеся, в этом весь код.

      Удалить
  10. Вика, может быть все-таки можно добавить еще один код, чтобы в изображениях без подписи тоже добавлялся бордюр, меня интересует только вот эта строчка border: 2px solid #dc143c;
    Не очень получается, если в одном сообщении одни изображения с рамкой, а другие нет.

    ОтветитьУдалить
  11. Не совсем поняла,куда ещё добавить код. Именно этим кодом мы задали определённые стили для всей секции table.tr-caption-container . И это будет у всех изображений. Смотри здесь. http://teststudiblog.blogspot.ru/Одна с подписью, другая нет. Просто когда нажимаешь на свойства убрать подпись и всё.

    ОтветитьУдалить
    Ответы
    1. Когда я выставила код, у всех фоток с подписью появилась рамочка, а у изображений без подписи нет.

      Удалить
    2. Как тут http://corolesja.blogspot.com/2015/01/slon.html

      Удалить
    3. Олеся но у меня ведь получилось без подписи сделать рамку. Попробуй так. Нажми на добавить подпись. Правой кнопкой мыши выдели эту надпись, появившуюся уже под картинкой и нажми на клавишуDackspace (удалить) вверху справа на компе. Должно получиться.

      Удалить
    4. Твой способ сработал, спасибо, только теперь придется пересмотреть все сообщения.

      Удалить
    5. Поздравляю.

      Удалить
  12. Здравствуйте, Вика! Подскажите, пожалуйста, как менять цвет рамки.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Анна. за цвет рамки отвечает значение solid #dc143c меняйте
      #dc143c на нужный цвет. Вот здесь есть генератор http://www.shpargalochki.ru/p/utythfnjh-wdtnf.html
      То же самое и внутренняя рамка. Об этом в сообщении написано после кода.

      Удалить

Пользовательский поиск
Foto Saya
My Photo