Как выделить виджеты блога разделителем



Разделители для виджетов боковых панелей


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

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

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


.sidebar .widget  {
border-bottom:7px ridge #b561ff;
border-radius:15px;
margin:0 0 1.5em;
padding:0 0 1.3em;
}

Выделенное красным-цвет и размер границ разделителя, здесь меняйте 7рх на свое значение, ridge-это формы границ, как в рамке; синим-размер закруглений границ; Пример можете посмотреть в демо блоге, разделители гаджетов выделены лиловым фоном с радиусом закругления 15 рх;

А этот стиль CSS для разделителя с изображением (картинкой)


.sidebar .widget {
margin:0 0 1.5em;
padding:0 0 50px;
background-image: url(http://1.bp.blogspot.com/-xIvTrPJaBBU/UfW7IysCHqI/AAAAAAAABdc/iS8y3ewOCZ8/s320/50688645_0001.gif);
background-position: bottom;
background-repeat: no-repeat; 
}

Здесь выделенное красным-URL адрес изображения. Как узнать адрес картинки читайте здесь. Второй способ-можно кликнуть по картинке правой кнопкой мыши и нажать копировать URL картинки (изображения).

Вы можете посмотреть разделитель в форме изображения в тестовом блоге. Тестировала для примера. Я думаю, подобрав соответствующее изображение можно сделать красиво, конечно же зависит от тематики блога.

На сегодня у меня все, оформляйте боковые панели в своем индивидуальном стиле, фантазируйте, всем пока. Пишите, делитесь с друзьями. Почитайте информацию красивое оформление основного фона и всех страниц блога


Автор статьи ✎ Olga Protasova Выпуск ✹ 5/15/2014 Ярлыки ►


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

0 коммент. :

Отправить комментарий


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

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

Имя

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

Сообщение *