Фишки для дизайна с использованием CSS для блоггер



Здравствуйте друзья, гости и читатели блога. Вернемся сегодня к дизайну. В этой статье предлагаю для оформления несколько полезных фишек на чистом 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;
}
Убрать иконку карандаша в комментариях


Иконка карандаша в комментариях
Убираем иконку карандаша на чистом CSS


.comments .comments-content .icon.blog-author {display:none;}

Гаджет Архив блога в прокрутке

#BlogArchive1 .widget-content{height:300px; width:auto;overflow:auto;}

Гаджет Ярлыки в прокрутке

#Label1 .widget-content{height:100px; width:auto;overflow:auto;}

Изменить на странице цвет выделяемого текста для копирования

::selection { 
background: #ff6200
color: #fff;
 }
::-moz-selection { 
background: #ff6200
color: #fff
}

Скрыть подчеркивание ссылок

a:link {text-decoration:none;}

Коды CSS вставляем в шаблон изменить шаблон выше строки ]]></b:skin>. Кто еще не знает, где искать эту строку, почитайте пост Как быстро и красиво оформить текст блога.

Можно вставить дизайн добавить гаджет внизу макета блога: <style>код CSS</style>. Или в таком же варианте в редакторе сообщений по вкладке HTML оформить для отдельной страницы.

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

И в заключение два скрипта, для автоматического изменения основного фона при переходе на другие страницы. Скрипт вставить шаблон изменить шаблон выше закрывающего тэга </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 для блоггер;

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 3/29/2016 Ярлыки ►


Открыть комментарии →

24 коммент. :

  1. Здравствуйте,Оля!К сожалению ничего не получилось. Может надо подключить библиотеку?

    ОтветитьУдалить
  2. Здравствуйте Нина. Библиотеку подключать не нужно, это CSS. Что у Вас не получилось, дайте ссылку на скриншот, что и куда вставляли.

    ОтветитьУдалить
    Ответы
    1. http://prntscr.com/aoh2ij это скрин.Вставила код в сообщение, чтобы выше заголовка только в одном сообщении, и еще один в гаджет в дизайне

      Удалить
    2. Нина, для одной страницы и гаджетов надо нужный код CSS заключить в тэги:

      Пример на скриншоте: https://goo.gl/hFDxGh

      Ниже в статье я писала информацию. У Вас неправильно вставлен адрес картинки, должен быть в скобках, смотрите внимательно, важен каждый символ.

      Удалить
  3. Оля, пробовала 3 способа, результат одинаковый:картинка появилась и через три сек исчезла.Видно шаблон не принимает. Код от юстаса также работает.

    ОтветитьУдалить
    Ответы
    1. Нина, а какие 3 способа? У Вас на скриншоте, это короткая ссылка адреса картинки? Гугл поддерживает формат изображений: JPEG; JPG; PNG;
      Пример: (https://здесь адрес.JPG)
      Загрузите картинку в редакторе блоггер и по вкладке HTML скопируйте код. Короткую ссылку для блоггер лучше сгенерировать здесь https://goo.gl
      Если же использовали такой формат, значит еще раз внимательно смотрите символы, точку с запятой после скобки с адресом картинки?

      Изображение появляется-уже хорошо, значит где-то ошибка. Дайте мне еще ссылку на скриншот,со статьи в блоггере, где Вы вставили код CSS, я посмотрю.

      Удалить
  4. Оля,здравствуйте!Три способа я имею ввиду то, что вставила в сообщение,в HTML гаджет, в код шаблона.Код картинки получаю так, как вы пишите, но он действительно очень длинный и не всегда дает расширение. Спасибо за генератор,надо попробовать. На скриншоте я пыталась загрузить с яндекс-диска. Я поняла, что если в адресе нет расширения картинки, она вообще не показывается, хотя место для картинки освобождается.Сейчас я пробую на тестовом блоге, но пока все удалила. Попрбую еще раз.Когда вставляю в сообщение, картинка появлялась на всех сообщениях, мне хочется в каждом свою,над заглавием и не маленькую. Ну, вот такой бзик!

    ОтветитьУдалить
  5. Ну вот получилось, картинка выше заголовка по центру. Изменила в коде post-outer на post-title и нашла картинку с короткой ссылкой и расширением png. Вставила в сообщение, и опять картинка во всех сообщениях http://prntscr.com/aos9i2 http://prntscr.com/aosc6x

    ОтветитьУдалить
  6. Вот еще подпись добавила через гаджет в дизайне,но добавила обвертку style, без нее не работает http://prntscr.com/aosg9n

    ОтветитьУдалить
    Ответы
    1. Нина, с подписью по моему все нормально. Можно изменить положение справа или слева.
      Теперь в постах. 1. В кодах не надо ничего менять. 2. Блоггер последнее время блокирует сторонние адреса. Сделайте простые шаги, загрузите картинку в редактор и в HTML скопируйте адрес. Не надо сторонние адреса. У меня есть пост о разных фонах для страниц, так гугл заблокировал адреса картинок с яндекса и радикала.
      3. Не совсем понятно, вставили стиль CSS на одну страницу, а картинка во всех постах? Такого не может быть. 4. Повторюсь, в тэги style вставляете код CSS для гаджета, и в редакторе для поста по вкладке HTML.

      Удалить
  7. Последний Ваш коммент вместо публикации нечаянно удалила, скопировала с почты.
    У меня картинки сохраняются в Google фото,но адреса там длинные и не всегда есть расширение .jpg, а без него не получается. Сайт https://goo.gl дает адрес без расширения. Поверьте, я все варианты пробую, post-outer не работает.Вы правильно поняли, картинка во всех сообщениях, а хотелось разные. Вот скриншот http://prntscr.com/aouehs

    Ответ:
    Нина, я же Вам сказала откуда брать адреса. Сайт https://goo.gl не влияет на расширения картинок, там генерируется короткая ссылка.
    Я не пойму, почему у Вас не получается. У меня 9 тестовых блогов на разных шаблонах. Перед публикацией статьи проверила работу во всех шаблонах и никаких проблем не было. Вы пробовали ставить адрес, скопированный в редакторе?

    Картинки получаются во всех постах, а Вы точно вставили код для одной страницы, может у Вас гаджетом установлен или в шаблоне остался.

    ОтветитьУдалить
  8. Код в одном посте, шаблон чистый,Подпись в гаджете, код подписи брала из редактора.

    ОтветитьУдалить
    Ответы
    1. Нина, посмотрела по коду страницы Ваш блог, нашла только код подписи. Напишите, какой у Вас шаблон и нужно скрин вставки кода в HTML страницы.

      Удалить
    2. А может этот шаблон Blogger Template Style Name: Awesome Inc.Я так его перелопатила, что не помню

      Удалить
  9. Я тренируюсь на закрытом тестовом блоге Корпорация чудеса,такой же, как мой блог.Все скриншоты я дала выше в комментариях, вот в сообщении ,повторяю http://prntscr.com/aosc6x.В блог перенесла только подпись

    ОтветитьУдалить
    Ответы
    1. Нина, Корпорация Чудеса мой любимый шаблон. Я сейчас еще раз все проверила. Ставлю код в редакторе на страницу, картинка только в одном посте. Гаджетом и в шаблон на всех страницах. Код ставлю .post-outer:before {... Как у Вас может быть на всех страницах при вставке кода для одной, не пойму. Проверьте еще раз, может где-то гаджет остался. Другого объяснения не нахожу. Шаблон отлично принимает многие изменения, в отличие от простого шаблона. Вставьте сейчас в редакторе код для одной страницы, я зайду посмотрю.

      Удалить
  10. Может у меня не Корпорация Чудеса,а Awesome Inc.Я так его перелопатила, что не помню.Смотрите скриншоты, тут совсем ничего не получилось http://prntscr.com/aozpmp http://prntscr.com/aozoos Вместо картинки текст

    ОтветитьУдалить
    Ответы
    1. Нина, и будет текст, нет тэгов style.
      У Вас на скриншоте в коде написано stile вместо style.
      И моя просьба, Вставьте правильно код на одну страницу в рабочий блог и киньте сюда ссылку.

      Удалить
  11. Оля, не смотрите скриншоты, там ошибка, я сейчас заново пришлю http://prntscr.com/ap05ut это в редакторе, а в блоге смотрите сами,потом я все удалю, потому что опять во всех постах

    ОтветитьУдалить
  12. Уже сама увидела и исправила,скриншот выше в комменте, а ссылка вот http://glavnoenachat.blogspot.com/

    ОтветитьУдалить
    Ответы
    1. Нина, на главной у Вас 5 сообщений. При вставке кода в одно из них, картинка будет отображаться во всех постах одинаковая. Пробуйте для примера вставить код для одного поста, которого нет на главной. При переходе картинок нет вообще. Отсюда вывод: добавляйте изображения в посты, которых нет на главной, они там и не нужны.
      Чтобы отображались картинки на главной и при переходе по ссылке заголовка, код нужно ставить в шаблон.
      А подпись нужно убрать с главной страницы, зачем она под каждым постом.

      Удалить
  13. Картинки меня разочаровали, а подпись вставлена в гаджет и вылезает сама на главную.Пробовала в шаблон перед соцкнопками, не сработало.Посмотрю,если не смогу убрать, откажусь. Вообще-то это логотип.я просто с ним поработала.

    ОтветитьУдалить
    Ответы
    1. Нина, зачем убирать такую красивую подпись. Посмотрите ID гаджета (дизайн-изменить гаджет-адресная строка вверху) и вставьте код как на скриншоте https://goo.gl/NmYxqZ

      Я к комментах не смогу вставить этот код, посмотрите пост и скопируйте

      http://www.bdblogov.ru/2014/08/How-hide-widget-Linkwithin-with-home-page-blog.html

      Так можно убрать все лишние гаджеты с главной.

      Удалить
  14. Спасибо,Оля! Получилосьсразу!

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


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *