пятница, 22 февраля 2013 г.

Разноцветная кнопка читать далее на blogger

Несмотря на то, что я убрал на своем блоге функцию "Читать далее" ( внешняя ссылка), в этом посте для тех, кто решил размещать на главной странице блога только анонсы, я предлагаю создать интересную фишку: сделать так, что бы при наведении курсора на кнопку, она меняла цвет.
Расскажу я про нее только тем, кто приобретет вытяжки плоские 50 см на сайте "Евромойка", так как без вытяжки, кнопка на вашем блоге не будет менять цвет. Шутка...
Итак , пред вашими очами код:

.jump-link a {
    border-top: 1px solid #7171a3;
    background:#0069d1;
    background: -webkit-gradient(linear,right top,right bottom, from(#a3cdf7), to(#0069d1));
    background: -webkit-linear-gradient(top,#a3cdf7, #0069d1);
    background: -moz-linear-gradient(top, #a3cdf7,#0069d1);
    background: -ms-linear-gradient(top, #a3cdf7, #0069d1);
    background: -o-linear-gradient(top, #a3cdf7, #0069d1);
    padding: 9px 45px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: #ffffff;
    font-size: 12px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: middle;
    }
 .jump-link a:hover {
    border-top-color: #b0a1f3;
    background: #b0a1f3;
    color: #ffffff;
    }
 .jump-link a:active {
    border-top-color: #0099ff;
    background: #0099ff;
    }
.jump-link {
float:right;
}
Теперь решим, куда его поставить. Для совершения этой операции ( вы приобрели уже плоскую вытяжку?!), нужно взять этот  код подмышку и отнести его в настройки шаблона блога.

Настройки-Шаблон- Изменить HTML
  Не забывая установить галочку  на расширения шаблона и нажав волшебные кнопочки Ctrl+F находим уютное местечко.

 И перед ним устанавливаем принесенный подмышкой хранящийся в буфере обмена вышеуказанный код.
 На этом операция будет завершеня. Если вы не забудете нажать внизу страницы "Сохранить", разумеется.
О цвете кнопки, надеюсь позаботитесь сами, сделав редактирование в части
"color". 

В коде - цвет кнопки - голубой.

Понравился блог - подпишись на обновления!

Введите Ваш emai-адрес:

Популярные сообщения

Related Posts Plugin for WordPress, Blogger...