Красивое оформление заголовка поста

Как расположить название сообщения по центру и красиво оформить заголовок поста на #Blogspot и выделить его.Безликий,по умолчанию, заголовок поста блога наводит скуку и уныние.Избавиться от этого недоразумения можно при помощи CSS добавив немного креатива и стиля своим страницам блога.В результате получится красиво оформленная страница визуально выбивающаяся из стандартного ряда,но тем не менее которая будет выглядеть намного ярче и профессиональнее.

Манипуляции с внедрением кода на сей раз будут несколько более трудоёмкие и утомительными чем в пред идущий раз при установке контейнера для красивого оформления и выделения текста.

#v-g88 {
margin: auto;
width: 95%;
padding: 2px;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}#v-g88 h2{
color: #e8f3f9;   /* цвет текста заголовка */
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0px -18px 0px -18px;
padding: 1px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #5f5; /*  цвет фона для заголовка */
position: relative;
}#v-g88 h2:before {
content: '';
position: absolute;
bottom: -10px;
left: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}#v-g88 h2:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;}

Если код CSS для придания стильного вида нашему заголовку можно будет просто скопировать и внести в шаблон блога перед закрывающим тегом ]]></b:skin>,то дальше придётся залезть в шаблон ещё дальше и найти такую строку в шаблоне.В стандартном варианте она должна будет закрыта и для того что бы открыть её нужно будет нажать на чёрный треугольник

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

<a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h1 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h1>
</b:if>

Вот именно ему надо присвоить значения,задаваемые стилями,вставленными ранее.Для этого просто заключим весь код в див такого вида <div id="v-g88">.........</div>.В результате весь найденный ранее код должен быть такого вида.

<div id='v-g88'>     <a expr:name='data:post.id'/>     <b:if cond='data:post.title'>       <h1 class='post-title entry-title' itemprop='name'>       <b:if cond='data:post.link'>         <a expr:href='data:post.link'><data:post.title/></a>       <b:else/>         <b:if cond='data:post.url'>           <b:if cond='data:blog.url != data:post.url'>             <a expr:href='data:post.url'><data:post.title/></a>           <b:else/>             <data:post.title/>           </b:if>         <b:else/>           <data:post.title/>         </b:if>       </b:if>       </h1> </b:if></div>

Смотреть ещё Слайдер- ротатор для блогаРотатор для баннеровЭффекты для фото на CSS.Как добавить форум на блогОформление блоков для кода

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