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

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

22016-05-091943214Денис Абдуллин

Данная кнопка примечательна тем, что в ней одной будет умещаться и текст «Скачать» и размер файла. Плюс ко всему, кнопку будет выделять ее яркий цвет и значок со стрелкой справа. Данное оформление применимо не только к сайтам на 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. Но, тем не менее, выглядит не так плохо, как могло бы быть.

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


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (14)
Влад Файзрахманов 2014-11-08 в 23:35 / МатериалСпам
Чтоб работало ужно на ссылку поставить $FILE_URL$
1
Виталий 2014-04-26 в 22:41 / МатериалСпам
($FILE_SIZE$) не правильно. Нужно ($RFILE_SIZE$) А так, вполне. Спасибо.
0
влад 2014-01-30 в 02:29 / МатериалСпам
ребята куда вставить
0
Кирилл Малевич 2014-01-12 в 18:32 / МатериалСпам
Как и куда установитЬ?
1
Тимур Хамадеев 2013-10-02 в 21:37 / МатериалСпам
а ($FILE_SIZE$) это что?
0
Илья Дементьев 2013-10-02 в 21:44 / МатериалСпам
timurka19971, размер файла.
-1
Виталий 2014-04-26 в 22:46 / МатериалСпам
На странице материалов и комментариев к нему ищешь тэг, который начинается вот так <?if( В нём ищешь следующие строки: "Загрузить" и "Размер файла" Выделяешь его полностью - от <?if( до <?endif?> и вместо него подставдяешь код, который скопировал здесь.
1
Гость 2013-07-01 в 13:34 / МатериалСпам
Вставлять в CSS или в шаблоны опишите по подробнее
0
Mr.Yes 2013-07-01 в 22:31 / МатериалСпам
Ну конечно же в шаблоны , где ты видел такой CSS !
0
Гость 2013-06-29 в 14:39 / МатериалСпам
Пожалуйста напишите куда вставлять код а то я чайник
1
Гость 2013-06-29 в 15:44 / МатериалСпам
Вставьте туда, где хотите видеть кнопку. Главное, вместо "#" указывайте ссылку.
0
Гость 2013-05-12 в 13:55 / МатериалСпам
Куда вставлять код?
0
Гость 2013-04-06 в 18:10 / МатериалСпам
Спасибо,всё работает!
0
Иван Савельев 2016-07-04 в 13:01 / МатериалСпам
Код нужно вставить в "страницу материала и комментариев к нему", через панель управления. Модуль: Каталог файлов.

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