2015-06-05

Textual description of firstImageUrl

Поменять позицию сайдбара в Blogspot

поменять местами сайдбар
Из этой статьи вы узнаете как поменять позицию сайдбара в Blogger – левый сайдбар переместить вправо по отношению к основной части блога или правый – влево. Это сделать очень просто при помощи css трюка.
Выбор расположения сайдбара основывается на вкусовых предпочтениях автора блога, но лучше всего, когда автор стремиться к удобству читателей блога. Где будет располагаться сайдбар также зависит от целей, которые ставит перед собой блоггер. Так, принято считать, что рекламные объявления, расположенные в сайдбаре слева получают большее количество кликов. Однако навигацию лучше располагать справа. Если вам важно, чтобы читатель прежде всего уделял внимание содержанию, а лишь атем переходил к чтению статьи, то смело располагайте сайдбар в левой части сайта.
Прежде, чем мы перейдем к описанию трюка, который меняет местами боковую колонку, вы должны представлять в общих чертах строение блога. Коды во всех шаблонах разные, но можно проследить общие черты, которые помогут нам преодолеть различия.
Итак, основная колонка, в которой располагаются сообщения блога определяется селектором – #main-wrapper или .main-wrapper, встречала также селектор #main-atas (что такое селектор, свойства и значения css объявлений читайте в статье "Основы css”). Сайдбар определяется селектором – #sidebar-wrapper или .sidebar-wrapper
структура блога - сайдбар и основная колонка
В шаблоне ищем блоки объявлений такого вида:
/*
#main-wrapper {width:70%;padding:0;float:left;}
изменяем свойство float на начение right. В результате получим следующее объявление:
#main-wrapper {width:70%;padding:0;float:right;}
Так мы меняем поиционирование основного контента. Для того, чтобы у нас все заработало нужно изменить положение сайдбара. Теперь ищем код вида:
#sidebar-wrapper {width:30%;float:right;}
Изменяем на положение слева (left). Получим код:
#sidebar-wrapper {width:30%;float:left;}
Иногда в блогах Blogspot встречаются значения float, такие как $startSide и $endSide.
Пример:
 #main-wrapper {width:67%;padding:0;float:$startSide;word-wrap:break-word;overflow:hidden;min-height:350px;}
#sidebar-wrapper {width:33%;float:$endSide;padding:0 0;word-wrap:break-word;overflow:hidden;}
для того, чтобы изменить расположение сайдбара и колонки с основным содержанием блога, нужно изменить значения $startSide и $endSide на right и left. Так, если мы хотим, чтобы основной контент был справа, то прописываем значение float – right (вместо $startSide в примере), а для сайдбара – значение float будет – left.
Полученный код для данного примера:
#main-wrapper {width:67%;padding:0;float:right;word-wrap:break-word;overflow:hidden;min-height:350px;}
#sidebar-wrapper {width:33%;float:left;padding:0 0;word-wrap:break-word;overflow:hidden;}

2 комментария :

Сергей Назаров комментирует...

На самом деле такой трюк не совсем правильный. Использование процентов (%) может привести к проблемам в некоторых браузерах. В шаблонах на Blogger обычно используется вариант с фиксированными боковыми колонками, что достигается, за счёт margin и padding. Потому более правильно будет в дизайнере шаблона выбрать вариант с двумя боковыми колонками, перенести гаджеты, а потом снова сделать одну колонку... имхо.

Иванова Наталья комментирует...

Сергей, речь идет не о процентах, а о том, что нужно поменять значение float на противоположное без кардинальных изменений шаблона блога.
За дополнение - спасибо.

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

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности