Кнопка вверх (new) - 13 Февраля 2013 - AEBL-активный обмен баннерами и ссылками

Меню сайта

Форма входа

Последние добавления

статьи:

[17.05.2012]	[Полезное]
25 кадр: правда или вымысел? (0)

[05.05.2012]	[Полезное]
Баннерообмен для новичка (0)

[05.05.2012]	[Полезное]
Важные понятия баннероообмена (0)

софт:

[30.04.2012]	[Полезное]
Необходимые программы для компьютера (0)

[18.04.2012]	[Полезное]
Adblock Plus 2.0.3 (0)

[29.03.2012]	[Полезное]
Banner Designer Studio (0)

Мини-чат

Статистика

Участников в системе: 124

Количество баннеров: Смотреть

Количество ссылок: Смотреть

Онлайн всего: 2

Гостей: 2

Пользователей: 0

Наши реквизиты

WMID: 419681838911
R178819361629
B379770530544
Z121096202386
E335037287917

Administrator

WM.копилка

виджеты

Бонусы wm

Ещё бонусы

опрос

Здесь может быть ваша реклама...

People Group
реклама сайта

Поиск

Новости сайта

31.03.2012 Virtual corporation $ SHPED $ принимает участие в конкурсе "Шаблоны для uCoz" //win.ucoz.ru/
28.03.2012 Наш сайт выходит в десятку топ-100 ucoz сервисы!
09.03.2012 Идёт активная кампания по развитию проекта :)
04.03.2012 Доброе время суток уважаемый посетитель! Мы рады сообщить об открытии проекта! Присоединяйтесь к участникам и сделайте свою жизнь лучше, убрав из неё лишние силы на поиск обмена баннеров и ссылок.

Наша кнопка

<script type="text/javascript" src="//aebl.ucoz.com/rtr/1-1"></script>

Мы здесь

Радио

Радио онлайн

Расскажи о нас

Это интересно

Представьте себе:
На нашем ресурсе можно обменяться баннером с другим участником = это значит часть его посетителей к вам и наоборот = увеличение посещаемости вашего ресурса = больше тиц pr = это значит увеличении заработка с реклам и посетителей = больше монетизация сайта
Плохо? -нет! Тогда присоединяйся!

Партнёры

Хочешь стать партнёром сайта? Пиши администратору и здесь появится твой баннер :)

Hi-Tech новости

Отдохнём

Реклама

Здесь может быть ваша реклама...

People Group
реклама сайта

Главная » 2013 » Февраль » 13 » Кнопка вверх (new)

14:43
Кнопка вверх (new)

Всем привет

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

Слева у нас есть область которая по всей высоте окна браузера кликабельна как и кнопка "наверх" находящаяся в ней, при клике на эту область мы плавно поднимаемся вверх страницы. Для сайтов у которых разрешение экрана меньше или равно 1024px, будет видна только стрелка вверх, чтобы серый фон не закрывал часть сайта.

Установка CSS

Теперь давайте начнем установку на сайт, тем более что она крайне проста, вначале скопируем данный код в таблицу стилей, ПУ / Дизайн / Управление дизайном (CSS)

Код
.upTop {
  display:none;
  width:100px;
  height:100%;
  position:fixed;
  left:0px;
  top:0px;
  z-index:100;
}
.upTopButton {
  background:#777777 url(http://bambun.ru/images/goup.png) no-repeat;
  width:27px;
  height:27px;
  position:fixed;
  top:10px;
  left:10px;
  cursor:pointer;
}
.upTopZone {
  display:none;
  background:url(http://bambun.ru/images/upbg.png) repeat;
  width:100px;
  height:100%;
  cursor:pointer;
}
.upTopZone p {
  background:#777777;
  font-size:12px;
  width:63px;
  height:27px;
  margin:0;
  position:fixed;
  top:10px;
  left:37px;
  color:#fff;
  font-family:"tahoma", "verdana", "arial";
  line-height:25px;
  text-align:center;
  text-shadow:1px 1px 1px #000000;
}
@media screen and (max-width:1024px) {
  .upTopZone {
  display:none !important;
  }
} .blue .upTopButton, .blue .upTopZone p {
  background-color:#3fa3e1;
}
.green .upTopButton, .green .upTopZone p {
  background-color:#60bf3a;
}
.red .upTopButton, .red .upTopZone p {
  background-color:#ca2929;
}
.orange .upTopButton, .orange .upTopZone p {
  background-color:#ef990b;
}
.purple .upTopButton, .purple .upTopZone p {
  background-color:#b053a0;
}
.grey .upTopButton, .grey .upTopZone p {
  background-color:#777777;
}

Установка HTML

Данный код копируем и вставляем куда хотим, главное в тело страницы, можете поставить перед тегом </body>

Код
<div class="upTop blue">
  <div class="upTopZone"><p>наверх</p></div>
  <script type="text/javascript" src="http://activiks.ru/img/png.js"></script>
  <div class="upTopButton"></div>
</div>

Установка JS

Вставляем данный код также перед тегом </body>

Код
<script type="text/javascript" src="http://bambun.ru/css_js/uptop.js"></script>

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

blue - голубой
green - зеленый
red - красный
orange - оранжевый
purple - пурпурный
grey - серый

1

2

3

4

5
Просмотров: 534 | Добавил: startsmart | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

14:43 Кнопка вверх (new)
Всем привет Бывают всякие страницы, в том числе и очень приочень длинные, и чтобы не вертеть колесиком мыши, или же просто не тащить постоянно скролл существуют такой помошник, как кнопка "вверх". Именно они без проблем перемотают нас верх страницы. Одну из таких я и предлагаю вам поставить на свой сайт, она чем то похожа на кнопку вконтакте, но основное стилевое решение было взято с сайта kinopoisk. Слева у нас есть область которая по всей высоте окна браузера кликабельна как и кнопка "наверх" находящаяся в ней, при клике на эту область мы плавно поднимаемся вверх страницы. Для сайтов у которых разрешение экрана меньше или равно 1024px, будет видна только стрелка вверх, чтобы серый фон не закрывал часть сайта. Установка CSS Теперь давайте начнем установку на сайт, тем более что она крайне проста, вначале скопируем данный код в таблицу стилей, ПУ / Дизайн / Управление дизайном (CSS) Код .upTop { display:none; width:100px; height:100%; position:fixed; left:0px; top:0px; z-index:100; } .upTopButton { background:#777777 url(http://bambun.ru/images/goup.png) no-repeat; width:27px; height:27px; position:fixed; top:10px; left:10px; cursor:pointer; } .upTopZone { display:none; background:url(http://bambun.ru/images/upbg.png) repeat; width:100px; height:100%; cursor:pointer; } .upTopZone p { background:#777777; font-size:12px; width:63px; height:27px; margin:0; position:fixed; top:10px; left:37px; color:#fff; font-family:"tahoma", "verdana", "arial"; line-height:25px; text-align:center; text-shadow:1px 1px 1px #000000; } @media screen and (max-width:1024px) { .upTopZone { display:none !important; } } .blue .upTopButton, .blue .upTopZone p { background-color:#3fa3e1; } .green .upTopButton, .green .upTopZone p { background-color:#60bf3a; } .red .upTopButton, .red .upTopZone p { background-color:#ca2929; } .orange .upTopButton, .orange .upTopZone p { background-color:#ef990b; } .purple .upTopButton, .purple .upTopZone p { background-color:#b053a0; } .grey .upTopButton, .grey .upTopZone p { background-color:#777777; } Установка HTML Данный код копируем и вставляем куда хотим, главное в тело страницы, можете поставить перед тегом </body> Код <div class="upTop blue"> <div class="upTopZone"><p>наверх</p></div> <script type="text/javascript" src="http://activiks.ru/img/png.js"></script> <div class="upTopButton"></div> </div> Установка JS Вставляем данный код также перед тегом </body> Код <script type="text/javascript" src="http://bambun.ru/css_js/uptop.js"></script> На этом установка кнопки вверх для сайта закончена, по традиции я предлагаю несколько цветовых схем, чтобы каждый мог без труда применить сразу, полностью готовое решение у себя на сайте. Чтобы изменить основной цвет кнопки наверх, измените в html коде, класс blue на нужный из списка blue - голубой green - зеленый red - красный orange - оранжевый purple - пурпурный grey - серый
1 2 3 4 5 Просмотров: 534 \| Добавил: startsmart \| Рейтинг: 0.0/0