388x60 Ads

Фиксированная левая панель

Боковая панель с кнопками
На многих блогах используется фиксированная боковая панель.

Я тоже решил обзавестись такой панелькой.

Думая над тем, как это лучше сделать и для чего, случайно наткнулся в буржунете на сайт http://sharethis.com , который предлагает довольно хороший блок Share. Регистрируемся, заходим на страницу Lab, в ней выбираем HoveringButtons – Beta, отключаем Enable Ads и дальше выбираем нужные настройки. Получаем код и вставляем в свой блог.

Можно создать и пользовательский (свой вариант) такой панели. Лично мне нужно было, что бы панелька играла роль блока «Следуй за мной и подписки».

Заходим во вкладку Дизайн – Изменить HTML. Находим ]]></b:skin> и перед этим фрагментом кода вставляем код css:
/* Fixed panel */
.fixed_panel {
position: fixed;
top: 38%;
left: -5px;
border: 1px solid #ddd;
padding: 5px 5px 4px;
width: 38px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

.fixed_panel .My_images a {
width: 38px;
height: 38px;
cursor: pointer;
}

.leftbox a img { border: 0; margin: 2px 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); /* IE 5.5+*/
-moz-opacity: 0.6; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.6; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.6;
}

.leftbox a:hover img { margin: 2px 0; opacity: 1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* IE 5.5+*/
-moz-opacity: 1; /* Mozilla 1.6 и ниже */
-khtml-opacity: 1; /* Konqueror 3.1, Safari 1.1 */
}

/* End of Fixed panel */
Сохраняем изменения, переходим в Элементы страницы. Добавляем гаджет HTML/JS и вставляем в него такой код:
<div class='leftbox'><div class='fixed_panel'><div class='My_images'>
<noindex>
<a class='fixed_panel_rss' href='/feeds/posts/default?alt=rss' rel='nofollow' title='Подпишись на rss'><img height='38' src='http://slavavar.narod2.ru/rss_32.png' width='38'/></a><br/>

<a class='fixed_panel_twitter' href='http://twitter.com/#!/ ' rel='nofollow' title='Я в Twitter'><img height='38' src='http://slavavar.narod2.ru/twitter_32.png' width='38'/></a><br/>

<a class='fixed_panel_facebook' href='http://www.facebook.com/profile.php?id=' rel='nofollow' title='Я в Facebook'><img height='38' src='http://slavavar.narod2.ru/facebook_32.png' width='38'/></a><br/>

<a class='fixed_panel_vk' href='http://vkontakte.ru/' rel='nofollow' title='Я Вконтакте'><img height='38' src='http://slavavar.narod2.ru/vkontakte.png' width='38'/></a><br/>

<a class='fixed_panel_yandex' href='http://clubs.ya.ru/4611686018427451907' rel='nofollow' title='Клуб БЛОGГЕР'><img height='38' src='http://slavavar.narod2.ru/yandex.png' width='38'/></a><br/>
</noindex>
</div></div></div>

Пояснения


Свойство position определяет порядок, в соответствии с которым элемент отображается на веб-странице. Позиция элемента зафиксирована относительно границы окна браузера и поэтому элемент не прокручивается вместе с остальным контентом страницы. Позиция элемента смещается вверх, вниз, вправо или влево (зависит от того, какое свойство применено: top, right, bottom или left). В нашем примере использованы свойства top и left.

Свойство border -  управляет внешним видом рамки (бордюра) вокруг элемента, позволяя определить в одной строке сразу несколько атрибутов: цвет, стиль и ширину.

Padding - это пространство между содержимым элемента и бордюром.

Об элементе width наверно все всё знают – это ширина.

Как видим, наша панелька имеет закругленные углы. Для этого использовано свойство CSS3 border-raduis, которое позволяет создавать закруглённые углы без использования изображений или лишних div тэгов.

Свойство opacity определяет уровень прозрачности элемента.

Да пребудет с вами сила!

Ваш БЛОGГЕР



Подпишитесь В закладки НапечататьPrint Friendly and PDF


Вячеслав Вареня
Статус: seo-специалист | Контакты


11 коммент.:

Lili4ka комментирует... [Ответить]

Отличный новый дизайн блога, особенно понравились выпадающие меню страниц. А можно уточнить этот шаблон установлен на Блоггере или для Вордпрессе, так и не поняла?

БЛОGГЕР комментирует... [Ответить]

Добрый день! Шаблон установлен на Blogger. А в чем схожесть с WP?

Юрий комментирует... [Ответить]

С wordpress схожесть 100%) ! то есть во всем
боковую панельку можно самому создать, не прибегая к услугам стороних сайтов (особенно не русских)?

БЛОGГЕР комментирует... [Ответить]

Да, это самый простой способ создания боковой панели.

Graff комментирует... [Ответить]

А как сделать на blogger такую же панель, но с сайтом Vk.com?

БЛОGГЕР комментирует... [Ответить]

Так как написано в статье. Меняешь vkontakte.ru на vk.com

Graff комментирует... [Ответить]

Это то понятно. Но твои иконки всего лишь ссылки на соц сети, а мне надо, чтобы пользователь кликнул по иконке, и смог бы расшарить мой пост! Возможно ли это?

БЛОGГЕР комментирует... [Ответить]

Да, можно на основе sharethis.com

Guravuhka комментирует... [Ответить]

Вот спасибо-то!!! Я только начинаю разбираться во всех премудростях. На сайтах мне предлагалось САМОЙ что-то куда-то загрузить, открыть, скопировать, изменить, установить СВОЕ...и т.д. И я не один день потратила, чтобы просто найти ГОТОВЫЙ СКРИПТ!!! Просто хотелось оформить по-быстрому страничку, да и все. Вам большое спасибо. Удачно я к вам заглянула!

Miss Marla комментирует... [Ответить]

здравствуйте,

а не могли бы вы пояснить, почему используются в коде noindex и nofollow теги?

спасибо!

александр мухтаров комментирует... [Ответить]

а как сделать что бы не плавола она?

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