Фишки для дизайна с использованием 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;

}

Почитайте пост  Как создать красивую подпись для своих веб сайтов/блогов

Убрать иконку карандаша в комментариях

.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 для блоггер;

Рекомендуемый контент: