Красивое оформление статей в блоге Blogger/Blogspot

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

bloki-teksta
Смотрится очень эффектно, по-крайней мере, на мой вкус, и я подумала, что здорово было бы сделать в своем блоге так же.

Позже, когда я завела рубрику "Задайте свой вопрос", и стала публиковать ответы, так же задумалась, как здорово было бы интересней оформить письма от читателей.
Пока я была только в мыслях, от моего постоянного читателя Retliff поступил комментарий с просьбой рассказать, как сделать нечто подобное. Возможно, он подразумевал какое-то более простое решение, чем то, которое в итоге сделала я.

Пришлось от мыслей перейти к действиям, и вот что получилось. Частично можно увидеть уже в этой статье. Если вам нравится, и возникло желание сделать у себя так же, то читаем дальше инструкцию.

Главное, обращаю сразу ваше внимание на то, что после всех настроек, когда вы захотите, чтобы определенный кусок текста находился в определенном блоке, нужно будет править HTML код. Сложностей совершенно никаких в этом нет, но потребует от вас внимательности. Итак, приступим.

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

  1. Важно - vajno.
  2. Информация - info.
  3. Письма от читателей - mail.
  4. Код – kod.

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

Итак, у меня есть 4 вида блоков. Частично, все эти блоки выглядят одинаково – рамка, скругленные углы, тень, расположение картинки, отступы. А частично – по-разному, это цвет блока, картинка, шрифт.

Внешний вид всегда задается с помощью CSS стилей. И получается, что часть кода всегда будет одинакова для всех блоков, а другую часть кода нужно будет присваивать каждому блоку в отдельности.

Открываем Дизайн – Изменить HTML, находим строчку:
]]></b:skin>
Весь дальнейший код CSS вы должны поместить до этой строчки.

Итак, у нас есть названия блоков, и есть код, который для всех блоков одинаков. Внесем этот код в шаблон блога.

.vajno, .info, .mail, .kod {
margin:10px;
padding:15px 20px 15px 80px;
border:1px solid #999999;
border-radius: 10px;
-moz-border-radius:10px 10px 10px 10px;
box-shadow:2px 2px 3px #999999;
-moz-box-shadow:2px 2px 3px #999999;
-webkit-box-shadow: #999 2px 2px 3px;
background-position:20px 50%;
background-repeat:no-repeat;
position:relative;
text-align:justify;
}
Посмотрите внимательно, в первой строке через запятую перечислены названия моих блоков vajno, info, mail, kod (перед каждым названием указывается точка). В дальнейшем, если вы придумаете для себя новый блок, то этот код не нужно дублировать, нужно будет только вписать в верхнюю строку название (с точкой) нового блока через запятую.

Дальше мы должны вставить код для каждого блока в отдельности. У меня этот код такой:

.vajno {
background-color:#FFD4A0;
background-image: url("http://lh4.ggpht.com/_G92voTj-yF0/TO0c43ebP4I/AAAAAAAAA7Y/9LgBZ8FG_70/vajno.png");
}
.mail {
background-color:#E4F6F8;
background-image: url("http://lh3.ggpht.com/_G92voTj-yF0/TO0Yze20zPI/AAAAAAAAA7U/AuB_pacAJy8/mail.png");
}
.info {
background-color:#FFFFCC;
background-image: url("http://lh5.ggpht.com/_G92voTj-yF0/TO0osHobz7I/AAAAAAAAA7c/UuJQ0vP5k18/info.png");
}
.kod { background-color:#E9FFD4;
background-image: url("http://lh3.ggpht.com/_G92voTj-yF0/TO0qiaCAffI/AAAAAAAAA7k/DRmMoObB4ss/kod.png");
}
Этот код определяет цвет и путь до картинки. В этом коде вы можете устанавливать свой цвет, и вставлять свою картинку, просто указав ее голый URL. Так же, к этому коду вы можете добавлять стиль для шрифта, указывать его размер и другие параметры (это уже для более продвинутых пользователей).

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

Итак, вы пишите свою статью как обычно. Пользуетесь ли вы редактором блогов или отправляете через визуальный редактор Blogger – не важно. После того, как статья готова, но ещё не опубликована, переходим на вкладку Изменить HTML.

Находим тот абзац текста, который вы хотите выделить в определенный блок. И окружаем его тегами таким образом:

<div class="название блока">Текст, который должен находиться в блоке</div>
Например, если вы хотите часть текста показать в блоке info, то указываете код так:
<div class="info">Текст, который должен находиться в блоке info</div>
Получится так:
Текст, который должен находиться в блоке info
Небольшое замечание:
Если вы выравниваете текст статьи по ширине или по центру, то все абзацы по умолчанию в коде HTML уже находятся внутри тегов <div style="text-align: justify;">Абзац</div>. В таком случае просто замените открывающий тег <div style="text-align: justify;"> на тот, который нужно, например <div class="info">.
Код проверяла в браузерах Mozilla Firefox, Google Chrome, Opera и Internet Explorer. В браузере Internet Explorer - нет скругленных углов и тень, практически, не видна. В остальном все смотрится очень красиво (на мой вкус).

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


Запись опубликована автором в рубрике Как создавать сайты с метками .

Красивое оформление статей в блоге Blogger/Blogspot: 59 комментариев

  1. Flee.lancer

    Классная статья! Искала как раз нечто подобное для своего блога. Иногда нужно выделить красиво текст даже для восприятия читателя.. Разбавлять картинками конечно вариант, но это легче для блога.

    З.Ы. а если усложнить задачу? и можно добавить вместо заливки? — мне это не нужно, ну мало ли захочется проявить фантазию?))

  2. Retliff

    Спасибо огромное, Катя! Я спрашивал именно об этом!-)
    Пока ждал твоего ответа — нашёл в Интернете сервис «Рамочник».
    Он позволяет оформить тект рамками, но никакой автоматизации процесса!-)
    Как всегда всё очень доходчиво и профессионально!
    Слово «Дилетант» в названии твоего блога уже давно утратило актуальность!-)

  3. mangust_ru

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

  4. Олег

    Очень красиво!
    1.А если без картинки делать — то просто не ставить ссылку на нее?
    2.В WP есть плагин который так делает? (просто завел недавно и там блог)

  5. SEO-Дилетант'ка

    Усложнить задачу можно, только для этого нужно код дорабатывать. Дело в том, что картинка в блоке уже является фоном (background-image), т.е. заливкой, а залить один бокс двумя фонами сразу нельзя.

  6. SEO-Дилетант'ка

    Олег, на всякий случай уточню, что картинка не является ссылкой, и не является картинкой, как таковой. Это фон, и ПС воспринимается фоном, в этом смысл CSS.
    1. да, можно просто удалить строчку background-image:, но тогда нужно будет ещё доработать общий код, т.к. в нем есть параметры, определяющие положение картинки, отступ текста.
    2. Я ещё не сталкивалась именно с плагином, такое оформление видела только на 2-х блогах, но предполагаю, что именно плагином это сделано. Если он мне попадется, я напишу здесь.

  7. Дмитрий

    хотел уже руками лесть в свои вордпресовкие файлы…. вы Олег побудили погуглить… вот он Плагин WP-Note

  8. ClrClr

    «Если вы выравниваете текст статьи по ширине» — не проще ли раз и навсегда .post-body { text-align: justify; }

  9. Олег

    Дмитрий спасибо что не поленились, в ВП конечно проще — поставил плагин, два слова в тексте — и готово.
    Эх — еще бы на блогспот такую штуку как (J)ExR, вот бы клево было, а то у меня на картинки(Пикасу) немерено исходящих ссылок, а закрывать нофаллами лень…

  10. Larisa Greenberg

    Катя, огромнейшее спасибо тебе за эту инфу и вообще за весь твой блог. Много действительно практической полезной информации!

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

    Читая тебя, я все больше и больше влюбляюсь в Blogger.com и его постоянно расширяющиеся возможности.

    Твои материалы будят во мне творческое начало с каждым разом все сильнее и сильнее! Сразу видно, что ты пишешь от всей души и с огромным удовольствием!

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

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

    С новым годом!

  11. Jekan-2010

    а как прописать 2 разных типа рамок??
    мне нужно чтобы в одном типе было:
    padding:15px 20px 15px 150px;

    а в другом
    padding:15px 20px 15px 15px;

    если тупо описать сначала один тип — потом 2ой то они начинают конфликтовать: множится картинка и пропадает отступ 150px

  12. allvictory

    Если я правильно понял, то за увеличение текста в рамке vajno отвечает код: .vajno:hover {
    transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -o-transform:scale(1.5);
    }

    Но как сделать так, чтобы он был не прозрачным? У меня, при наведении, рамка увеличивается, но задевая края левой и правой колонки, теряет свою прозрачность. И как результат — принимает некрасивый вид. Как с этим бороться?

  13. SEO-Дилетант'ка

    Поняла в чем проблема. Самое простое решение, это уменьшить величину, например, сделать 1,2. Если именно решать проблему, то надо поэкспериментировать с таким свойством CSS, как z-index.

  14. TimMpershyn

    Здравствуйте. Немного не по теме вопрос, но тоже про углы и изображения.
    Екатерина, Вы не знаете случайно, как и возможно ли вообще вот так же сгладить углы на визитке-логотипе страницы блога на facebook, которая (визитка) на этот же блог добавлена)?
    Недавно установил её на главной, а там углы острые, и в редактировании на самом фейсбуке никаких таких опций по изменению изображения нет. А хотелось бы со сглаженными углами, так как почти весь блог в таком стиле оформлен.

  15. SEO-Дилетант'ка

    Я не уверена, что это вообще можно изменить. Да. на Facebook никаких подобных инструкций по внешнему виду вообще нет. Окно загружается, как фрейм, а мы со своей стороны не можем изменить внешний вид такого окна.

  16. auditconsult.biz

    Спасибо. Тоже себе позаимствовал. Вот, что получилось http://pro100blogger.blogspot.com/2011/04/linkfeed.html
    Правда, я в своих постах не использую свойство текста text-align:justify , но в этом диве пока оставил. Не могу для себя решить будет текст нормально смотреться без justify или нет. Что скажете?

  17. auditconsult.biz

    Спасибо. Тоже себе позаимствовал. Вот, что получилось http://pro100blogger.blogspot.com/2011/04/linkfeed.html
    Правда, я в своих постах не использую свойство текста text-align:justify , но в этом диве пока оставил. Не могу для себя решить будет текст нормально смотреться без justify или нет. Что скажете?

  18. arc4

     Екатерина, спасибо вам за полезнейшую информацию. На своём блоге http://archivikk.blogspot.com/ я получил недоразумение, а именно блок vajno мостит изображение по всему периметру и углы не скругляет в отличие от других блоков с которыми полный порядок. Пробовал на другом своем блоге, та-же история.
    Заранее признателен за участие.

  19. SEO-Дилетант'ка

    Причина только одна — вы допустили ошибку. Я не знаю, какой именно блок мне нужно было посмотреть, но тот, который я увидела с острыми углами имеет тег

    
    
    			
    		
  20. Verigold

    Подскажите, плиз, как оформить видео в рамку (такую же, как обрамляются фото в шаблоне). Фотографии оформляются автоматом, а вставленные виде всегда «голые» Спасибо!

  21. Юрій Заїка

    У меня получается что цвет фона пропадает совсем, а картинка растягивается(размножается) по всему фону. И углы не скруглены. Убираю строчку с картинкой — углы острые, цвет фона есть.
     Да, и ещё не к теме вопрос — никаким образом у меня не удаляется Attribute!
    Спасибо!

  22. SEO-Дилетант'ка

     Вам стоит внимательней копировать код. За положение изображения и разможение отвечают эти строчки:
    background-position:20px 50%;

    background-repeat:no-repeat;
    Они приведены в самом первом куске кода.
    Углы не скругляются только в браузере Internet Exploer версии ниже 9. поэтому тут никак ничего не сделать. Если вы не видите скругленные углы в других браузерах, значит вы вообще не установили самый первый код, потому что углы прописаны именно в нем.
    По Attribute задавайте вопрос к соответствующей статье, а лучше всего на форуме — ссылка в горизонтальном меню.

  23. Евгений Филимонов

    Спасибо за статью, вставил код в блог — все работает. Хорошая возможность выделять нужное и оттенять значимое.

  24. Tktyf

    Здравствуйте,момогите чайнику у меня совсем не получается ничего.
    я вставила этот код над словом в коде ]]>
    .vajno { background-color:#FFD4A0; background-image: url(«http://lh4.ggpht.com/_G92voTj-yF0/TO0c43ebP4I/AAAAAAAAA7Y/9LgBZ8FG_70/vajno.png»); } .mail { background-color:#E4F6F8; background-image: url(«http://lh3.ggpht.com/_G92voTj-yF0/TO0Yze20zPI/AAAAAAAAA7U/AuB_pacAJy8/mail.png»); } .info { background-color:#FFFFCC; background-image: url(«http://lh5.ggpht.com/_G92voTj-yF0/TO0osHobz7I/AAAAAAAAA7c/UuJQ0vP5k18/info.png»); } .kod { background-color:#E9FFD4; background-image: url(«http://lh3.ggpht.com/_G92voTj-yF0/TO0qiaCAffI/AAAAAAAAA7k/DRmMoObB4ss/kod.png»); }

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

  25. Лунина Оксана

    Супер!
    А как сделать чтобы при наведении окошко с инфо увеличивалась?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *