Красивое оформление заголовка на Blogspot,

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

  На блоге такая фишка смотрится очень эффектно. Если навести курсор на  заголовок сообщения, получим такую красивую подсветку.

 

Цвета можно поменять под свой дизайн.
То, что выделено синим цветом, а именно, значение #00BFFF- отвечает за цвет фона.

КОПИРУЕМ ЭТОТ КОД

h3{

font-family: Times New Roman !important;

font-style:italic !important;

}

.post h3 {

color:#666;

border-left:10px solid #666;

border-right:10px solid #666;

padding:3px 5px 3px  20px;

border-radius:15px;

-moz-border-radius:15px;

box-shadow:0px 0px 13px #666;

-webkit-box-shadow:0px 0px 13px #666;

-moz-box-shadow:0px 0px 13px #666;

}

.post h3:hover {

color: #00BFFF;

border-left:10px solid#75A6CB ;

border-right:10px solid#75A6CB ;

box-shadow:0px 0px 13px#75A6CB;

-webkit-box-shadow:0px 0px 13px #75A6CB;

-moz-box-shadow:0px 0px 13px#75A6CB;

}

blockquote {

background: #4159A6 url() no-repeat right bottom ;

margin: 0 20px;

padding: 20px 70px 20px 20px;

color:#595959;

font: bold 0.9em "comic sans ms", "GEORGIA", Times, serif;

border:1px solid #DCDCDC;

}

blockquote:hover {

background: #4159A6 url() no-repeat right bottom ;

color:#0CADF1;

}

blockquote p {

margin: 0;

padding-top:10px;

}
 
 Если удалить значение italic , тогда шрифт будет прямой, а не курсив.
После всех изменений заходим во вкладку шаблон-изменить HTML.
 Находим  строку  ]]></b:skin> и сразу над ней вставляем скопированный код.

 

КАК НАЙТИ НУЖНУЮ СТРОКУ В ШАБЛОНЕ

Кликаем мышкой в любом месте шаблона и жмём на клавиатуре  CTRL+F

Появится окошко (смотрите скриншот) в это окошко вставляем скопированный участок кода который выделен у нас красным цветом и жмём Enter

таким образом, с помощью клавиш CTRL+F мы находим нужный нам участок кода.

  Жмём ПРОСМОТР, и если  всё нормально, сохраняем, возвращаемся и видим, что все заголовки постов в красивом оформлении.

Зайдите на Блоге в раздел  Онлайн Генератор цвета  и подберите нужный цвет.
Всегда перед тем как что-то менять в шаблоне не забывайте делать резервное копирование!

==========================
Понравилась статья? Поделитесь с друзьями