Редактирование шаблона блога на Блогспот при оформлении.
Данные приёмы использования для оформления CSS-стилей подходят как для Блогспот так и для Вордпресс. Тем более,что блоги на платформе Blogger весьма просты и не замысловаты и сломать шаблон и потерять блог при редактировании шаблона довольно таки сложно.Можно реально выбросить половину кода из шаблона и всё одно он будет функционировать.Следует просто внимательно относиться к произведённым манипуляциям и сохранять удалённые фрагменты в блокноте до конца редактирования,чтобы если что-то пойдёт не так вставить всё на свои места,хотя для этого в редакторе есть функция Восстановить шаблоны виджетов по умолчанию,но тогда все Ваши труды будут утеряны,а блог вернётся к стандартному первозданному виду оформления.
CSS плюшки для оформления блога.
Цитата или blockquote
Код CSS следует добавить в шаблон блога для опытных пользователей или же в любой гаджет НТМЛ для новичков.Начнём с кода для оформления цитат,безликого по умолчанию и невыразительного.Добавив следующий код можно автоматически получить совсем противоположный эффект.Окно цитаты станет стильным и креативным. Пример оформления цитаты.
<style type="text/css">
/* Оформление внутри сайта v-gol.ru*/.post-body blockquote {
margin: 10px 0px 10px 10px;
padding: 10px;
color: #000;text-align: center;font: 16px/0.9 Arial,sans-serif;
border-left: 4px solid #ccc;
white-space: pre-wrap; /* перенос длинных строк */
word-wrap: break-word; /* перенос длинных слов в Internet Explorer 5.5+ */background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 50%); border-radius: 10px; box-shadow: inset 0px 1px 0px #9e8d84, 0px 3px 0px 0px #ccc, 0px 5px 5px #044;opacity:0.9;
}
</style>
Разделитель тег <hr />
По умолчанию разделитель имеет простой серый цвет и толщину один пиксель.
Добавлять его можно в любом месте,где требуется разделить какие-то участки статьи,но данный тег <hr /> можно также добавить в шаблон блога,придав при помощи CSS совершенно новый стильный облик.Добавив в шаблон блога после строки <div class='post-footer-line post-footer-line-2'> данный тег можно получить на выходе красивый разделитель.Пример оформления
<style type="text/css">
/* Оформление внутри сайта v-gol.ru*/hr {
border: 2px solid #ddd;background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 50%); border-radius: 10px; box-shadow: inset 0px 1px 0px #9e8d84, 0px 3px 0px 0px #ccc, 0px 5px 5px #044;opacity:0.3;margin-top: -30px;
}
</style>
Таблица на CSS.
Использование чистых таблиц на данный момент считается делом устаревшим и не рекомендуется прибегать к их применению.Но как просто и удобно добавить фото в ряд в таблицу и не париться при позиционировании,следовательно стоит добавить таблицу состоящую из блоков и CSS-кода,отвечающего за выравнивание и размер изображений,что тоже не мало важно при нестандартных картинках.Пример оформления таблиц
<style type="text/css">Ну а дальше при написании или редактировании добавить на страницу НТМЛ часть таблицы,куда внести необходимые материалы.
/* Оформление внутри сайта v-gol.ru*/.container {
display: table;padding: 10px;
}
.row {
display: table-row;
}
.column {
display: table-cell;
}
.container img {
position:relative;
width:170px;/* Ширина изображения с учетом рамки в 1px */
height:140px;/* Высота изображения с учетом рамки в 1px */
top:0;
left:0;
border:1px solid #ccc;
}
</style>
<div class="container">
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</div>
Оформление нумерованного списка CSS.
Списки бывают разные и применяются довольно часто при нумерации каких либо событий или фактов.Оформить простой цифровой набор можно добавив следующий код CSS.
<style type="text/css">Необходимый размер и цвет оформления можно добиться используя визуальный онлайн редактор. Пример оформления списков.
/* Оформление внутри сайта v-gol.ru*/
.main ol {
list-style: none;
counter-reset: point;
}
.main ol li {
margin-bottom: 10px;
padding-left: 25px;
position: relative;
}
.main ol li:before {
content: counter(point);
counter-increment: point 1;
font-size: 10px; /* декор цифр */
position: absolute;
left: 0;
top: 0px;
background: #d7d;border-radius:90px 90px 90px 90px;
width: 20px;
padding: 3px 10;
color: #fff;
font-weight: bold;
text-align: center;
}
</style>
Блок оформления рекламы или анонсов внутри статьи.
Данный вариант на данный момент в том или ином виде сегодня широко используется на новостных сайтах (пример использования). Для добавления себе на страницу такого блока следует добавить следующий вариант кода CSS. Ну а дальше при написании статьи просто заключить необходимую часть текста или добавить другую полезную информацию в дивы такого вида <div class="r1">Ваш текст</div> и блок самостоятельно найдёт своё заданное ему место на странице. Пример использования
<style type="text/css">
/* Оформление внутри сайта v-gol.ru*/
.r1 {float: right;
width: 240px;
padding:15px;
margin: 5px;
border-left: 4px double;
border-color: #7E7E7E;
background: #F0F0F0;}
</style>
Вариантов для оформления внешнего вида страниц можно привести множество.Используя CSS можно добиться совершенно нового облика стандартного оформления страниц блога или сайта.
Отправить комментарий