Кнопка Скачать для uCoz

Кнопка Скачать для uCoz

09.05.20161479514admin

Данная кнопка примечательна тем, что в ней одной будет умещаться и текст «Скачать» и размер файла. Плюс ко всему, кнопку будет выделять ее яркий цвет и значок со стрелкой справа. Данное оформление применимо не только к сайтам на uCoz.

Вместо надписи «Скачать», например, Вы можете установить «Купить», а в скобках указать стоимость товара. Для бытовой техники, для сайта, где можно приобрести морозильные камеры киев кнопка, я думаю, будет полезна. Оформлений кнопки скачать для uCoz можно приводить сколько угодно, некоторые владельцы сайтов предпочитают просто картинки, кто-то просто ставит ссылку. Согласитесь, что простая ссылка не будет особо выделяться на странице, пользователь будет долго искать кнопку, он может даже не найти ее.

Кнопка Скачать для uCoz – это кнопка, сделанная специально для каталога файлов. Представлено 2 варианта цвета: яблочно зеленый и ярко-синий. При наведении никаких эффектов нет, выглядит кнопка статично.

Зеленая кнопка


Code
<style type="text/css">
.download {background:url('http://s1.uploads.ru/GQB0i.png');width:200px;height:50px;overflow:hidden;margin:0;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.download a, .download a:hover {color:rgba(255,255,255,0.6);font-size:18px;font-family:Arial;display:block;padding:14px;text-decoration:none;text-align:left;font-weight:normal;margin:0;}
.download a span {color:#FFF}
</style>

<div class="download"><a href="#"><span>Скачать</span> ($FILE_SIZE$)</a></div>

Синяя кнопка


Code
<style type="text/css">
.download {background:url('http://s1.uploads.ru/5Fbn3.png');width:200px;height:50px;overflow:hidden;margin:0;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.download a, .download a:hover {color:rgba(255,255,255,0.6);font-size:18px;font-family:Arial;display:block;padding:14px;text-decoration:none;text-align:left;font-weight:normal;margin:0;}
.download a span {color:#FFF}
</style>

<div class="download"><a href="#"><span>Скачать</span> ($FILE_SIZE$)</a></div>

Надеемся, что материал был полезен. Оставьте свое мнение в комментариях. Хоть рубрика и называется скрипты для uCoz, этот материал скриптом назвать нельзя. Просто дело в том, что это прижилось среди Интернет пользователей. Некоторые, например, сразу вводят в поисковой системе «скрипт кнопки скачать для uCoz». Еще следует отметить, что это кнопка подойдет и для других движков, даже для обычного HTML шаблона этот код будет в самый раз. Нужно только убрать стандартный код в скобках, который показывает размер загруженного файла.

В этой кнопке используется простой CSS стиль. В этом стиле используются округления. На самом изображении в PNG формате есть минимальное округление, но его не достаточно. Даже кажется, что кнопка Скачать выглядит квадратное. Советую загрузить картинки фона на свой сайт, т.к. бесплатный хостинг картинок может иногда не работать. В некоторых браузерах Padding (атрибут CSS) воспринимается по разному, поэтому и вид кнопки будет слегка отличаться. К примеру, в браузере IE текст в блоке немного ниже, чем в Google Chrome. Но, тем не менее, выглядит не так плохо, как могло бы быть.

Изображения:




Сохраните в социальную сеть
Комментарии (14)
Гость 06.04.2013 в 18:10Спам
Спасибо,всё работает!
0
Гость 12.05.2013 в 13:55Спам
Куда вставлять код?
0
Гость 29.06.2013 в 14:39Спам
Пожалуйста напишите куда вставлять код а то я чайник
0
Гость 29.06.2013 в 15:44Спам
Вставьте туда, где хотите видеть кнопку. Главное, вместо "#" указывайте ссылку.
0
Гость 01.07.2013 в 13:34Спам
Вставлять в CSS или в шаблоны опишите по подробнее
0
Mr.Yes 01.07.2013 в 22:31Спам
Ну конечно же в шаблоны , где ты видел такой CSS !
0
а ($FILE_SIZE$) это что?
0
timurka19971, размер файла.
-1
Как и куда установитЬ?
0
Виталий 26.04.2014 в 22:46Спам
На странице материалов и комментариев к нему ищешь тэг, который начинается вот так <?if( В нём ищешь следующие строки: "Загрузить" и "Размер файла" Выделяешь его полностью - от <?if( до <?endif?> и вместо него подставдяешь код, который скопировал здесь.
1
Чтоб работало ужно на ссылку поставить $FILE_URL$
0
влад 30.01.2014 в 02:29Спам
ребята куда вставить
-1
Виталий 26.04.2014 в 22:41Спам
($FILE_SIZE$) не правильно. Нужно ($RFILE_SIZE$) А так, вполне. Спасибо.
0
Код нужно вставить в "страницу материала и комментариев к нему", через панель управления. Модуль: Каталог файлов.

(Ну это для тех чайников кто спрашивал)
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт