ZorNet.Ru — сайт для вебмастера » HTML и CSS » Блок пожертвований WebMoney для сайта

Блок пожертвований WebMoney для сайта

Блок пожертвований WebMoney для сайта
Простая форма блока для пожертвования webmoney, так и с Яндекса кошелька, которая очень просто, но ярко выполнена по своему дизайну в CSS. Чтоб изначально понимали, здесь нет не каких функций, блок несет информацию, что будет представлена в виде кнопки, которая относится к закрепленному кошельку. Изначально создавалась форма для светлого сайта, где на темный нужно фигуры менять, что вы можете скачать, так как к этому материалу закреплен архив с иконками. Безусловно веб мастер может все перестроить, как ему лучше, так как основном все построенное с помощью HTML и немного стилей, которые больше отвечают за установку.

Но здесь можно добавить теней или как вы сами видите на своем ресурсе. Главное это изображение, что будет установлена по центру, где по умолчанию идет копилка. Делается для того, чтоб кто-то если нашел на сайте нужный материал или ему помогли, чтоб как раз такая картинка бросалась в глаза, что можно поменять и если устанавливать, то формате PNG, чтоб без заднего фона, как корректнее смотрится.

С начало установил шрифтовые иконки, что шли все по теме, но все же решил перейти на изображение, где было больше цветности. Если ставите шрифт, то кнопки все идут под одну гамму, и сам блок не очень интересно смотрится, что пришлось на красивую видимость перейти.

Так изначально будет смотреться, когда установите на портал.

Красиво сделанная копилка на сайт

Приступаем к установке:

HTML

Код
<div class="vtesakalenta">
<p><img src="http://zornet.ru/ABVUN/sarunolas/23016561.jpg" style="display: block; margin-left: auto; margin-right: auto;" width="150" height="110"></p>
<p><img src="http://zornet.ru/ABVUN/sarunolas/23016226.png" width="17" height="17" style="margin: 0px 0px -3px 0px;"> <strong>Yandex.Money: </strong><span class="zornet">410013024425383</span></p>
<p><img src="http://zornet.ru/ABVUN/sarunolas/23015993.png" width="17" height="17" style="margin: 0px 0px -3px 0px;"> <strong>Webmoney:</strong></p>
<p><img src="http://zornet.ru/ABVUN/sarunolas/23017041.jpg" width="17" height="17" style="margin: 0px 0px -3px 0px;"> R414145545950 <em>(Рубли)</em></p>
<p><img src="http://zornet.ru/ABVUN/sarunolas/23017142.jpg" width="17" height="17" style="margin: 0px 0px -3px 0px;"> Z225954046217 <em>(Доллары)</em></p></div>

CSS

Код
/*=== копилка ===*/
.zornet {
  font-size: 14px;
  line-height: 0px;
  background-color: #f7f7f9;
}

.vtesakalenta{
  margin: 0;
  padding: 0 5px;
}

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

Но и не забываем добавлять кошельки, если он у вас есть, здесь на 3 сделано, с двух интернет площадок, но самые популярные предоставлены.
23 Августа 2018 Загрузок: 4 Просмотров: 1284 Комментариев: (7)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 7
pesd0z
pesd0z 23 Августа 2018 23:001
-2
Это случаем не бесполезный скрипт?: Завтра тут кину хороший скрипт с реквизитами, приятнее:D
Щас нет времени писать, да и завтра мне на учёбу.
Kosten
Kosten 23 Августа 2018 23:192
0
Так в описание больше на дизайн упор был сделан, как и на материале. Где на первом месте идет простота и понятно, чтоб было для всех. Как говорил, шрифтовые иконки подключал, но все под одной гаммой, хоть и увеличивал их, где также пользователи могут сделать.

Но главное, если говорить о шрифтовых кнопках Font Awesome, то там нет иконки на WebMoney, что старательно искал и почему то не нашел, хотя по идее самая актуальная кнопка.
-SAM-
-SAM- 27 Августа 2018 20:134
0
По сути это и не скрипт вовсе, просто блок с выводом реквизитов. Его нужно подстраивать под шаблон своего сайта. В материале дали пример кода, как и выложен набор из изображений - иконок различных платёжных систем (ими и пользуемся, а как уж блок сверстать под свой сайт, да вывести - задача владельца сайта).
P.S.: если про представленный код говорить - ясно же, что просто для примера, как и подгонка была под текущий шаблон на Zornet, но всё же кто брать будет - инлайн-стили нужно переносить в css (раз уж они идут для блока), а у самих изображений прописываем свойства alt или оставляем пустыми (это нужно делать, раз уж картинки идут в код, а не выводятся стилем).
logangl
logangl 27 Августа 2018 19:123
-3
Установил данный "КОД" на свой тестовый сайт.
Скриншот значительно отличается тому, что получилось у меня.


В интернете есть более доработанный СПАМ
waak
waak 27 Августа 2018 23:076
0
Замените фон серый на боле светло серый или белый и добавьте внутренние отступы хотя бы 20px и будет вам то же самое.
Kosten
Kosten 27 Августа 2018 21:465
0
logangl, если вы считаете, что код не доработан, и вы его доработали, то плиз прописываем здесь или указываем на ошибку. А вы просто спамите в комментариях на свой сайт, где не очень хорошо, а точнее предупреждение, все как то самонадеянно делаете.
-SAM-
-SAM- 27 Августа 2018 23:097
0
Тут не в этом дело, а в том, что потянули на свой сайт, переписали код - при этом поломав его... поменяли вообще были название класса .zornet на .cssave и порипали сам код блока с шаблона Zornet (чтобы как на скрине материала было)... и нужные стили потом с правильными названиями не подключили, с учётом всех правок внесённых. И не поставлена ссылка на источник... в данном случае - оно и к лучшему, поскольку материал был поломан при перепубликации (вот и нефиг претензии потом такие писать в комментарии сюда).
P.S.: что идёт всё жирным (скрин смотрим от logangl) - это не проблема этого кода, а проблема по месту (на тестовом сайте цепляются стили от него и перекрывают или выше идёт незакрытых html-тег, что тем самым потом применяется к ниже идущему тексту)... как-то так... что касается фона блока - ясно же, что фон блока идёт от шаблона, куда ставят код из материала.
Войдите:
avatar