Пообещал, что до 26 ноября заметка будет опубликована, поэтому выполняю просьбу.
Кроме
того, я предложу вам два варианта: первый – это уже готовый скрипт,
который понадобится только лишь добавить в HTML-код шаблона, а второй
вариант гораздо интересней – это конструктор кнопок. То есть, вы сможете
самостоятельно создать такую кнопку, которая вам нравится и подходит
под цветовое оформление вашего блога.
Весь процесс постараюсь объяснить максимально подробно, а, возможно, завтра добавлю видеоурок. Итак, начинаем!
Кнопка «Читать далее» – готовый код
Первый вариант кнопки «Читать дальше» или «Подробнее» – это то, что можно увидеть у меня на блоге. Текст вы можете изменить на свое усмотрение, например, у меня на кнопке всего одно слово – «Дальше».
Ниже код для нее:
.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»;
- В появившуюся строку поиска вставьте такой фрагмент: ]]></b:skin> и нажмите «Enter»;
- Теперь скопируйте код кнопки, который я вам дал ваше, и вставьте его над найденным фрагментом;
- Сохраните шаблон.
Ниже скриншот – сравните правильность своих действий:
А теперь переходим к самому интересному варианту.
Как самостоятельно сделать кнопку «Читать дальше»
Для того чтобы создать своими руками кнопку «Подробнее» или «Далее», нужно будет сначала перейти на сайт http://dabuttonfactory.com. Интерфейс англоязычный, но разобраться несложно. Посмотрите скриншот ниже с моим вариантом:
Настраивайте кнопку так, как вам нравится и сохраняйте на компьютер.
Как добавить кнопку «Читать дальше» на сайт
Итак, остался последний шаг – установка кнопки на блог. Процесс разделю на несколько этапов:
- Прежде всего необходимо загрузить изображение кнопки, которое вы сохранили на компьютер, на ваш блог. Для этого создайте любое сообщение (можно даже без названия) и добавьте в него картинку (кнопка «Вставить изображение» на Панели редактора сообщений). Кликните по картинке правой кнопкой мышки и в контекстном меню выберите пункт «Копировать URL картинки» (в зависимости от браузера, возможно, будет такой пункт «Копировать адрес ссылки»).
- Сохраните ссылку в любом текстовом документе, например, в обычном «Блокноте»; Ссылка на изображение имеет следующий вид: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw-xhmG0cLkqCILT1KkO8A4WO9fZ3H3d3QZjT4wzoCel4rD99kBGrEExGgdLvw-ibu5uJg0rjfLsEgNmJst0jCMH_NiaAkgbEhy4CmaHnyoxq7z6B_aqP_GGhQMhHrI0SET0dx6ZRHSTXq/h116/button.png (это для моей кнопки);
- Теперь в этот же текстовый документ вставьте этот код: <img src="http://ссылка на картинку" alt="Читать далее" title="Читать статью полностью"/>. Красным цветом я выделил то, что нужно изменить – вставить вместо этой надписи ссылку на изображение своей кнопки;
- Открываем HTML-код шаблона и вызываем строку поиска (выше уже писал как это сделать). Вставляем в нее следующий фрагмент кода: <data:post.jumpText/>, а затем жмем «Enter»;
- Найденную строку удаляем, а вместо нее вставляем готовый код со ссылкой на картинку;
- Немного выше находится еще один фрагмент кода: <div class='jump-link'>, который нужно заменить на <div class='jump-link' style='text-align:right;' >.
- Нажмите «Сохранить шаблон»
Теперь посмотрите на скришот, как все сделал я:
Как видите, ничего сложного – весь процесс занял не более двух минут.
Комментариев нет:
Отправить комментарий