Четверг, 13.05.2021, 03:35
Приветствую Вас Гость

X-Grim - Твой помощник

Меню сайта
Форма входа
Категории раздела
Информация о вас
Узнай свой IP адрес
Радио
Онлайн радио
Онлайн радио
Онлайн радио
Главная » Статьи » Плюшки для сайта

Стрелка вниз и вверх для своего сайта
Вариант 1- (вставлять нужно в  HTML код страниц)
[code]<SCRIPT src="http://bambun.ru/css_js/strelka_exe.js" type="text/javascript" language="javascript"></SCRIPT>
<a id="gotop" class="scrollTop" href="#" onclick="top.goTop(); return false;" style="text-align: justify;"><script src="http://xall-pc.ru/up.js" type="text/javascript"></script></a>
<style type="text/css">
.scrollTop{
background:url(http://bambun.ru/images/up.png) 0 0 no-repeat;
display:block; width:32px; height:32px;
position:fixed; bottom:10px; right:1%;
z-index:2000;
}
.scrollTop:hover{ background-position:0 -58px; }
</style>[/code]

Вариант 2 - (вставлять нужно в  HTML код страниц)
    <div style="position: fixed; right: 0.5%; bottom: 45%;"><a title="В верх страницы" onclick="scrollTo(0,0); return false;" href="#top"><img alt="В верх страницы" src="http://r28.imgfast.net/users/2814/33/31/58/album/dsdddd10.png"></a><br><br><a title="В низ страницы" onclick="scrollTo(0, document.body.scrollHeight); return false;" href="#top"><img alt="В низ страницы" src="http://r28.imgfast.net/users/2814/33/31/58/album/dsdddd11.png"></a> </div>


 Вариант 3 (Сложный)

Шаг 1 Вставка кнопки вверх / наверх страницы

Кнопка будет работать как ссылка наверх страницы, для этого в самый низ кода шаблона, перед закрывающим тегом </body> ставим следующий код:

 

<a href="#" id="toTop"><img src=http://ageta.ru/images/up1.png border="0" align="absmiddle" /></a>
<script src="http://ageta.ru/js/toTop.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script>

 

Данный текст необходимо, чтобы был на каждой странице вашего сайта, он вызывает скрипт кнопки вверх и присваивает картинку. Если у вас динамический сайт (все CMS, такие как Joomla, WordPress, Drupal и другие CMS являются динамическими, то есть страница формируется в момент обращения к ней), то целесообразно разместить в шаблоне, если вы используете на сайте несколько шаблонов, то тогда во всех используемых шаблонах, а то в противном случае, в шаблонах которых вы не указали не будет этой кнопки.

 

Для кнопки вверх Joomla

Вставить в файл index.php, который находиться ваш_сайт/templates/ваша_тема между тегами <body></body>, я в основном вставляю прядо перед тегом </body>

Для кнопки вверх WordPress

В административной панели, справа в разделе "Внешний вид”->”Редактор”, в файле footer.php между тегами <body></body>, я в основном вставляю прядо перед тегом </body>
Кнопка вверх для UCOZ

В редактировании шаблона (Управление дизайном -- Нижняя часть) в самый низ кода перед закрывающим тегом </body>

Для других CMS и статических сайтов

Если вы уже вставляли счетчики Яндекс Метрика, LiveInternet, то этот код необходимо вставить в тоже место, куда вы и вставляли код для счетчиков. В основном это файлы index.html, index.php шаблонов. Если у вас статический не на cms, то необходимо прописать в каждой странице.

 

Шаг 2 Задать стили для кнопки Вверх / Наверх страницы

 

Необходимо будет создать стили и расположение кнопки наверх. Для этого вам необходимо будет скопировать следующий текст:

 

#toTop {
            position: fixed;
            bottom: 20px;
            right: 2px;
            background: none;
            cursor: pointer;}

 

Их необходимо скопировать туда, где у вас располагаются CSS стили, в основном это файлы с расширением CSS. Какие именно файлы для ряда CMS читайте ниже.

Эти данные можно менять, тем самым меняя оформление кнопки наверх, но об этом поговорим попозже.

Кнопка наверх для Joomla

Вставляем в ваш_сайт/templates/ваша_тема/CSS файлов там с расширением css может быть много, скорее всего это template.css или general.css.

Кнопка наверх для WordPress

Скопировать этот текст в самый низ файла wp-content/themes/ваша_тема/style.css или через административную панель, справа в разделе "Внешний вид”->”Редактор”, файл style.css.
Кнопка наверх для Ucoz

Вставить в низ в Управление дизайном сайта -- Таблица стилей (CSS)

Для других CMS и статических сайтов

Там где задаются стили для вашей страницы, вставить этот код.

 

Шаг 3 Сохранить картинку и скрипт

 

Подобрать и сохранить на сайте картинку

Необходимо сохранить на вашем сайте в папке где хранятся у вас картинки и сменить мой адрес img src=http://ageta.ru/images/up1.png. Также можете залить на файлообменник картинку, только в этом случае, если картинка удалиться, то вы потеряете свою кнопку. А точнее ее изображение. Набор картинок для кнопки наверх я расположил ниже в этой странице.

 

Скачать скрипт

Путь наверх будет прокладываться скриптом, который вы можете получить двумя способами:

Вариант 1 Скачать для кнопки вверх скрипт

Вариант 2 Можете создать файл TXT, открыть блокнотом, внести в него следующий текст:

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

Сохранить и сменить имя и расширение на toTop.js.

 

Этот скрипт кнопки наверх прячет ее, когда вы находитесь вверху страницы и показывает, когда вы начинаете опускаться вниз. Также этот скрипт наверх, задает скорость прокрутки страницы. Его необходимо загрузить на свой сайт, в произвольную директорию. И сменить на шаге 1 мой адрес "http://ageta.ru/js/toTop.js” на свой для для кнопки наверх javascript.

 

Шаг 4 Подключить jQuery

 

На многих сайтах, этот скрипт не будет плавно переносить вверх, а просто будет добавлять "#” и перезагружать сайт, это потому, что jQuery не подключен. Его необходимо подключить. У некоторых, у кого на сайте работает уже что то, на jQuery, то наверняка он уже подключен и не стоит заново подключать.

Чтобы подключить jQuery к сайту, необходимо выполнить следующие действия:

  1. Открываете в текстовом редакторе (я использую Notepad+) для редактирования:
    • Для Joomla, тот же файл, который правили на шаге 1
    • Для WordPress, в редакторе шаблона файл header.php используемой темы
    • Для Ucoz, По умолчанию на каждом uCoz-сайте уже подключена jQuery-библиотека, подключается она всегда перед тегом </head> или после </title> в виде отдельного файла, повторное подключение jQuery может привести к некоторым проблемам.
    • Для других CMS и статических сайтов, если сайт статический (не используется ни какая CMS - движок) - поочередно все страницы сайта, для динамических сайтов на других CMS - ту часть шаблона (темы) где расположена секция HEAD
  2. Находите секцию HEAD - все что находится между открывающим и закрывающим тегами: <HEAD>...</HEAD>.
  3. И добавляете в самый ее конец, перед закрывающим тегом </HEAD> следующий код:

Вариант 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

В данном случае он подключает jquery с google, если вы не хотите использовать со стороннего ресурса, то используйте второй способ.

Вариант 2

Вам необходимо скачать JQuery с сайта производителя, если браузер не скачивает этот файл, то после его открытия можете его сохранить как. Закачиваем файл скрипта на ваш сайт и прописываем к нему путь

<script src="http://ageta.ru/templates/beez_20/js/jquery-1.7.2.min.js"></script>

Смените адрес к своему скрипту и обязательно, чтобы начинался с http://

 

Как сделать вместо картинки текст для кнопки Вверх / Наверх?

 

Для этого вам необходимо будет сделать следующее:

 

Строку:

<a href="#" id="toTop"><img src="http://ageta.tk/images/up1.png" border="0" align="absmiddle" /></a>

Замените на:

<a href="#" id="toTop">Наверх</a>

 

И изменить CSS на:

#toTop {

     width: 89px;

     height: 24px;

     background: #D9DAEE;

     -moz-border-radius: 50px;

     -webkit-border-radius: 50px;

     border-radius: 50px;

     position: fixed;

     bottom: 30px;

     right: 2px;

     text-align: center;

     text-decoration: none;

     font-size: 12pt;

     color: #1A2534;

     cursor: pointer;}

 

Текст может быть различный, но я предложу несколько вариантов "Вверх”, "Наверх”, можете также добавить символы, показывающие вверх "^ ▲ ♂ ꜛ ↑ ᴧ ٨ Λ ˄”. С помощью CSS вы можете сделать различный дизайн кнопки, добавить тень, сделать округлой или наоборот прямоугольной, поиграть цветом текста и фона.

 

Важно! Если у вас выводятся иероглифы, вместо русских букв Наверх, то вам необходимо сохранить файл в кодировке UTF-8 без BOM, тогда у вас выведется корректно русский язык.

image

image

 

Набор картинок для кнопок Вверх, Наверх страницы

Стрелка наверх может выглядеть по-разному. Я решил Вам немного упростить работу и подобрал картинки, перевел их в формат PNG, вырезал фон, чтобы они прозрачны были по контору. Сделал размер максимум 80px, больше вам думаю не понадобиться.

Стрелка для сайта 1Стрелка для сайта 2Стрелка для сайта 3Стрелка для сайта 4Стрелка для сайта 5Стрелка для сайта 6Стрелка для сайта 7Стрелка для сайта 8Стрелка для сайта 9Стрелка для сайта 10Стрелка для сайта 11Стрелка для сайта 12Стрелка для сайта 13Стрелка для сайта 14Стрелка для сайта 15Стрелка для сайта 16Стрелка для сайта 17up5up1Стрелка для сайта 18

 

Можете спокойно ими пользоваться. Редактируйте: меняйте цвет, размер, добавляйте фон и текст. Для того, чтобы скачать их, наведите на понравившуюся картинку и нажмите правую кнопку мышки и выберете сохранить картинку. В стилях CSS помните, что лучше поставьте габариты картинки, чтобы область нажатия на кнопку соответствовали габаритам и картинка не съезжала. Выкладывайте в комментариях разные картинки на кнопку вверх / наверх, желательно в PNG.

 

Как можно изменить отображение кнопки на странице

 

Поизучаем немного CSS. Что для чего нужно, чтобы изменить отображение кнопки вверх страницы

 

CSS стиль для картинки

#toTop {
     position: fixed; /* зафиксировать позицию кнопки на окне браузера, а не на странице сайта. Обязательна, чтобы кнопка не перемещалась со страницей, при прокрутке */
     bottom: 20px; /* отступ от нижнего края на верх станицы */
     right: 2px; /* отступ от правого края на лево */
     background: none; /* задаем, что фона нет, в противном случае, если не зададим при наведении будет выделять картинку, при условии что картинка формата PNG/GIF с прозрачными областями. Если хотите сделать фон, то возьмите параметры из примера ниже */
     cursor: pointer;}  /* при наведении на данную кнопку меняется курсор на "Рука-указатель”, свидетельствующая о том, что это кнопка */

 

CSS стиль для текста

#toTop {

          параметры кнопки

width: 89px; /* ширина кнопки, если вы используете картинку, то целесообразно сделать размеры по картинке или более, если хотите как то обыграть картинку фоном */

height: 24px; /* высота кнопки */

background: #D9DAEE; /* цвет заливки кнопки, если хотите вставить фоном картинку, то можете использовать "background-image: url('/images/sun.gif');”, код цвета можете посмотреть через графические редакторы, к примеру Фотошоп, а какому коду соответствует цвет можете посмотреть на сайте http://rgbcolors.ru  */

          скругление углов кнопки

-moz-border-radius: 50px; /* скругление всех углов для браузеров FireFox. Это свойство идентично по назначению свойству border-radius, было введено в одностороннем порядке браузером Fire Fox и поддерживается только им. */

-webkit-border-radius: 50px; /* скругление всех углов для браузеров Safari и Chrome. Это нестандартное CSS свойство, аналогичное по назначению свойству border-radius */

border-radius: 50px; /* закругленность углов кнопки, согласно правилам CSS 3, но лучше указать все три способа скругления, чтобы корректно выводилось во всех браузерах. Значения во всех должны быть одинаковые */

          позиция кнопки

position: fixed; /* порядок, в соответствии с которым элемент отображается на веб-странице, в данном случае зафиксирован на экране, а не на странице, поэтому он не прокручивается */

bottom: 30px; /* сдвигает нашу кнопку вверх страницы с нижнего края станицы, если поставите значение top, то будет наоборот, сверху вниз */

right: 2px; /* отступ влево от правого края страницы, можете сменить на left и будет отступ вправо с левой стороны страницы */

          параметры текста

text-align: center; /* Выравнивание текста или изображения по центру */

text-decoration: none; /* согласно моих правил CSS, он воспринимал текст как ссылку и подчеркивал, я убрал подчеркивание данной функцией */

font-size: 12pt;   /* задал размер текста "Наверх” */

color: #1A2534; /* цвет текста */

          другое

cursor: pointer;} /* при наведении на кнопку задает вид курсора, в нашем случае логично курсор "Рука-указатель”, свидетельствующий о том, что мы подвели курсор именно к кнопке. Думаю целесообразно оставить как есть */

          так же можно:

background:rgba(255,255,255, 0.2); /* делает прозрачным фон, но цвет необходимо задавать в RGB, можете цвет подобрать через http://www.colorschemer.com/online.html, 0,2 – означает прозрачность 0-полностью прозрачный, 1-не прозрачный */
opacity:0.6; /* если хотите сделать весь элемент прозрачным, то используйте 


В верх страницы

В низ страницы
Категория: Плюшки для сайта | Добавил: powerLORD (10.12.2012)
Просмотров: 11771 | Рейтинг: 5.0/2
Всего комментариев: 0
Имя *:
Email *:
Код *:
Наш опрос
Оцените мой сайт
Всего ответов: 111
Друзья сайта
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Баннеры?!