Некую оригинальность в этом плане несет в себе фиксированная панель с основными кнопками социальных сервисов, которая будет закреплена сбоку, "мозоля" глаза посетителям блога, в хорошем смысле этого словосочетания, при любой прокрутке страницы, тем самым повышая их кликабельный рефлекс. Помимо того, что такая панель всегда под рукой, в нашем случае - под курсором мыши, ко всему, освобождается пространство под статьей для дополнительных дизайнерских и информационных изысков.
Об ее установке в блог мы и поговорим далее.
Установка боковой панели социальных кнопок в блог.
Размещаем основной код.
Прежде всего сама разметка виджета с иконками социальных сервисов:
<div class="socbutton"> <div class="socicon"> <a rel="nofollow" target="_blank" href="http://twitter.com/share?url=" title="Добавь в Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8LI3jv1spEKonY0gd4MsymuE6e7P5Y6QLSYzsi32MCKtOhs7JX4svkXUE0xkm92Vyi9ZGwUMwabykQbBvRsiGzhmDVCernqX-wc6KDT74RvnZ2LlCAKW_KCb1YHruNy99P0GbcomLeAjt/s800/twitter.png" /></a><br /> <a rel="nofollow" target="_blank" href="http://www.facebook.com/sharer/sharer.php?u" title="Добавь в Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0LIN42_c5YS9kteerPTqJazyxWKwVZP72mJQdCMseIKhd1wJzkqUVvXavzHXK1MghWN7ijsQh7Xmf9KZJxuPAzk5VRxctJtWSEO9m6Y4EttECriqz-RCoTgXXUF61T5aYcG2q_BZDiFpC/s800/facebook.png" /></a><br /> <a rel="nofollow" target="_blank" href="http://vk.com/share.php?url=" title="Добавь в Вконтакте"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuXOGwhkdwQRZ-EuSD6_7K1sa5lCoRFbXnHSlWJ58x6VQviEdDXmQWyPL4Q1FQcAjINNQDlH-MlA_EnRkW91yr_-tirHiAC2vUT1_aMTDRa1BG-oQyVXMMQOItboKYrGexJjMrJkkUMyeG/s800/vkontakte.png" /></a><br /> <a rel="nofollow" target="_blank" href="http://connect.mail.ru/share?share_url=" title="Добавь в Мой Мир"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRA3gxhUdt_J5vtGUJ8PZN5XB8Q-v7qbnP_tg7nLC-gdU5BsXvR_pTJsW72IPjitwRWFcYrhlthv0yPxi4Z355QIU_8u4UazdylE8MEFHQN3D16Uo1SVyqI-88WVFWgvYdHSdm5ElEJWhR/s800/mailru.png" /></a><br /> <a rel="nofollow" target="_blank" href="http://www.livejournal.com/update.bml" title="Добавь в Livejournal"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2sYSU0BnYMbSQpyueu_Cj1RB42S3NVPG25qS8SW1dNvhHK3TCgGCYxT4BDYvUjXYwCFp3BdcPrAQ6oFdPCXcsRA7GJ7vp80rzldQ8ug8yCuVKmcn8aLpLaaDNhNTdLwrbxbycCnlnxZm7/s800/livejournal.png" /></a></div> </div>
Данный код следует разместить в любом месте шаблона, например, с помощью элемента HTML/JavaScript.
Здесь я уже включил основные сервисы наших общительных граждан, такие как Twitter, Facebook, ВКонтакте, LiveJournal и Мой мир. Также виджет имеет ссылки на иконки этих ресурсов. При желании вы можете заменить их на свои либо включить в виджет новые сервисы. Проделывается это путем добавлении ссылки вида:
<a rel="nofollow" target="_blank" href="ссылка_на_сервис" title="всплывающая подсказка"><img src="ссылка_на_изображение" /></a>
между тегами <div class="custom_images"> и </div>.
Задаем стили CSS.
Остается добавить нашей конструкции визуальное оформление и, собственно, фиксированное расположение в блоге. Я предлагаю два варианта боковой панели, немного различающихся в графическом плане.
Можно, не загромождая кнопки посторонними элементами, задать простенькую, но стильную окаймовку:
Либо залить цветом, увеличить бордюр и украсить тенью:
Проследуйте Шаблон > Изменить HTML.
В поле редактирования шаблона с помощью поиска найдите отрезок ]]></b:skin> и прямо перед ним впишите код CSS в зависимости от выбранной социальной панели.
.socbutton {
position: fixed;
top: 30%;
left: -5px;
border: 1px solid #ddd;
padding: 5px 5px 4px;
width: 38px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.socbutton .socicon a {
width: 32px;
height: 32px;
cursor: pointer;
}
.socbutton .socicon a img { border: 0; margin: 2px 0; opacity: 0.6; }
.socbutton .socicon a:hover img { margin: 2px 0; opacity: 1.0; }
2 вариант:
.socbutton {
position: fixed;
top: 30%;
left: -10px;
background-color: #bad1e0;
border: 9px solid #fff;
padding: 5px 5px 4px;
width: 40px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
box-shadow:4px 4px 5px #999;
-moz-box-shadow:4px 4px 5px #999;
-webkit-box-shadow: #999 4px 4px 5px;
}
.socbutton .socicon a {
width: 32px;
height: 32px;
cursor: pointer;
}
.socbutton .socicon a img { border: 0; margin: 2px 0; opacity: 0.6; }
.socbutton .socicon a:hover img { margin: 2px 0; opacity: 1.0; }
Немного о значениях кода:
отрезок width:, прописанный на участке .socbutton {} отвечает за ширину панели в пикселях;
top: - регулирует панель по вертикали, значение в процентах;
background-color: - фон панели;
border: - указывает на толщину окаймляющего бордюра в пикселях и его цвет;
width: и height: на участке .socicon {} - задают размеры иконок.
top: - регулирует панель по вертикали, значение в процентах;
background-color: - фон панели;
border: - указывает на толщину окаймляющего бордюра в пикселях и его цвет;
width: и height: на участке .socicon {} - задают размеры иконок.
Таким образом, вы сможете настроить визуальное оформление боковой панели в соответствии с дизайном вашего блога и исходя из собственных художественных предпочтений. Для удобства при выборе цвета используйте онлайн-генератор HTML-цветов. При особом расположении духа данный блок можно украсить красочной всплывающей подсказкой.