Сегодня, в поисках чего-то интересного, наткнулся на сайт, который позволяет вам сделать интересный вид соц.закладок.
порассуждаем. Что дают соц.закладки?
- Улучшенную индексацию
- Трафик с соц.закладок
- Красивую фичу на сайте ;)
Получается, соц.закладки необходимы буквально всем :D
Приступим, пожалуй.
1. Идем на сайт указанный автором вверху
2. Выбираем иконки тех сервисов, которые вы хотите видеть в своем блоке закладок.
3. Выбираем размер иконок, я советую 24х24.
4. Выбираем в пункте 2 на сайте: вертикальная "плавающая"
5. Выбираем в пункте 3 на сайт: если uCoz, то UTF-8
6. Смотрим, как будет выглядеть наш скрипт.
7. Если все нравится - наконец-то жмем кнопку "скачать"
Начинаем установку на сайт:
1. Скачанный архив разархивируем у себя на компьютере.
2. Идем в Панель Управления > Файловый менеджер > Создать папку > Название share42 (при желании можно поменять, но не советую)
3. Загружаем 2 файла из архива в эту папку
4. Идем в ПУ > Новости > Страница материала и комментариев к нему (если в других разделах - догадаетесь сами) > И после $MESSAGE$ ставим коды:
Code
<script type="text/javascript" src="http://site.ru/share42/share42.js"></script>
<script type="text/javascript">share42('site.ru/share42/','','',150,20)</script>
site.ru - меняем на свой сайт
share42 - на название папки, если оставили share42, то ничего не меняйте.
150 - расстояние ОТ НАЧАЛА САЙТА СВЕРХУ до информера. (пример у меня на сайте в подписи, в любой новости, прокрутите вниз)
20 - расстояние от браузера до информера, пример там же.
5. Добавляем в CSS следующее:
Code
#share42 {
position: fixed;
z-index: 1000;
margin-left: -70px; /* смещение панели влево от края контента */
padding: 6px 6px 0;
background: #FFF;
border: 1px solid #E9E9E9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
* html #share42 {display: none}
#share42:hover {
background: #F6F6F6;
border: 1px solid #D4D4D4;
-webkit-box-shadow: 0 0 5px #DDD;
-moz-box-shadow: 0 0 5px #DDD;
box-shadow: 0 0 5px #DDD;
}
#share42 a {opacity: 0.5}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}
#share42 img {margin: 0 !important; padding: 0 !important; border: none !important;}
7. Идем на сайт и любуемся нашим творением, настраиваем высоту под себя.
Меню сайта
Меню сайта
