Google+ Followers

Будь в курсе событий!

21.02.2013

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

Leave a Comment
Кнопка Читать Далее для 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;
}


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

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


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

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

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

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


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




Система Orphus

0 коммент. :

© 2012-2017 Cash's from program