Кнопка Читать далее при наведение курсора меняет цвет

Кнопка Читать Далее для blogger

Внимание данный скрипт не работает в виджетом LinkWithin

Жанна давно попросила поделиться скриптом кнопки Читать далее, все это время я пыталась найти нечто особое, но в русском блоггерстве, одни и те же лица, а нужной информации нет, в смысле той что нужна была именно мне,ее просто не нашла  Жанна просила поделиться скриптом, что бы при наведении курсора кнопка меняла цвет.

Поэтому  пришлось опять бежать к зарубежным  вебмастерам и искать у них интересующие меня скрипты.

И я их таки нашла, но для начала расскажу, зачем делить текст тегом Read More.

Во-первых,  на главной странице куда больше может разместиться статей, при этом занимая куда меньше места

Во вторых происходит намного быстрее загрузка главной страницы ( вспомните себя как немного раздражает когда ждешь пока загрузиться та или иная страницы, а мы в этом вопросе все похожи)

В третьих  интрига, если первые строчки покажутся интересными, читатели нажмут почитать  дальше, а значит подольше задержаться у вас на блоге.

Ну, все с плюсами вроде разобралась. Теперь нам нужно привлечь к  нашим сообщениям вниманием, красивой и  "вызывающей" кнопкой, так что бы читатель захотелось жмякнуть нажать на  кнопочку и почитать дальше ваш пост или сообщение (кому как нравиться)

Как всегда все изменения нужно производить в HTML коде шаблона поэтому  заходим

Настройки-Шаблон- Изменить HTML

Нажав волшебные кнопочки Ctrl+F находим
]]>

И перед ним вставляем этот код 

.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;
}

 Кнопочка будет иметь такой вид 

кнопка до наведения курсора

а при наведении на нее курсора станет она такая

кнопка при наведении курсора

А теперь небольшая Акция для моих читателей, и всех тех кто оставит к данному посту комментарии с пожеланиями.

 Я понимаю что данный цвет подойдет не ко всем блогам по цветовому дизайну.
Поэтому оставляя комментарии в данном посту напишите ваши пожелания на цветовые решения данной кнопки. После чего учитывая ваши пожелания, подберу цветовую гамму для вашей кнопочки, свяжусь с вами и вышлю скрипт.

Пока писала верхние предложения, пришла гениальная идея, расписать более детально данный скрипт, что бы любители докапываться самостоятельно могли сами подобрать цветовые решение, если вдруг кому то будет интересна и такая идея пишите в комментариях.

Ах да, данная кнопочка будет стоять с правой стороны смотреться будет так

вид кнопки с права