Как сделать полосу прокрутки для виджета и боковой панели блога



Полоса прокрутки для виджетов и сообщений блога Blogspot


Всем привет! В этом сообщении информация об экономии места в боковых панелях и на страницах сообщений наших блогов. Устанавливая вертикальное меню или список ссылок, очень хочется разместить как можно больше ссылок на информацию в своих блогах. С этим все понятно, каждый блоггер заинтересован в уменьшении процента отказов и как можно дольше удержать посетителя.

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

Поэтому сегодня мы будем оформлять виджеты в наших блогах в Scrolling-полоса прокрутки. Я считаю, что это идеальный вариант оформления для виджетов: вписывайте адреса своих партнерских программ и адреса ссылок на свои посты в любом количестве, надо будет только настроить размер высоты и все. Так что кого интересует информация, побежали дальше:

Полоса прокрутки для одного виджета

 /* Sidebar Content */
#PopularPosts1{
height:250px;
overflow:auto;
}

Как Вы уже поняли, полосу прокрутки для виджета мы будем устанавливать с использованием CSS стилей. Все что нужно знать, это ID виджета. На многих сайтах рекомендуют смотреть ID в шаблоне, я узнаю ID своих виджетов намного проще. 

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

Дальше скопируйте стиль CSS, измените мой ID виджета (выделено красным) на свой, настраиваете высоту (выделено синим). Идем в шаблон-делаем резервную копию шаблона. Нажимаем изменить шаблон. Рядом с первой стрелкой видим строку <b:skin>...</b:skin>, прокручиваем вниз и вставляем CSS выше строки ]]></b:skin> ( подробно как найти строки, читайте пост как быстро и красиво выделить текст в блоге).

Настраивайте полосу прокрутки в шаблоне блога, нажимайте просмотр, не понравилось настраиваем снова. Когда останетесь довольны своим виджетом нажмите сохранить.

Если потребуется, можете вставить несколько стилей CSS с разными ID, таким образом установить прокрутку и для двух, и для трех и.т.д. виджетов.


Полоса прокрутки для всех виджетов боковых панелей

/* Sidebar Content */
.sidebar .widget{
height:250px;
overflow:auto;
}

Используя этот стиль CSS полоса прокрутки устанавливается автоматически для всех виджетов в боковых колонках. Смотрится конечно аккуратно и даже красиво, но есть одно но

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


Полоса прокрутки для всей боковой панели

.sidebar {
height:700px;
overflow:auto;
}

Полоса прокрутки для всех сообщений блога

.post {
height:500px;
overflow:auto;
}

Полоса прокрутки устанавливается автоматически для всех постов, что есть в блоге: и старых, и новых, а так же для статических страниц. Поэтому смотрите сами, нужно Вам это или нет. 

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

На этом я закончу сегодня, комментируйте, делитесь с друзьями и знакомыми в социальных сетях. Всего Вам Доброго. До свидания.




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


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

0 коммент. :

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

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

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

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

Имя

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

Сообщение *