Здравствуйте друзья, гости и читатели блога. Вернемся сегодня к дизайну. В этой статье предлагаю для оформления несколько полезных фишек на чистом CSS. Я уже писала статьи по этой теме, поэтому кому интересно, в содержании ярлык Дизайн. Итак, смотрим...
Изображение слева для заголовка сообщения
.post-title {
background: url(адрес картинки) no-repeat left transparent;
padding-left: 35px;
}
Изображения слева и справа для заголовка поста
.post-title:before,
.post-title:after {
content: url(адрес изображения);
}
Иконка сверху слева для заголовка поста
.post-outer:before {content: url(адрес изображения);}
Иконка сверху по центру для заголовка сообщения
.post-outer:before {
content: url(адрес картинки);
display: block;
width: auto;
margin: 0 150px;
}
Меняйте значение margin: 0 150px; и настраивайте положение картинки по центру или справа
Изображение слева для шапки блога
.header {
background: url(адрес картинки) no-repeat left transparent;
padding-left:75px;top:3px; //*отступ от названия заголовка;
}
Изображение справа в шапке блога
.header {
background: url(адрес картинки) no-repeat right transparent;
padding-right:75px;top:3px;
}
Изменить расположение заголовка (названия) блога (по центру или правее)

.header{ padding-left:275px;top:3px;}
Автоматическая подпись под всеми сообщениями в блоге
.entry-content:after {
content: url(адрес подписи);
margin-left: 50px;
}
Убрать иконку карандаша в комментариях
.comments .comments-content .icon.blog-author {display:none;}
Гаджет Архив блога в прокрутке
#BlogArchive1 .widget-content{height:300px; width:auto;overflow:auto;}
Гаджет Архив блога в прокрутке
#BlogArchive1 .widget-content{height:300px; width:auto;overflow:auto;}
Гаджет Ярлыки в прокрутке
#Label1 .widget-content{height:100px; width:auto;overflow:auto;}
Изменить на странице цвет выделяемого текста при копировании
Изменить на странице цвет выделяемого текста при копировании
::selection {
background: #ff6200;
color: #fff;
}
background: #ff6200;
color: #fff;
}
::-moz-selection {
background: #ff6200;
color: #fff;
}
background: #ff6200;
color: #fff;
}
Скрыть подчеркивание ссылок
a:link {text-decoration:none;}
Коды CSS вставляем в шаблон изменить шаблон выше строки ]]></b:skin>. Кто еще не знает, где искать эту строку, почитайте пост Как быстро и красиво оформить текст блога.
✓У кого на главной больше одного поста, при вставке кода в один из них, картинки в заголовке появятся во всех сообщениях. Коды картинок для заголовка поста устанавливайте на страницы, не отображающиеся на главной.
И в заключение два скрипта, для автоматического изменения основного фона при переходе на другие страницы. Скрипт вставить шаблон изменить шаблон выше закрывающего тэга </head>.
Автоматически меняющийся основной фон блога при переходе
<script type='text/javascript'>//<![CDATA[
function get_random_color(){var e="0123456789ABCDEF".split("");var t="#";for(var n=0;n<6;n++){t+=e[Math.round(Math.random()*14)]}return t}$(function(){$(".content").each(function(){$(this).css("background-color",get_random_color())})})//]]></script>
Меняющийся фон заголовка
<script type='text/javascript'>//<![CDATA[
function get_random_color(){var e="0123456789ABCDEF".split("");var t="#";for(var n=0;n<6;n++){t+=e[Math.round(Math.random()*14)]}return t}$(function(){$(".header").each(function(){$(this).css("background-color",get_random_color())})})//]]></script>
Пример сходите посмотреть в тестовый блог, сделайте переход по разным ссылкам справа в меню. У меня в шаблоне вставлены оба скрипта для основного фона и заголовка.
Можно еще сделать для страниц сообщений, но придется подбирать цвет шрифта под каждый фон, поэтому посчитала такое оформление не нужным.
Можно еще сделать для страниц сообщений, но придется подбирать цвет шрифта под каждый фон, поэтому посчитала такое оформление не нужным.
На этом закончу. На все вопросы отвечу в комментариях. Всего доброго. Почитайте новый пост Поставить ударение в слове в редакторе сообщений blogger и предыдущий пост Изменить URL адрес статических страниц в блоггер.
Рекомендую: Подчеркивание заголовков используя CSS для блоггер;
Рекомендуемый контент:
Здравствуйте,Оля!К сожалению ничего не получилось. Может надо подключить библиотеку?
ОтветитьУдалитьЗдравствуйте Нина. Библиотеку подключать не нужно, это CSS. Что у Вас не получилось, дайте ссылку на скриншот, что и куда вставляли.
ОтветитьУдалитьhttp://prntscr.com/aoh2ij это скрин.Вставила код в сообщение, чтобы выше заголовка только в одном сообщении, и еще один в гаджет в дизайне
УдалитьНина, для одной страницы и гаджетов надо нужный код CSS заключить в тэги:
УдалитьПример на скриншоте: https://goo.gl/hFDxGh
Ниже в статье я писала информацию. У Вас неправильно вставлен адрес картинки, должен быть в скобках, смотрите внимательно, важен каждый символ.
Оля, пробовала 3 способа, результат одинаковый:картинка появилась и через три сек исчезла.Видно шаблон не принимает. Код от юстаса также работает.
ОтветитьУдалитьНина, а какие 3 способа? У Вас на скриншоте, это короткая ссылка адреса картинки? Гугл поддерживает формат изображений: JPEG; JPG; PNG;
УдалитьПример: (https://здесь адрес.JPG)
Загрузите картинку в редакторе блоггер и по вкладке HTML скопируйте код. Короткую ссылку для блоггер лучше сгенерировать здесь https://goo.gl
Если же использовали такой формат, значит еще раз внимательно смотрите символы, точку с запятой после скобки с адресом картинки?
Изображение появляется-уже хорошо, значит где-то ошибка. Дайте мне еще ссылку на скриншот,со статьи в блоггере, где Вы вставили код CSS, я посмотрю.
Оля,здравствуйте!Три способа я имею ввиду то, что вставила в сообщение,в HTML гаджет, в код шаблона.Код картинки получаю так, как вы пишите, но он действительно очень длинный и не всегда дает расширение. Спасибо за генератор,надо попробовать. На скриншоте я пыталась загрузить с яндекс-диска. Я поняла, что если в адресе нет расширения картинки, она вообще не показывается, хотя место для картинки освобождается.Сейчас я пробую на тестовом блоге, но пока все удалила. Попрбую еще раз.Когда вставляю в сообщение, картинка появлялась на всех сообщениях, мне хочется в каждом свою,над заглавием и не маленькую. Ну, вот такой бзик!
ОтветитьУдалитьНу вот получилось, картинка выше заголовка по центру. Изменила в коде post-outer на post-title и нашла картинку с короткой ссылкой и расширением png. Вставила в сообщение, и опять картинка во всех сообщениях http://prntscr.com/aos9i2 http://prntscr.com/aosc6x
ОтветитьУдалитьВот еще подпись добавила через гаджет в дизайне,но добавила обвертку style, без нее не работает http://prntscr.com/aosg9n
ОтветитьУдалитьНина, с подписью по моему все нормально. Можно изменить положение справа или слева.
УдалитьТеперь в постах. 1. В кодах не надо ничего менять. 2. Блоггер последнее время блокирует сторонние адреса. Сделайте простые шаги, загрузите картинку в редактор и в HTML скопируйте адрес. Не надо сторонние адреса. У меня есть пост о разных фонах для страниц, так гугл заблокировал адреса картинок с яндекса и радикала.
3. Не совсем понятно, вставили стиль CSS на одну страницу, а картинка во всех постах? Такого не может быть. 4. Повторюсь, в тэги style вставляете код CSS для гаджета, и в редакторе для поста по вкладке HTML.
Последний Ваш коммент вместо публикации нечаянно удалила, скопировала с почты.
ОтветитьУдалитьУ меня картинки сохраняются в Google фото,но адреса там длинные и не всегда есть расширение .jpg, а без него не получается. Сайт https://goo.gl дает адрес без расширения. Поверьте, я все варианты пробую, post-outer не работает.Вы правильно поняли, картинка во всех сообщениях, а хотелось разные. Вот скриншот http://prntscr.com/aouehs
Ответ:
Нина, я же Вам сказала откуда брать адреса. Сайт https://goo.gl не влияет на расширения картинок, там генерируется короткая ссылка.
Я не пойму, почему у Вас не получается. У меня 9 тестовых блогов на разных шаблонах. Перед публикацией статьи проверила работу во всех шаблонах и никаких проблем не было. Вы пробовали ставить адрес, скопированный в редакторе?
Картинки получаются во всех постах, а Вы точно вставили код для одной страницы, может у Вас гаджетом установлен или в шаблоне остался.
Код в одном посте, шаблон чистый,Подпись в гаджете, код подписи брала из редактора.
ОтветитьУдалитьНина, посмотрела по коду страницы Ваш блог, нашла только код подписи. Напишите, какой у Вас шаблон и нужно скрин вставки кода в HTML страницы.
УдалитьА может этот шаблон Blogger Template Style Name: Awesome Inc.Я так его перелопатила, что не помню
УдалитьЯ тренируюсь на закрытом тестовом блоге Корпорация чудеса,такой же, как мой блог.Все скриншоты я дала выше в комментариях, вот в сообщении ,повторяю http://prntscr.com/aosc6x.В блог перенесла только подпись
ОтветитьУдалитьНина, Корпорация Чудеса мой любимый шаблон. Я сейчас еще раз все проверила. Ставлю код в редакторе на страницу, картинка только в одном посте. Гаджетом и в шаблон на всех страницах. Код ставлю .post-outer:before {... Как у Вас может быть на всех страницах при вставке кода для одной, не пойму. Проверьте еще раз, может где-то гаджет остался. Другого объяснения не нахожу. Шаблон отлично принимает многие изменения, в отличие от простого шаблона. Вставьте сейчас в редакторе код для одной страницы, я зайду посмотрю.
УдалитьМожет у меня не Корпорация Чудеса,а Awesome Inc.Я так его перелопатила, что не помню.Смотрите скриншоты, тут совсем ничего не получилось http://prntscr.com/aozpmp http://prntscr.com/aozoos Вместо картинки текст
ОтветитьУдалитьНина, и будет текст, нет тэгов style.
УдалитьУ Вас на скриншоте в коде написано stile вместо style.
И моя просьба, Вставьте правильно код на одну страницу в рабочий блог и киньте сюда ссылку.
Оля, не смотрите скриншоты, там ошибка, я сейчас заново пришлю http://prntscr.com/ap05ut это в редакторе, а в блоге смотрите сами,потом я все удалю, потому что опять во всех постах
ОтветитьУдалитьУже сама увидела и исправила,скриншот выше в комменте, а ссылка вот http://glavnoenachat.blogspot.com/
ОтветитьУдалитьНина, на главной у Вас 5 сообщений. При вставке кода в одно из них, картинка будет отображаться во всех постах одинаковая. Пробуйте для примера вставить код для одного поста, которого нет на главной. При переходе картинок нет вообще. Отсюда вывод: добавляйте изображения в посты, которых нет на главной, они там и не нужны.
УдалитьЧтобы отображались картинки на главной и при переходе по ссылке заголовка, код нужно ставить в шаблон.
А подпись нужно убрать с главной страницы, зачем она под каждым постом.
Картинки меня разочаровали, а подпись вставлена в гаджет и вылезает сама на главную.Пробовала в шаблон перед соцкнопками, не сработало.Посмотрю,если не смогу убрать, откажусь. Вообще-то это логотип.я просто с ним поработала.
ОтветитьУдалитьНина, зачем убирать такую красивую подпись. Посмотрите ID гаджета (дизайн-изменить гаджет-адресная строка вверху) и вставьте код как на скриншоте https://goo.gl/NmYxqZ
УдалитьЯ к комментах не смогу вставить этот код, посмотрите пост и скопируйте
http://www.bdblogov.ru/2014/08/How-hide-widget-Linkwithin-with-home-page-blog.html
Так можно убрать все лишние гаджеты с главной.
Спасибо,Оля! Получилосьсразу!
ОтветитьУдалитьDexter-Razbor, здравствуйте. Посмотрела по ссылке код, решила не тестировать в своих блогах. Там оформление CSS страниц, плюс заголовок. Создайте тестовый блог и тренируйтесь на нем с кодами. Если не устанавливается, значит нужно корректировать. Комментарий Ваш с внешней ссылкой удаляю.
ОтветитьУдалить>Создайте тестовый блог и тренируйтесь на нем с кодами.
УдалитьСпасибо за идею! А то я устанавливал в своем не тестовом и наверняка мешал своим посетителям.