19.04.2016

Оформение текста Blogger

Вас приветствуют  Полезности и их автор! Сегодня Полезности расскажут, как сделать красиво и необычно оформление текста статьи. Воспользуйтесь советом и ваш блог станет неповторим! Потому как далеко не все блоггеры сумеют сделать оформление текста столь привлекательным и информативным. Предлагаемое оформление текста поможет выделить и сделать акцент на главные мысли статьи. Оформление текста красиво оттенит разделы и сделает статью более легкой для восприятия. Да и вообще, эстетически оформленный текст всегда более привлекателен и более запоминаем.
      Итак, наполним наши статьи оформленным текстом.

Как это сделать?
      Посмотрим пример красиво оформленного текста статьи
http://www.vseoblog.com/2012/07/blogger-kak-prodvinuti-blog-praktika.html
      Предварительно найдем небольшие ( размер моих 32 на 28 ) привлекательные картинки-иконки ( 3 штуки). Назовем эти картинки какими либо именами.
Название картинок у автора Полезностей
poleznosti-blogger-101
poleznosti-blogger-102
poleznosti-blogger-103
      Загрузим картинки на блог, скопируем ссылки на них и запомним эти ссылки.
Ссылки на картинки у автора Полезностей
Цвета вставок у автора Полезностей
#AACBAA - светло зеленый
#E2CBE2 - светло фиолетовый
#E2E2AA - светло песочный
      Далее приступим к наиболее сложной и тонкой работе. Делаем очень внимательно!
      Заходим в меню, выбираем Шаблон, нажимаем Изменить шаблон и приступаем к делу. Прежде чем менять шаблон очень даже неплохо сохранить старый шаблон! Визуально или с помощью поиска браузера (CTRL+F) находим строку стиля дизайна
]]></b:skin>
      ДО этой строки в шаблон вставляем наши три сделанных шаблона с выбранным цветом вставки и полученными ссылками. 
      У автора Полезностей это выглядит так:
.poleznosti-blogger-101, .poleznosti-blogger-102, .poleznosti-blogger-103
{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;}
.poleznosti-blogger-101
{background-color:#AACBAA;
background-image: url("http://3.bp.blogspot.com/-_DbfVzorCfU/T_UjqKM78MI/AAAAAAAAAnw/OFf8vRaPA9E/s1600/poleznosti-blogger-101.png");}
.poleznosti-blogger-102
{background-color:#E2CBE2;
background-image: url("http://1.bp.blogspot.com/-DKlqjT8USoc/T_UjwqTvDgI/AAAAAAAAAn4/NZePVPD38hY/s1600/poleznosti-blogger-102.png");}
.poleznosti-blogger-103
{ background-color:#E2E2AA;
background-image: url("http://3.bp.blogspot.com/-zlvcE23ZJmg/T_Uj4day11I/AAAAAAAAAoA/wL7RuqXJpSw/s1600/poleznosti-blogger-103.png");}
      Красным цветом выделены названия картинок. Зеленым цветом выделены цвета фонов вставок. Желтым цветом выделены ссылки на картинки.
      Сохраняем шаблон.
      Теперь можно оформлять текст красиво с помощью заготовленных вставок.
      Со временем можно поменять, убрать, пополнить количество вставок, их цвет, картинки. Это уже дело вас самих.
      Как же работать и использовать вставки для оформления текста?
      Пишем статью полностью. Заходим в HTML. Находим место, где мы хотим разместить нашу вставку и вставляем в коды перед началом выделяемого текста
<div class="poleznosti-blogger-103">выделяемый текст</div>
      Автор Полезностей делает еще проще. Я не выделяю текст, а просто вручную вписываю нужную мне фразу и все.
      Вот собственно говоря и все премудрости. Творите!
      Еще пара замечаний. 
1) Красивое оформление текста не видно в черновике. Не бойтесь, оно появится уже при просмотре.
2) Если выкинуть из кодов ссылки на картинки, то получим просто цветные вставки, что тоже довольно интересно.
      Вам красиво оформленных текстов!
      А автору Полезностей комменты и лайки по соц сетям, если она того заслужила.

       За Счастье пусть пьют Дураки! Мы выпьем за Чудеса      
  Присоединяйтесь ко мне в Блог  и Видеоканал      
  Понравилась  статья? - Жмите на кнопочки и пишите комментарии  
   

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

  1. Светлана, спасибо большое за ценную информацию,попробую,давно хотела так сделать!

    ОтветитьУдалить
  2. Оригинальное оформение текста Blogger! Спасибо Светлана за Полезности...

    ОтветитьУдалить
  3. Светлана, родная, хорошая, спасибо большое.

    ОтветитьУдалить
  4. Светлана, большое спасибо за такую интересную и полезную информацию!!!

    ОтветитьУдалить
  5. Светлана, спасибо за Полезности!

    ОтветитьУдалить
  6. Светлана, спасибо! Как всегда оригинально , красиво и профессионально.

    ОтветитьУдалить
  7. Слишком сложно... Тут бы текст своевременно написать да фото отредактировать...

    ОтветитьУдалить
  8. Спасибо за очередную полезность,Светлана!

    ОтветитьУдалить
  9. Спасибо, Светлана! Мне пригодилось.

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