Красивое оформление Блоггер
Вновь хочу показать несколько интересных идей для оформления блога на Блоггере.
Иногда очень хочется что-то изменить на сайте, пусть не значительное, но интересное.
Оформление цитаты или кода
Очень интересный код нашла на 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
Код вставляем в шаблоне выше тега ]]></b:skin
.post img {Можно поменять цвет свечения. Выделенный цвет поменять на свой. Можно увеличить ширину свечения, задав больший размер px (отмечено красным на скриншоте)
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;
}
Комментарии со спамом удаляются.