Красивое оформление Блоггер

Вновь хочу показать несколько интересных идей для оформления блога на Блоггере. 

Иногда очень хочется что-то изменить на сайте, пусть не значительное, но интересное. 

Оформление цитаты или кода

Очень интересный код нашла на blogolect.com Можно оформить цитату или выделить что-то важное в статье. Цитата с ховер эффектом — при наведении курсором меняет цвет.

.post blockquote {background: #b4cca8;
padding: 10px;
color: #ffffff;
border-top: 20px solid #373;transition:border-top-color 400ms;-webkit-transition:border-top-color 400ms;-moz-transition:border-top-color 400ms;}
.post blockquote:hover {background:#373; border-top-color:#b4cca8;}

Цветным выделены коды цвета, которые можно поменять. Синий код — цвет текста.

И простое оформление цитаты, без ховер эффекта.

.post blockquote{background:#ddd;border-left:1px solid #333;border-bottom:17px solid #333;border-top:1px solid #333;border-right:1px solid #333; margin-left: 20px}
.post blockquote p{padding:10px}

Меняем выделенные цвета на свои.

Поменять цвет блога

Небольшой виджет, который позволит читателям вашего блога сменить цвет фона, на свой любимый. Виджет устанавливается через Дизайн — Добавить гаджет — HTML / JavaScript.

Устанавливайте в любом месте блога. Вот так выглядит виджет.

<div class="widget-content">

<center><b>Выбери свой цвет блога</b></center>

<br/>

<script type="text/javascript">

function bgChange(bg)

{

document.body.style.background=bg;

}

</script>

<table border="1" width="100%" height="20">

<tbody><tr>

<td onclick="bgChange('#8B008B')" bgcolor="#8B008B">

</td>

<td onclick="bgChange('#9400D3')" bgcolor="#9400D3">

</td>

<td onclick="bgChange('#008080')" bgcolor="#008080">

</td>

<td onclick="bgChange('#808080')" bgcolor="#808080">

</td>

<td onclick="bgChange('#CD853F')" bgcolor="#CD853F">

</td>

<td onclick="bgChange('#2F4F4F')" bgcolor="#2F4F4F">

</td>

<td onclick="bgChange('#DC143C')" bgcolor="#DC143C">

</td>

<td onclick="bgChange('#4B0082')" bgcolor="#4B0082">

</td>

<td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A">

</td>

<td onclick="bgChange('#000000')" bgcolor="#000000">

</td>

<td onclick="bgChange('#66FF00')" bgcolor="#44FF00">

</td>

<td onclick="bgChange('#FFFF00')" bgcolor="#FFFF00">

</td>

</tr></tbody></table>

</div>

Неоновое сияние у картинки

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

.post img {
padding: 8px;
background: #ffffff;
border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.post img:hover {
background:#FDFDFB;
border:1px solid #FF3300;
-moz-box-shadow:0 0 10px 2px #1f4be6;
-webkit-box-shadow:0 0 10px 4px #1f4be6;
box-shadow:0 0 10px 4px #1f4be6;
}

Можно поменять цвет свечения. Выделенный цвет поменять на свой. Можно увеличить ширину свечения, задав больший размер px (отмечено красным на скриншоте)