Сделать отступ для абзаца Blogger.

Для установления отступа для абзаца на платформе Blogger, то есть оформления красной строки, лучше всего применить стилевой атрибут text-indent. В шаблоне блога находим фрагмент приблизительно такого кода:
.post-body {
  font-size: 102%;
  line-height: 1.5;
  position: relative;
  }
заменяем его на
.post-body {
  font-size: 102%;
  line-height: 1.5;
  position: relative;
  text-indent: 30px;
  }
,где text-indent: 30px; определяет отступ первой строки в пикселях. Цифровое значение указывается любым (на ваше усмотрение).

Вы можете корректировать присутствие отступа абзаца при редактировании сообщения, с помощью обрамления текста тегом <div> или <p>. Выделите абзац и нажмите на значок выравнивания.
Управление отступом абзаца Blogger. Значок Выравнивание.
Управление отступом абзаца Blogger. Значок Выравнивание.
Или удалите запись <div style="text-align: left;"> и </div>, применив вкладку "Изменить HTML").
Отступ абзаца в сообщении. Вкладка Изменить HTML.
Отступ абзаца в сообщении. Вкладка "Изменить HTML".

Изменить стиль шрифта только в теле сообщения.

Добавив в данный фрагмент кода строки 
  1. font-family:"Courier New",Courier,monospace;
  2. padding-bottom:1.5em;
  3. font-style:italic;
  4. color:#FFFFFF;
мы можем изменить шрифт, размер, стиль и цвет  шрифта только в теле сообщения соответственно. Сделав это в стилях css, наш код страницы не будет раздуваться до огромных размеров, что плодотворно скажется на загрузке страницы.
в f t
наверх ↑

41 комментарий:

Elchin Vahid
Пусть у Вас Всё Будет Хорошо.
NMitra
Благодарю. У вас тоже.
Elchin Vahid
Спасибо.
Алексей
Почемуто отступ только для первого абзаца на странице получается. В чем проблема?
Спасибо за блог)
NMitra
Нужно выравнивать каждый абзац:

<div style="text-align: left;"> абзац </div>
<div style="text-align: left;"> абзац </div>
...
<div style="text-align: left;"> абзац </div>
❀ Оля ❀
не совсем понятно как "Изменить стиль шрифта только в теле сообщения."
строчка font-family встречается в шаблоне 1 раз, после : стоит другое и п. 2,3,4 просто нет. я бы хотела изменить шрифт на Arial и цвет #45818e, чтобы эти параметры были по умолчанию
NMitra
.post-body {
font-family: arial, verdana, sans-serif;
color:#45818e;
}
Death Booker
Спасибо за статью, блог приобрел читабельный вид
NMitra
Я настолько привыкла к отступам в абзацах, читая книги, что и здесь почти сразу постаралась внедрить их. А потом увидела, что так редко кто делает. Ни о чём не жалею, поскольку восприятие информации улучшилось.
Спутник
Лучший блог о Blogger.
Yurij Shinkarev
В коде не присутствует строчка post-body
NMitra
Какой блог? Адрес нужен.
Nonna
По поводу отступа для абзаца. Если заменяю фрагмент, то получаю Invalid variable declaration in page skin: Variable is used but not defined. Input: post.background.color.А если в сообщении перехожу в HTML, то вместо text align: left у меня везде стоит text align:justify, но все прижато влево.
NMitra
Нужно переработать статью. Лучше так или в процентах

.post-body p {
text-indent: 2em;
}

Тогда для каждого тега p в теле статьи будет применён text-indent
Nonna
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative; добавила text-indent: 2em;
}опять выдано:Invalid variable declaration in page skin: Variable is used but not defined. Input: post.background.color
NMitra
Какой у вас адрес блога?
Nonna
Здравствуйте. Была в отъезде. Еще раз спасибо за Вашу помощь! Добро пожаловать в гости – nonna.by. Вопросы: 1. Можно ли закруглить края общего белого фона также, как закруглены и «затонированы» края гаджетов и сообщений? 2. Шапка прижата влево, можно ли в правый пустой белый угол выставить картинку? http://shpargalkablog.ru/2010/07/kartinku-v-zagolovok-bloga.html?showComment=1424974787798#c8391871223970914597 – тут мой вопрос , а таким способом не разобралась - http://shpargalkablog.ru/2011/04/css-nalozhenie.html 3. Можно ли для ката («дальше») использовать разные слова для разных сообщений? 4. Текст сообщений систематически «играет» сам по себе – то появляются пробелы, то текст превращается в простыню – почему? И как выставить красную строку, можно ли ее связать с пробелом ? 5. Можно ли ввести в список новый шрифт? Заранее благодарю.
NMitra
Здравствуйте, на все вопросы нет возможности ответить. Готова ответить только на один. За поиском решений на остальные обратитесь, пожалуйста, на https://groups.google.com/forum/#!forum/blogoask . Надеюсь на понимание.

1) Между </head> и <body class='loading'> не должно быть других тегов
2) src=http://tests.newacropol.ru/pearls/informer.php?bgcolor=#ecdbf6&fontcolor=450a6c взять в кавычки src="http://tests.newacropol.ru/pearls/informer.php?bgcolor=#ecdbf6&fontcolor=450a6c"
3) Это не должно быть в body, так же как и тег link

<meta content='Nonna&#39;s Design' itemprop='name'>Nonna's Design>/<meta>.
<meta content='Искусство, авторская бижутерия, ручная работа. Все в единственном экземпляре.' itemprop='description'>World of art,creative design and handmade.Искусство,рукоделие,авторская эксклюзивная бижутерия</meta>
<МЕТА CONTENT='Студия Nonna&#39;s Design-эксклюзивные произведения искусства,авторская бижутерия,ручная работа' NAME='description'></МЕТА>META> <МЕТА NAME='keywords' СОNТЕNТ='Бижутерия, Украшение, Картина, Сувенир, Дизайн, Handmade, Своими руками, Мастер класс,Искусство, Стиль, Мода, Jewelry, For Her, For Him, Exclusive, Style, Beauty,On of a kind'></МЕТА>META> <МЕТА NAME='abstract' СОNTENT='Мы создаем-Бижутерию, Украшения, Сувениры, Стиль, Jewelry, For Her, For Him, Exclusive, Stylish, Beautiful,On of a kind'></МЕТА>META> <МЕТА CONTENT='Создание уникальных произведений ручной работы - Handmade, Exclusive, One of a kind' NAME='subject'></МЕТА>META> <МЕТА NAME='Owner' СОNТЕNТ='Nonna Shostko'></МЕТА>META>
</meta>
</meta>
Nonna
Ооо, СПАСИБО! Буду разбираться...На форум вряд ли полезу - фильтровать совсем нет времени..Мне бы разобраться с Вашими ответами )). Еще раз спасибо! А что скажете по блогу в целом? И еще-пробовала найти поломку в шаблоне..но,увы..
Nonna
Ок, про закругленные края, про текст на кате, красную строку и новые шрифты Вы ответить не можете. А что насчет картинки в правый угол? Потому что я так и не поняла - на какой именно из моих вопросов Вы ответили?
1) вообще не разобралась – там google-analytics я не вставляла теги
2) а что должно было измениться с добавлением кавычек? (потому что с кавычками все осталось на месте)
3) взято отсюда – что не так я сделала?
http://www.plekhanoff.ru/2013/01/metategi-ix-znachenie.html
PS а если Вы оказываете некоторую помощь за вознаграждение, как можно узнать Ваши расценки?
NMitra
Интернет-магазин не нужно делать на Blogger. Если у вас коммерческий проект, то нужны все вытекающие: несколько способов оплаты, городской телефон в шапке сайта, коммерческие запросы "купить", привязка к региону, информация о доставке, фактический адрес, фото именно тех камней, что есть в ассортименте, а не картинки из интернета...

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

Работу за вознаграждение в данное время не берусь, отсутствует необходимое время. Когда (если) появится, создам соответствующую страницу с расценками. На форуме выше есть ребята, которые берутся за работу.

1) уберите его ниже
2) пусть так, Мозила ругается
3) с мета-описаниями аккуратней, посмотрите тут http://shpargalkablog.ru/2010/09/optimizatsiya-blogger.html

Я могу сделать всё из озвученного вами, поэтому предложила вам выбрать один из пунктов, который вам более важен.
Nonna
Интернет-магазин можно делать на любом движке, и на Blogger в том числе, чему есть куча успешных примеров. По поводу советов - спасибо, но в данном аспекте они нам не нужны и это не то, что мы делаем. Тем более не для сайта-визитки без привязки к определенному региону. И это не то, о чем я Вас спрашивала. Просто наткнулась на Ваш сайт и решила без ребят самостоятельно подтянуть некоторые технические мелочи. Картинки из интернета - для облегчения понимания статей, за свои камни мы их не выдаем, мы вообще такие камни не продаем. Вот здесь все о нас http://www.nonna.by/p/about-us.html . И мы только начинаем переезжать в интернет. Думаю,что Вы не поняли вопрос - я спросила с технической стороны Ваше мнение о блоге..Это здорово, что Вы можете сделать все озвученное, но если у Вас нет времени, то повторюсь "...про закругленные края, про текст на кате, красную строку и новые шрифты Вы ответить не можете. А что насчет картинки в правый угол?".. И еще раз спасибо.
Nonna
А почему Вы удалили мой комментарий?
NMitra
Ваш комментарий ушёл в папку "спам" - это Blogger сам делает, я к этому руку не прикладывала.

Добавьте как показано тут http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html код

<b:widget id='HTML999' locked='false' type='HTML'/>

Если не можете в шаблон стили прописать, то попробуйте в Дизайнере шаблонов http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html#css

Картинка будет справа.

Сделаете, если не получится, отпишитесь, я посмотрю.
Nonna
:)))))) там, где вопросы - в спам не ушли, а там, где ответы - ушел в спам...однако...кстати, думаю наша "переписка" особой помощи читающим не принесет, как Вы смотрите на то, чтобы ее удалить? Вы вот тут самый последний комментарий не прочитали http://shpargalkablog.ru/2010/07/kartinku-v-zagolovok-bloga.html?showComment=1424974787798#c8391871223970914597
NMitra
Прочитала, но сейчас не вижу гаджета.
Если картинка будет вести тоже на Главную, то фоном можно.
Nonna
а если на другую статичную страницу?
NMitra
Тогда остановимся на гаджете. Добавляйте.
Nonna
гаджет добавила, без названия не сохраняет, прижимает в правый край выше шапки
Nonna
http://shpargalkablog.ru/2010/08/gadzhet-htmljavascript-blogger.html и http://shpargalkablog.ru/2013/12/image-optimization.html все по-написанному - получается ерунда, с гаджетом "картинка" - тоже..
Nonna
методом тыка что-то получилось, но гаджет - выше шапки..((
Nonna
может в этом все дело? b:widget id=(заголовок)' type
b if cond='data:imagePlacement BEHIND
!
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
--> или местоположение можно тут изменить : expr:style background-image: + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; &quot id='header-inner
div class='titlewrapper' style='background: transparent
h1 class='title' style='background: transparent; border-width: 0px
NMitra
Теперь стили добавьте, они отвечают за расположение. top и right установите свои

#header {position: relative;}

#HTML3 {
z-index: 200;
position: absolute;
top: -10px; /* отступ сверху */
right: -20px; /* отступ справа */
}
Nonna
Спасибо! Кажется, получилось..Осталось только ссылку на картинке научить открывать в другом окне))..Можно вот как-то так? (пример из виджета переводчика) -a class="google_translate" href=" target="_blank" rel="nofollow" title="..." onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;" img alt.." border="0" align="absbottom" title=".." height="24" src http://1.bp.blogspot.com/ ....png" style="cursor: pointer;margin-right:8px" width="28"/></a
Nonna
С праздником! Всего самого наилучшего! Мира и благополучия Вам, процветания и стабильности вашему сайту!!! )))
NMitra
И вас, добавьте target='_blank' или window.open ( http://shpargalkablog.ru/2014/10/window-open-javascript.html ) в ссылку (тег a) в код гаджета в шаблоне:

<div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
<a expr:href='data:link' target='_blank'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
</b:if>
<br/>
<b:if cond='data:caption != &quot;&quot;'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
Nonna
не понимаю ((
NMitra
В поле поиска в шаблоне http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html введите

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>

и

<a expr:href='data:link'>

замените на

<a expr:href='data:link' target='_blank'>
Nonna
у меня есть только такая строка a expr:href='data blog.homepageUrl' style='display block'
img expr:alt='data:title' expr:height='data height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a
NMitra
Я уже забыла, что вы вместо гаджета "Картинка" добавили HTML/JavaScript. Редактируйте содержимое гаджета, вместо

<a href="http://www.nonna.by/p/contacts_13.html" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" title="LOGO">
напишите
<a href="http://www.nonna.by/p/contacts_13.html" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" title="LOGO" target="_blank">

Если хотите открыть в новом окне, то добавьте и
<a href="http://www.nonna.by/p/contacts_13.html" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" title="LOGO" onclick="window.open(this.href, '', 'scrollbars=1'); return false;">

См. http://shpargalkablog.ru/2014/10/window-open-javascript.html Там очень подробно написано, с кучей примеров.
Nonna
Спасибо!