
В блогах на платформе Blogger сделать это очень просто, применяя CSS свойства к нужным селекторам, список которых приведен в данной статье с готовыми примерами кода. А также, здесь вы найдете описание, как разместить дату под заголовком сообщения блога.
Первым делом необходимо настроить формат отображения даты, перейдя на вкладку "Дизайн" в админке. Тут же, в графе: "Текст ссылки на Страницу сообщения" можно изменить и название для ссылки разрыва.
![]() |
Настройка формата даты и ссылки "Дальше" |
- .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;
}
Ссылка "Дальше..". не имеет в коде шаблона записанного селектора, но это не мешает добавить его туда самостоятельно. А он этого элемента такой: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).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 в этом случаи будет таким:
.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 код с применением изображений, рекомендуется использовать спрайты.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, указав необходимые значения для свойств текста, без вмешательства в HTML.
Для свойства цвета: color, нужно указать transparent - прозрачный,
для шрифта: font размер указать как 0.
Для свойства цвета: 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 == ""'>
Она будет одна-единственная по-этому не ошибетесь. И сразу перед(выше) этой строкой вставляем первую, отложенную. Должно быть так:<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
<b:if cond='data:blog.metaDescription == ""'>
Нажимаем на "Просмотреть", если все в порядке, сохраняем и радуемся. <b:if cond='data:blog.metaDescription == ""'>
Теперь наши дата и ссылки "Дальше..." приобретут соответствующий дизайн. На этом все, буду рад вашим комментариям :)
Спасибо!
ОтветитьУдалитьЯ первый раз создаю блог. Создала страницу, нажимаю на ссылку "далее" и ничего не получается. Не могу понять почему, если можете подскажите, пожалуйста. Сделать как у вас описано не могу, т.к. не знаю куда этот код вставить. Дизайн у вас очень красивый, как вы сделали такой фон?
ОтветитьУдалитьЕсли вы только создали блог на Blogger и хотите сделать дизайн индивидуально, то я вам рекомендовал бы:
Удалить1. Закрыть его от поисковиков, выбрав соответствующие настройки в панели управления, пока делаете дизайн.
2. Написать пару тестовых сообщений и добавить необходимые гаджеты, на которых вы бы уже видели как отображаются внесенные вами изменения.
3. Прочесть статью:
как добавить или задать CSS (стили) в HTML шаблон Blogger
4. Не боятся пробовать и не забывать сохранять резервную копию шаблона перед внесением изменений.
На счет фона - это простое, удачно подобранное, изображение, добавить которое можно стандартными ресурсами платформы.
Я так и не поняла, как вставить карту вместо слово "дальше"?
ОтветитьУдалить
УдалитьСпециально для вас дополнил статью, наслаждайтесь :)
Все равно ни чего не получается, вместо фото буквы получаются какие то, прозрачные
УдалитьПростите, я не доглядел, запишите вот так:
Удалитьbackground:url(http://your_image_100px_X_128px.png) no-repeat;
- без ковычек. Немного поспешил, уже в статье поправил, теперь будет все работать.
Или я тупая, или вы объясняете не так
УдалитьВот код, не ставится все равно, мне нужно сделать картинку так же, как у той девушки
.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;
}
Дорогая Катя, ваша проблема в том что вы просто не знаете что вы делаете.
УдалитьЭтот код стиля прекрасно работает, но в меру вашей неосведомленности вы не можете подогнать его под себя. А не знаете вы следующего:
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;
}
Если вам нужна помощь с дизайном, напишите мне на почту или в скайп - так будет проще.
сниманию шляпу перед вами)
УдалитьСпасибо вам всё получилось, на вашем блоге очень много дельных статей.
ОтветитьУдалитьИ вам спасибо за приятный отзыв :)
УдалитьМожете подсказать мне, я что-то сделал сам не знаю что и у меня ни один css не применяется. Наверно меняя что-то в html коде что-то поломал)
ОтветитьУдалитьТут для начала надо знать что вы "ломали" :) А вообще , перед внесением любых изменений в код делайте резервную копию шаблона, это убережет от таких неприятностей...
УдалитьЗдравствуйте! Отличный код для ссылки "Дальше"!!! Тем более, что можно многое настроить. Единственный вопрос, возможно ли добавить отступ после даты? А то у меня текст сообщения идёт следующей строкой после даты, а красивее было бы через одну.
ОтветитьУдалитьЗдравствуйте! Возможно ли кнопку "читать далее" переместить в центр, чтобы она на любом мониторе и браузере была в центре? Не подкручивая margin.
ОтветитьУдалитьЧто значит "Не подкручивая margin."? С помощью этого свойства и можно выравнять по центру, указав необходимые для него значения, например так:
Удалитьmargin: 20px auto;
или расписать подробнее:
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 30px;
Проблему из первого вашего вопроса тоже можно решить с его помощью:
.date-header {
margin-bottom: 30px;
}
Спасибо большое, за разъяснение, дело в том, что сместил кнопку в центр с помощью text-align: center, но всё равно поправил всё как вы написали.:-) Скажите, пожалуйста, а возможно ли сместить кнопки в центр в горизонтальном меню? По меню уже второй день читаю статьи везде, но ничего не подходит...:-(
УдалитьMagentaWAVE, насчет даты понял, можно не публиковать коммент. Большое спасибо! Единственно, прошу помочь разобраться с выравниванием кнопок меню "старицы" посредине. Уже неделю голову ломаю, пробую переписывать код, но никак не выходит. Посмотрите, пожалуйста, на мою страницу http://puzzlecrew.blogspot.com/ менюшка из вашего кода, вот только хочется, чтобы кнопки в ней для всех была посередине...
ОтветитьУдалитьТут все просто, добавьте для #PageList1 ul такое свойство со следующим значением:
Удалитьdisplay: inline-block;
Спасибо большое, сработало!!!:-)
УдалитьЗдравствуйте! Возник вопрос и буду признателен, если найдется решение. Возможно ли сделать так, чтобы при нажатии на ссылку "Читать далее" сообщение открывалось не с места разрыва, а с самого начала?
ОтветитьУдалитьТакое поведение обусловлено скриптом, т.е. якорь устанавливается автоматически. В теории возможно все, но как реализовать это на практике я пока не задумывался ибо потребности такой не возникало.
УдалитьСпасибо. Получилось. А как можно сократить межстрочное расстояние между заголовком и датой ?
ОтветитьУдалитьотличные советы. Толкьо я - балда, не сохранила/не запомнила где код для даты заголовка. Перенесла его под название заголдовка (как по уроку - все ок). Но посмотрела и подумала. что лучше сделать все обратно....и осталась без дат вообще. Можете подсказать где код ...... был изначально?
ОтветитьУдалитьа как на счет нужной даты? что за бред с 01.01.19.??
ОтветитьУдалитьДата устанавливается автоматически, в зависимости от даты )) В статье описано лишь как изменить оформление
Удалить