Кнопочки - переходы "СМОТРИТЕ ДАЛЕЕ" для статей и постов.

Мои кнопочки - переходы "СМОТРИТЕ ДАЛЕЕ" для статей и постов.
Чтобы взять код, кликайте на кнопочку.

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

Красивое оформление заголовка на 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 мы находим нужный нам участок кода.

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

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

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

Меняем ссылку читать далее на кнопку.

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

Далее заходим во вкладку ШАБЛОН - ИЗМЕНИТЬ HTML

 

    ( не забываем делать резервную копию)

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

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

<b:if cond='data:post.hasJumpLink'>

<DIV class='jump-link'>
<A expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></A>
</DIV>
</b:if>

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

<img border="0" src="здесь ссылка на картинку" />

В итоге код будет выглядеть вот таким образом

<b:if cond='data:post.hasJumpLink'>
<DIV class='jump-link'>
<A expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img border="0" src="https://img-fotki.yandex.ru/get/17859/137293384.d3/0_1220bd_8a0811f0_orig.png" /></A>
</DIV>
</b:if>

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

МОГУ ПРЕДЛОЖИТЬ СВОИ КНОПКИ - СДЕЛАЛА В ФШ.

Кнопки кликабельные, размер и адрес кнопки можно взять на Яндекс фотках.

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