2012-09-01

Кнопка далее

кнопка далее
Кнопка “Далее” заменяет ссылку на полную запись блога. Это достаточно удобно для читателя, когда на главной странице блога отображены лишь начало поста, отображающие основной смысл всей статьи. Положительно к такой разбивки относятся и поисковики, так как в этом случае уменьшается процент дублированного контента. Называется это явление коротким словом – кат.
Blogger по умолчанию возможность пользоваться катом. Для того, чтобы скрыть длинную запись вам достаточно лишь нажать на значок значок_кат в простом режиме создания записи или добавить тег <!—more—> в режиме html, который разделит вводную и основную часть текста.
.. Напомню, что отображаемый текст ссылки вы можете заменить во вкладке “Дизайн” (если захотите, чтобы ваша ссылка Далее превратилась в “вся статья целиком”, “читать полностью”…), измените элемент страницы “Сообщение блога” и пропишите желаемый текст ссылки в графе “Текст ссылки на Страницу сообщения”:
изменить_сообщение_блога
ссылка_далее
Теперь рассмотрим, как заменить ссылку “далее” (“читать далее”, “more”, read more” и т.п.) на кнопку Далее.
1.Админка  Blogger  >  Дизайн  >  Изменить HTML .
2. Теперь активируйте  “Расширить шаблон виджета .
3. Теперь найдите   код  ]]></b:skin> , нажав Ctrl + F.
4. Сейчас как раз перед этим кодом, вставьте следующий код.
.jump-link { background:url(http://4.bp.blogspot.com/_b8IA1ajBJG8/TEEJ26RR5aI/AAAAAAAABa8/1v7GqXMF2GE/continue.png) no-repeat scroll 0 0 transparent;  height:32px;  left:1px;  margin-bottom:-11px;  margin-top:18px;  padding-top:4px;  position:relative;  width:100px;  float:right;  }  .jump-link a {  color:#FFFFFF;  font-size:11px;  margin-bottom:10px;  padding-left:18px;  text-shadow:1px 1px 0 #B56F2B;  font-weight:normal;  }  .jump-link a:hover {  text-decoration:underline;  }
Просмотрите блог после изменений, если у вас получилась кнопка Далее такого вида кнопка_далее, то все сделано правильно, и вы можете сохранять шаблон.
Эта кнопка может не подходить под дизайн вашего блога. В этом случае, вы можете подобрать понравившуюся кнопку здесь или нарисовать простую кнопку в любом редакторе. Далее берем ссылку на изображение  и заменяем код, выделенный желтым. Еще одно изменение, которое вы должны будете обязательно провести, чтобы кнопка отображалась корректно – это проставить значение ширины кнопки в пикселях (выделено оранжевым). Цвет ссылки на кнопке выделен зеленым, его вы тоже можете изменить, выравнивание кнопки – float (right – справа, left – слева), font-size – размер текста ссылки, padding-left – отступ ссылки от левого края кнопки и другие настройки. Спрашивайте, если нужно будет подстроить кнопку под ваш дизайн.

25 комментариев :

Ирина Кудрявцева комментирует...

У меня ничего не отображается... http://diva106.blogspot.com/

Mycrib комментирует...

Ирина, так у вас записи не под катом - они целиком выведены на главной. Вначале записи нужно отредактировать, а потом уже и код шаблона редактировать. Почитайте внимательно начало статьи - там подробно описано все, если непонятно, то здесь со скриншотами http://www.mycrib.ru/2010/07/blog-post_3057.html

Евгений Бикмаев комментирует...

У меня не получается. Весь код тупо появляется в виде текста сверху блога.

Евгений Бикмаев комментирует...

Спасибо! Всё получилось!
Мне непонятен Шаг 3. Не получается, пришлось искать код прокруткой. Почему?

Евгений Бикмаев комментирует...

Зато у меня сместился другой гаджет
http://mirglazamicheloveka.blogspot.com/

Mycrib комментирует...

Евгений, запишу видеоурок, только это уже не сегодня ;)
Скорее завтра, о нем вы узнаете из комментариев к этой статье.

Mycrib комментирует...

Евгений, у вас может не работать поиск по странице (шаг 3) из-за браузера. В некоторых браузерах админка blogger работает некорректно. Лучше всего менять код в Google Chrome или специальных редакторах (notepad или тот же блокнот).

Видеоурок готов. Он здесь http://photoforum.do.am/forum/33-203-1
Надеюсь, что теперь все получится.

Romchik911 комментирует...

У меня на блоге установлен виджет linkwithin, при установке даной кнопочки, все работает, но виджет linkwithin улетает в сторону.

Анонимный комментирует...

http://s020.radikal.ru/i706/1212/84/d475ed7c68e8.jpg
Подскажите как это вылечить? Я имею ввиду как поднять кнопочку немного выше?
Спасибо!

Mycrib комментирует...

Попробуйте изменить значение margin-top, задав для него отрицательное значение. Пример: margin-top: -20px;
Значение пикселей подберите самостоятельно.

Артём комментирует...

Спасибо за пост, только цифры менял полностью)
Но всё же основная информация была взята от сюда.
Очень помог ваш пост.

Анонимный комментирует...

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

заранее благодарю)

Анонимный комментирует...

Помогите! Не могу найти кнопку " РАСШИРИТЬ ШАБЛОН ВИДЖЕТА" ! Что делать?

Mycrib комментирует...

Теперь не нужно искать "расширить шаблон виджета", в блоггере этот пункт с некоторых времен отсутствует. Редактируйте без этого.

Сергунькина комментирует...

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

Mycrib комментирует...

Сергунькина, посмотрите первый и второй скриншот этого сообщения и попробуйте добавить текст "читать дальше" через адсинку, как покаано у меня.

Т.е. во вкладке "Дизайн" нажмите на ссылку "Изменить" сообщения блога и в нужном пункте пропишите текст.

Если это не поможет, то откликнитесь в комментарии к этой статье, будем работать с кодами.

Света комментирует...

Спасибо, я уже это все пробовала, но не помогает. Думаю, что надо в коде прописывать, но те коды, что я вставляла, не работают у меня почему-то.

Mycrib комментирует...

Света, в редакторе html шаблона найдите отрезок кода:

<div class='post-body entry-content'>

Вы увидите код в шаблоне:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Вставьте сразу после него отрезок кода:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>


Точно получится!
Если не удасться сделать самостоятельно вышлите мне копию шаблона через обратную связь, внесу сама необходимые изменения.

Света комментирует...

Наташа, спасибо большое! Вы - просто фея! У меня все получилось. я так рада)) Спасибо!

Mycrib комментирует...

Рада была вам помочь. Спасибо за отзыв ;)

Адам Толочик комментирует...

а вмене сомусь взагалі не находить кода... ]]> чому так...і -сторінки ідуть так 1425 -1620 -1621 -1622 -1820

Mycrib комментирует...

Адам, если я вас правильно поняла - вы не можете найти код ]]></b:skin>.
Этот код есть абсолютно во всех блогах на площадке blogspot. Если вы не можете его найти, то воспользуйтесь notepad+ (бесплатная программа для редактирования кода).

роман алипов комментирует...

А КАК СДЕЛАТЬ КНОПКУ СРАЗУ ПОД ТЕКСТОМ?

Иванова Наталья комментирует...

Роман, измените значение margin-top равное 0 в четвертом пункте.
У вас получиться код:

.jump-link { background:url(http://4.bp.blogspot.com/_b8IA1ajBJG8/TEEJ26RR5aI/AAAAAAAABa8/1v7GqXMF2GE/continue.png) no-repeat scroll 0 0 transparent; height:32px; left:1px; margin-bottom:-11px; margin-top:0; padding-top:4px; position:relative; width:100px; float:right; } .jump-link a { color:#FFFFFF; font-size:11px; margin-bottom:10px; padding-left:18px; text-shadow:1px 1px 0 #B56F2B; font-weight:normal; } .jump-link a:hover { text-decoration:underline; }

роман алипов комментирует...

width:100px не так нужно width:121px, я скачал изображение оно 121 пиксель в ширину

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности