Доброго времени суток, всем кто читает мои шпаргалки. Разберём сегодня тему, как в Блоггере сделать красивую надпись для изображения. Так как без картинок практически не обходится ни одно сообщение в блоге, хочется как-то их оформить. Вкусы у всех разные. Кто-то хочет оригинальную рамку, а кому-то, наоборот, она не нравится.
Кстати, если вы пропустили пост , как убрать рамку вокруг изображения в блоге, почитайте здесь.
А сейчас, как с помощью инструментов, которые нам предложили разработчики Блоггер и небольших дополнений сделать красивое оформление картинки.
Когда мы загрузили изображение, у нас есть возможность расположить его в любом месте относительно текста, прописать свойства и сделать надпись. Для этого мы просто нажимаем на картинке правой кнопкой мыши и пользуемся нужной функцией.
И в результате получаем вот такой, немного унылый вид с едва заметной подписью.
А сейчас посмотрите, как может выглядеть это же изображение.
Для того чтобы получить такое уникальное оформление изображения и более яркую подпись, воспользуемся следующим кодом.
Первая часть кода 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 и вставьте этот код. Нажмите просмотр. Результат будет виден.
Сегодня у меня всё. Спасибо что читаете мой блог. До новых встреч.
Удачи всем нам.
А сейчас, как с помощью инструментов, которые нам предложили разработчики Блоггер и небольших дополнений сделать красивое оформление картинки.
Когда мы загрузили изображение, у нас есть возможность расположить его в любом месте относительно текста, прописать свойства и сделать надпись. Для этого мы просто нажимаем на картинке правой кнопкой мыши и пользуемся нужной функцией.
И в результате получаем вот такой, немного унылый вид с едва заметной подписью.
А сейчас посмотрите, как может выглядеть это же изображение.
<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>
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 и вставьте этот код. Нажмите просмотр. Результат будет виден.
Сегодня у меня всё. Спасибо что читаете мой блог. До новых встреч.
Удачи всем нам.
оформите подписку на новые шпаргалки
Оригинальное решение Вика. Просто, быстро и красиво.
ОтветитьУдалитьСпасибо, Ольга. А если тут ещё с кодами поиграться вообще можно уникальное изображение сделать.
ОтветитьУдалитьПросто здорово, картинка изменилась разительно.
ОтветитьУдалитьБаяс, как я рада Вас видеть. Css творят чудеса. Как говорится дёшево и сердито. Честное слово -увлеклась.
УдалитьСпасибо,Вика!!!
ОтветитьУдалитьВозьму на заметку)
Лариса, здравствуй. Тебе такой вариант на блоге очень даже пригодится может. Как завернёшь свою очередную конфетку в такой фантик, знаешь сколько желающих будет.
УдалитьЗдравствуйте, Вика! Вопрос немного не в тему. Изображение вообще не могу загрузить уже второй день. Появляется пустой квадрат без всяких признаков на загрузку. ?????
ОтветитьУдалитьЕлена, если с Пикассо, то там бывают проблемы. Можете ещё вот эту справку почитать https://support.google.com/blogger/answer/42538?hl=ru
ОтветитьУдалитьУ меня нормально всё. Сейчас только работала в блоге.
Добрый поздний вечер, Вика!! С картинкой у меня ничего не получается.
ОтветитьУдалить1. В обычном режиме по url я вставляю картинку.
2. В режим HTML я вставляю код расположенный выше.
3. Перехожу в режим просмотра - ничего не меняется.
Что я сделала не так??
Лариса, сегодня проверила на своих тестовых блогах. На двух всё работает нормально. Вот например http://b-v-blog.blogspot.ru/ а вот на одном этот фокус тоже не проходит. Надпись, да меняется, а рамки нет. Думаю это из-за особенности шаблона. Надо будет подумать.
УдалитьЖаль, что не работает...
УдалитьУ меня, кстати до публикации тоже ничего не меняется, а потом в блоге появляется.
УдалитьПривет, Вика. Сделала код под себя, вставила в сообщение, все хорошо. А в каком месте в шаблоне его вставить, чтобы во всех сообщениях появилось?
ОтветитьУдалитьПривет,Олеся. Как всегда Перед строкой ]]>. Но уже без тегов 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 не убрала. Спасибо, завтра попробую.
УдалитьПожалуйста. Вот такой оказывается фокус.
ОтветитьУдалитьВставила код, получилось. Правда есть загвоздка: рамочки появляются только у тех изображений у которых есть подпись.
УдалитьОлеся, в этом весь код.
УдалитьВика, может быть все-таки можно добавить еще один код, чтобы в изображениях без подписи тоже добавлялся бордюр, меня интересует только вот эта строчка border: 2px solid #dc143c;
ОтветитьУдалитьНе очень получается, если в одном сообщении одни изображения с рамкой, а другие нет.
Не совсем поняла,куда ещё добавить код. Именно этим кодом мы задали определённые стили для всей секции table.tr-caption-container . И это будет у всех изображений. Смотри здесь. http://teststudiblog.blogspot.ru/Одна с подписью, другая нет. Просто когда нажимаешь на свойства убрать подпись и всё.
ОтветитьУдалитьКогда я выставила код, у всех фоток с подписью появилась рамочка, а у изображений без подписи нет.
УдалитьКак тут http://corolesja.blogspot.com/2015/01/slon.html
УдалитьОлеся но у меня ведь получилось без подписи сделать рамку. Попробуй так. Нажми на добавить подпись. Правой кнопкой мыши выдели эту надпись, появившуюся уже под картинкой и нажми на клавишуDackspace (удалить) вверху справа на компе. Должно получиться.
УдалитьТвой способ сработал, спасибо, только теперь придется пересмотреть все сообщения.
УдалитьПоздравляю.
УдалитьЗдравствуйте, Вика! Подскажите, пожалуйста, как менять цвет рамки.
ОтветитьУдалитьЗдравствуйте Анна. за цвет рамки отвечает значение solid #dc143c меняйте
Удалить#dc143c на нужный цвет. Вот здесь есть генератор http://www.shpargalochki.ru/p/utythfnjh-wdtnf.html
То же самое и внутренняя рамка. Об этом в сообщении написано после кода.