Кнопка Читать Далее для blogger
Внимание данный скрипт не работает в виджетом LinkWithin

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

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

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


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

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

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

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

Как всегда все изменения нужно производить в HTML коде шаблона поэтому  заходим
Настройки-Шаблон- Изменить HTML
Нажав волшебные кнопочки Ctrl+F находим
]]></b:skin>
И перед ним вставляем этот код 

.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

28 коммент.:

  1. Аннечка, спасибо, дорогая, что нашла красивую кнопочку "Дальше"; А если ты и цвет можешь подобрать нужный, так это вообще супер; Поработай еще немного волшебницей:)) Аннечка , мой блог в зеленом цвете...Могу я сделать зеленую кнопку? Благодарю заранее:))

    ОтветитьУдалить
  2. Попробовала эту кнопочку - работает здорово:)) Если можно, то буду ждать зелененькую:))

    ОтветитьУдалить
    Ответы
    1. Жанна уже работаю над этим) Малышня не дает особо развернуться, завтра будет готова)

      Удалить
  3. Анечка, спасибо! Цвет ты подобрала для меня замечательный! Все очень красиво! Но, у меня возникла проблема с виджетом LinkWithin... все предлагаемые для просмотра посты сместились вправо также , а кнопок "Дальше" стало -две. Одна - в центре, а другая под виджетом LinkWithin. Что я сделала неправильно? Без виджета LinkWithin- все превосходно. я пробовала на другом своем блоге. Получается, что эти виджеты не работают в согласии друг с другом? Или это моя ошибка?

    ОтветитьУдалить
    Ответы
    1. Скорей всего не работают друг с другом, и вряд ли это ваша ошибка. На моем тест блоге не было LinkWithin, поэтому о данной проблеме я не знала... попробую что то придумать.

      Удалить
    2. Проверила, да действительно вместе не работают((

      Удалить
  4. Жанна,а голубая кнопочка работает с виджетом LinkWithin?

    ОтветитьУдалить
  5. Отчитываюсь...У меня на фотоблоге виджест встал отлично! Спасибо,Аня!
    А,вот,на Провансе не становится,выдает вот такую пустую страницу вместо блога с надписью: "Plusieurs gadgets ont pour ID : HTML10. Les ID de gadget doivent être uniques.

    Error 500"
    У меня в Провансе есть LinkWithin...возможно поэтому? А,я ужО размечталась...:(

    ОтветитьУдалить
    Ответы
    1. Да Алла это явный конфликт ищу как решить проблему что бы и волки сыты и овцы целы были))

      Удалить
  6. У меня на втором блоге нет LinkWithin и кнопка работает превосходно! Красота....А вот с LinkWithin - кнопка заработала, но все сместилось вправо и цвет виджета LinkWithin также изменился- все картинки получили цветную рамку. Я верю, что Аннушка решит проблему:)) Девочка она умная и находчивая:))Будем ждать:)) Спасибо, Анюта

    ОтветитьУдалить
  7. Аня,я была подписана на комментарии на это пост,поэтому получаю до сих пор комментарии к этому пост...И,вот,поя вился у меня на фотоблоге "Анонимный",с предложениями посетить его блог...Пишет на английском,смотрю и тебе пишет тоже самое,думаю-это спам...

    Проверь свою папку со спамом и удали его нафик...

    ОтветитьУдалить
  8. Очень хорошая кнопочка, но у меня в блоге бело-серое оформление. Можно мне такую беленькую кнопочку?)

    ОтветитьУдалить
    Ответы
    1. Даша, конечно можно приступила к работе:)

      Удалить
    2. Даша, хотела найти ваш блог, но не смогла:(. Дайте его адрес пожалуйста, что бы я подобрала оптимальные цвета.

      Удалить
    3. http://kondrashovadasha.blogspot.ru/ вот)

      Удалить
    4. Здравствуйте! Анна, вы сделали мне кнопку для блога?

      Удалить
    5. Уже давно она сдесь http://studying-blogin.blogspot.com/2013/04/kak-naiti-tag-v-novom-HTML-blogpost.html в конце поста). Если цвета не подайдут, могу еще поиграться.

      Удалить
  9. Анна, большое спасибо за кнопочку, и цвет подходит , и так здорово получилось, легко и просто. Спасибо.

    ОтветитьУдалить
  10. Спасибо!Очень полезные советы!Успеха и удачи!

    ОтветитьУдалить
  11. Аня,не получается вышла на - Изменить HTML, где ставить галочку на расширение?

    ОтветитьУдалить
    Ответы
    1. cwetoshek271160 сейчас уже не нужно расширять шаблон http://studying-blogin.blogspot.com/2013/04/kak-naiti-tag-v-novom-HTML-blogpost.html этот пост поможет вам

      Удалить
  12. Ура! Получилось! Спасибо! http://cwetoshek271160.blogspot.ru/ Просьба поменять кнопки на розовый цвет.И на втором блоге адрес http://ctranaschkolaria.blogspot.ru/ тоже.Благодарю1!!

    ОтветитьУдалить
  13. Этот комментарий был удален автором.

    ОтветитьУдалить
  14. Здравствуйте! Кнопку установил но есть проблема. На самой картинки не отображается текст далее что делать?

    ОтветитьУдалить
  15. Кто может помочь изменить текст "более" на "Читать далее" обыскал уже все не знаю где еще. Мой сайт http://www.family-site.com.ua/

    ОтветитьУдалить

Есть вопросы? Или просто хочется поговорить? Оставляйте комментарии