Новый вид даты поста и ссылки "Дальше" в Blogger(Blogspot)

логотип Blogger с иконкой календаря и срелкой  Обновляя или изменяя оформление постов блога, нельзя оставлять без внимания вопрос о том, как изменить дизайн даты и ссылки "Дальше" в сообщениях.
  В блогах на платформе Blogger сделать это очень просто, применяя CSS свойства к нужным селекторам, список которых приведен в данной статье с готовыми примерами кода. А также, здесь вы найдете описание, как разместить дату под заголовком сообщения блога.
  Первым делом необходимо настроить формат отображения даты, перейдя на вкладку "Дизайн" в админке. Тут же, в графе: "Текст ссылки на Страницу сообщения" можно изменить и название для ссылки разрыва.
Настройка даты и ссылки разрыва в админке Blogger
Настройка формата даты и ссылки "Дальше"
  Дата. В стандартном шаблоне этот блок имеет такие идентификаторы:
- .date-header или h2.date-header - весь блок;
- .date-header span - блок текста даты. Этот селектор уже записан в шаблоне, свойства для него можно добавить или изменить.
  Для оформления стиля даты код CSS может быть таким:
.date-header {
 display: inline-block;
 background: #ccf;
 text-align: center;
 border: 2px solid #999;
 border-radius: 5px;
 padding: 10px 5px;
 margin: 5px;
 height: auto;
 width: 150px;
}
.date-header span {
 font: normal bold 15px Tahoma;
 color: #000;
 padding: 5px;
}
  Ссылка "Дальше..". не имеет в коде шаблона записанного селектора, но это не мешает добавить его туда самостоятельно. А он этого элемента такой:
- .jump-link - селектор всего блока разрыва;
- .jump-link a - селектор ссылки разрыва сообщения.
  Для этого элемента можно применять такой CSS:
.jump-link {
 text-align: right; /*выравнивание внутренних элементов*/
 height: 100px; /*высота всего блока*/
}
/*Стиль ссылки*/
.jump-link a {
 display: inline-block;
 background: #f9f9f9;
 background: -moz-linear-gradient(top, #f9f9f9 30%, #bcbcbc 100%);
 background: -webkit-linear-gradient(top, #f9f9f9 30%,#bcbcbc 100%);
 background: -o-linear-gradient(top, #f9f9f9 30%,#bcbcbc 100%);
 background: -ms-linear-gradient(top, #f9f9f9 30%,#bcbcbc 100%);
 background: linear-gradient(to bottom, #f9f9f9 30%,#bcbcbc 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#bcbcbc',GradientType=0 );
 border: 1px solid #666;
 border-radius: 3px;
 color: #666;
 text-align: center;
 font: normal normal 14px Arial;
 padding: 5px; /*внутренние отступы*/
 margin: 5px 10px; /*внешние отступы*/
 min-width: 150px;
 height: auto;
 width: auto;
}
/*Стиль ссылки при наведении курсора*/
.jump-link a:hover {
 background: #eaf6ff;
 background: -moz-linear-gradient(top, #eaf6ff 30%, #99d2ff 100%);
 background: -webkit-linear-gradient(top, #eaf6ff 30%,#99d2ff 100%);
 background: -o-linear-gradient(top, #eaf6ff 30%,#99d2ff 100%);
 background: -ms-linear-gradient(top, #eaf6ff 30%,#99d2ff 100%);
 background: linear-gradient(to bottom, #eaf6ff 30%,#99d2ff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaf6ff', endColorstr='#99d2ff',GradientType=0 );
 border: 1px solid #7cbdff;
 color: #000;
}
  Также, вместо цвета или CSS градиента для оформления ссылки "Дальше..." можно использовать изображение - иконку, в любом подходящем формате (.jpeg .png .gif).
  Код CSS в этом случаи будет таким:
.jump-link a {
 display: inline-block;
 background: url(.../image.gif) no-repeat;
 color: transparent; /*цвет шрифта - прозрачный*/
 font: normal normal 0 Arial; /*размер шрифта указываем как "0"*/
 margin: 0 350px;
 width: 128px; /*ширина, значение равное ширине используемой картинки*/
 height: 48px; /*высота, значение равное высоте используемой картинки*/
}
/*Стиль при наведении курсора*/
.jump-link a:hover {
 background: url(.../image-hover.gif) no-repeat;
 width: 128px; /*ширина, значение равное ширине используемой картинки*/
 height: 48px; /*высота, значение равное высоте используемой картинки*/
}
  Чтобы оптимизировать CSS код с применением изображений, рекомендуется использовать спрайты.
Когда мы используем иконку для элемента, нам, чаще всего, нужно избавится от уже ненужного текста. В данном случаи от слова "Дальше". Это можно сделать при помощи CSS, указав необходимые значения для свойств текста, без вмешательства в HTML.
  Для свойства цвета: color, нужно указать transparent - прозрачный,
для шрифта: font размер указать как 0.

Как разместить дату под заголовком поста(сообщения)

Если вы хотите чтобы дата отображалась не над заголовком сообщения, а под ним. То для этого нужно проделать следующие нехитрые манипуляции:
  1) Открываем HTML код шаблона, устанавливаем галочку "Расширить шаблоны виджета" и находим (Ctrl+F) вот такую строку:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
В шаблоне их будет 2 - нам нужна вторая.
Аккуратно вырезаем (Ctrl+X) её и откладываем куда-нибудь на время, но не далеко.
  2) Там же, в шаблоне, снова ищем и находим уже такую строчку:
<b:if cond='data:blog.metaDescription == &quot;&quot;'>
Она будет одна-единственная по-этому не ошибетесь. И сразу перед(выше) этой строкой вставляем первую, отложенную. Должно быть так:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  Нажимаем на "Просмотреть", если все в порядке, сохраняем и радуемся.

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

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

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

    ОтветитьУдалить
    Ответы
    1. Если вы только создали блог на Blogger и хотите сделать дизайн индивидуально, то я вам рекомендовал бы:
      1. Закрыть его от поисковиков, выбрав соответствующие настройки в панели управления, пока делаете дизайн.
      2. Написать пару тестовых сообщений и добавить необходимые гаджеты, на которых вы бы уже видели как отображаются внесенные вами изменения.
      3. Прочесть статью:
      как добавить или задать CSS (стили) в HTML шаблон Blogger
      4. Не боятся пробовать и не забывать сохранять резервную копию шаблона перед внесением изменений.

      На счет фона - это простое, удачно подобранное, изображение, добавить которое можно стандартными ресурсами платформы.

      Удалить
  2. Я так и не поняла, как вставить карту вместо слово "дальше"?

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

    1. Специально для вас дополнил статью, наслаждайтесь :)

      Удалить
    2. Все равно ни чего не получается, вместо фото буквы получаются какие то, прозрачные

      Удалить
    3. Простите, я не доглядел, запишите вот так:
      background:url(http://your_image_100px_X_128px.png) no-repeat;
      - без ковычек. Немного поспешил, уже в статье поправил, теперь будет все работать.

      Удалить
    4. Или я тупая, или вы объясняете не так
      Вот код, не ставится все равно, мне нужно сделать картинку так же, как у той девушки
      .jump-link a {
      display: block;
      position: relative; z-index:10;
      background:url (http://www.pictureshack.ru/images/3763_see.png) no-repeat;
      border: 3px solid LightSteelBlue;
      border-radius: 10px;
      color: transparent
      text-align: center;
      font: italic bold 0% Arial;
      padding: 5px;
      margin: 0 350px; /*отступ от края страницы - укажите нужное значение*/
      height: 30px;
      width: 150px
      }
      .jump-link a:hover {
      background: #FF6A00
      color: #000;
      }

      Удалить
    5. Дорогая Катя, ваша проблема в том что вы просто не знаете что вы делаете.

      Этот код стиля прекрасно работает, но в меру вашей неосведомленности вы не можете подогнать его под себя. А не знаете вы следующего:

      1. Ваша картинку имеет размеры 60px на 250px, а в примере стиля, который вы хотите применить указаны совершенно другие - height: 30px; width: 150px; поэтому вам не видна большая часть вашей картинки (мало того после width: 150px; не хватает точки с запятой).

      2. margin: 0 350px; /*отступ от края страницы - укажите нужное значение*/ - тут же написано - укажите нужное значение, а вы его указали? Ваша картинка уехала влево, а вы и не в курсе, её также стало не видно. И я вам говорил - уберите сноски с кода, когда вставляете в шаблон!

      3. Если у вас прозрачная картинка, то зачем вам рамка? - border: 3px solid LightSteelBlue; border-radius: 10px; - она не нужна.

      4. .jump-link a:hover - это стиль для кнопки(картинки) при наведении на нее курсора. В вашем случаи, она будет меняется с изображения на цвет, оно вам надо?

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

      А код для вас, чтобы было "как у той девушки" будет таким:
      .jump-link a {
      display: block;
      position: relative; z-index:10;
      background: url(http://www.pictureshack.ru/images/3763_see.png) no-repeat;
      color: transparent
      text-align: center;
      font: italic bold 0% Arial;
      padding: 5px;
      margin: 0px;
      height: 60px;
      width: 250px;
      }

      Если вам нужна помощь с дизайном, напишите мне на почту или в скайп - так будет проще.

      Удалить
    6. сниманию шляпу перед вами)

      Удалить
  3. Спасибо вам всё получилось, на вашем блоге очень много дельных статей.

    ОтветитьУдалить
    Ответы
    1. И вам спасибо за приятный отзыв :)

      Удалить
  4. Можете подсказать мне, я что-то сделал сам не знаю что и у меня ни один css не применяется. Наверно меняя что-то в html коде что-то поломал)

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

      Удалить
  5. Здравствуйте! Отличный код для ссылки "Дальше"!!! Тем более, что можно многое настроить. Единственный вопрос, возможно ли добавить отступ после даты? А то у меня текст сообщения идёт следующей строкой после даты, а красивее было бы через одну.

    ОтветитьУдалить
  6. Здравствуйте! Возможно ли кнопку "читать далее" переместить в центр, чтобы она на любом мониторе и браузере была в центре? Не подкручивая margin.

    ОтветитьУдалить
    Ответы
    1. Что значит "Не подкручивая margin."? С помощью этого свойства и можно выравнять по центру, указав необходимые для него значения, например так:

      margin: 20px auto;
      или расписать подробнее:

      margin-right: auto;
      margin-left: auto;
      margin-top: 20px;
      margin-bottom: 30px;
      Проблему из первого вашего вопроса тоже можно решить с его помощью:
      .date-header {
      margin-bottom: 30px;
      }

      Удалить
    2. Спасибо большое, за разъяснение, дело в том, что сместил кнопку в центр с помощью text-align: center, но всё равно поправил всё как вы написали.:-) Скажите, пожалуйста, а возможно ли сместить кнопки в центр в горизонтальном меню? По меню уже второй день читаю статьи везде, но ничего не подходит...:-(

      Удалить
  7. MagentaWAVE, насчет даты понял, можно не публиковать коммент. Большое спасибо! Единственно, прошу помочь разобраться с выравниванием кнопок меню "старицы" посредине. Уже неделю голову ломаю, пробую переписывать код, но никак не выходит. Посмотрите, пожалуйста, на мою страницу http://puzzlecrew.blogspot.com/ менюшка из вашего кода, вот только хочется, чтобы кнопки в ней для всех была посередине...

    ОтветитьУдалить
    Ответы
    1. Тут все просто, добавьте для #PageList1 ul такое свойство со следующим значением:
      display: inline-block;

      Удалить
    2. Спасибо большое, сработало!!!:-)

      Удалить
  8. Здравствуйте! Возник вопрос и буду признателен, если найдется решение. Возможно ли сделать так, чтобы при нажатии на ссылку "Читать далее" сообщение открывалось не с места разрыва, а с самого начала?

    ОтветитьУдалить
    Ответы
    1. Такое поведение обусловлено скриптом, т.е. якорь устанавливается автоматически. В теории возможно все, но как реализовать это на практике я пока не задумывался ибо потребности такой не возникало.

      Удалить
  9. Спасибо. Получилось. А как можно сократить межстрочное расстояние между заголовком и датой ?

    ОтветитьУдалить
  10. отличные советы. Толкьо я - балда, не сохранила/не запомнила где код для даты заголовка. Перенесла его под название заголдовка (как по уроку - все ок). Но посмотрела и подумала. что лучше сделать все обратно....и осталась без дат вообще. Можете подсказать где код ...... был изначально?

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

Следующее Предыдущее

BestProject