ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Темный и стильный низ сайта ProKus для uCoz

Темный и стильный низ сайта ProKus для uCoz

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

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

Установка:

Давайте для начало информер сделаем, заходим в админ панель, нажимаем на информер и потом создать, и вот по таким параметром.

[ Счетчики для пользователей · Материалы · всех, по группам, по полу, по зодиаку, по дням (сегодня, вчера, 7 дней, 30 дней) ]

И все от туда убираем и ставим наш код.

Код

<li><img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/lastpost.png"><span style="color:#FFFAFA;"> Зарегистрирована: <span>$ALL_USERS$</span></li>
<li><img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/lastpost.png"><span style="color:#FFFAFA;"> Новых сегодня: <span>+ $TODAY$</span></li>

Теперь нам нужно прописать стили в CSS:

Код

footer {background: #2F2D2D;color:#fff}
footer a {color:rgba(255,255,255,0.6);text-decoration:none;}
footer a:hover {color:rgba(255,255,255,0.8);}
footer a:hover {border-bottom: 0px solid rgba(255,255,255,0.3);}
.h-footer-tab {display:table;width:100%;padding:45px 0px;}
.h-footer-1, .h-footer-2 {display:table-cell;vertical-align:top;padding-right:30px}
.h-footer-2 {width:20%;}
.h-footer-2:hover .hf-title {border-color: #49D1FE;}
.hf-title {padding:14px 0px;padding-bottom:20px;border-top: 2px solid rgba(189, 189, 189, 0.2);font-size: 16px;}
.hf-content ul, .hf-content li {padding:0px;margin:0px}
.hf-content li {list-style-type:none;margin-bottom:10px}
.hf-logo i {margin-right:9px;opacity:0.5}
.hf-logo {font-size:18px;color:rgba(255,255,255,0.4);font-weight:bold;cursor:default}
.hf-desc {font-size:13px;color:rgba(255,255,255,0.8);padding:15px 0px}
.hf-bottom {background: #252525;padding:30px 0px}
.h-top-link, .h-top-link:hover {display:none;cursor:pointer;width:48px;line-height:48px;text-align:center;background:#ff8839;color:#fff;position:fixed;right:30px;bottom:30px;border:0px!important;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;}
.h-container {width:1150px;margin:0px auto;}
.fa {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

Идем в низ сайта и также все убираем и ставим наш скрип каркаса.

Код

<footer>
  <div class="h-container">
  <div class="h-footer-tab">
  <div class="h-footer-1">
  <div class="hf-logo"><i class="fa fa-thumbs-o-up"></i>ZORNETR.RU</div>
  <div class="hf-desc">
Здесь можно написать, кратко о вашем интернет ресурсе, есди брать ZorNet.Ru - то на сайте найдете скрипты и габлоны для uCoz, а также готовые решение по продвижению сайта и полной оптимизаций.
  </div>
  <a href="#" target="_blank">Карта сайта RSS</a> | <a href="#" target="_blank">Общий-Sitemap</a> | $POWERED_BY$
  </div>
  <div class="h-footer-2">
  <div class="hf-title">Статистика</div>
  <div class="hf-content">
  <ul>
$ONLINE_COUNTER$$ONLINE_USERS_LIST$
</ul>
  </div>
  </div>
  <div class="h-footer-2">
  <div class="hf-title">Пользователь</div>
  <div class="hf-content">
  <ul>

$MYINF_13$
  </ul>
  </div>
  </div>
  <div class="h-footer-2">
  <div class="hf-title">Баннеры</div>
  <div class="hf-content">
  <ul>
  <li><a href="#"><a href="http://zornet.ru/"><img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/45630245.png" border="0" title="Описание сайта" width="88" height="31"></a></a></li>
  <li><a href="#"><a href="http://zornet.ru/"><img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/45630245.png" border="0" title="Описание сайта" width="88" height="31"></a></a></li>
  </ul>
  </div>
  </div>
  </div>
  </div>
<div class="hf-bottom"><div class="h-container">© 2011 - 2016 ZorNet.ru – сайт на тематику система uCoz, где собраны оригинальные решение.</div></div>
</footer>

Но это не все, мы видим перед надписью ZORNET красивый лайк, это совершенно другой стиль и здесь уже вам решать ставить или нет.

Если решили установить, то вверх сайта в самом потолке ставим стили в head это будет шрифтовые иконки, если можно так назвать.

Код

Их можно взять на этом сайте и там найти и что то свое поставить, и так если вы установили, теперь по всему сайту можно устанавливать их.

22 Апреля 2016 Просмотров: 2790 Комментариев: (15)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

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

Комментарии: 15
Порядок вывода комментариев: Сафрон 22 Апреля 2016 01:19¹ 0 Но этот больше понравился чем предыдущий, но я не об этом. Костен, не понимаю, вот ты изменил низ сайта, поставил информер и баннеры, да можно сказать что он изменен, но это может каждый сделать, давай еще что нибудь с этого низа сделай. Не против этого, просто можно в комментариях этого низ сайта написать. Kosten 22 Апреля 2016 01:29² 0 Сафрон, где то с тобой согласен, что с одного скрипта делать 2 как то не очень, но здесь реально много что исправлено а точнее одно убираем и ставим другое, как первый низ, он шел вообще новостным. Это не какой статистики, а только написано информация. Но и ты согласись. что на сайт не матерые веб мастера заходят, и если есть выбор, то это хорошо. Если хотят что то понять. но на форуме много информации, и также могут задать вопрос. HAKER23 22 Апреля 2016 10:50³ -4 Лучшие игровые сервера Counter-Strike:Source v34. Присоединяйся к нам, у нас тысячи человек играют на наших серверах! Игровое сообщество СПАМ. good8671 28 Мая 2016 15:24⁴ 0 можно сделать что бы баннеры в 2 колонки были? Kosten 28 Мая 2016 16:01⁵ 0 Можно, почему бы и нет, должно по идее все нормально получиться. good8671 28 Мая 2016 16:52⁶ 0 а как это сделать? Kosten 28 Мая 2016 16:58⁷ 0 Сейчас посмотрим, на тестовый перекину, чтоб там сразу и установить и что получиться. Kosten 28 Мая 2016 17:11⁸ 0 Так вот как получилось на четыре баннера в низ сайта, по моему даже красивей чем 2 было. Но и безусловно сейчас можно поставить больше счетчиков или рекламы. В низ сайта: Код <footer> <div class="h-container"> <div class="h-footer-tab"> <div class="h-footer-1"> <div class="hf-logo"><i class="fa fa-thumbs-o-up"></i>ZORNETR.RU</div> <div class="hf-desc"> Здесь можно написать, кратко о вашем интернет ресурсе, есди брать ZorNet.Ru - то на сайте найдете скрипты и габлоны для uCoz, а также готовые решение по продвижению сайта и полной оптимизаций. </div> <a href="#" target="_blank">Карта сайта RSS</a> \| <a href="#" target="_blank">Общий-Sitemap</a> \| $POWERED_BY$ </div> <div class="h-footer-2"> <div class="hf-title">Статистика</div> <div class="hf-content"> <ul> $ONLINE_COUNTER$$ONLINE_USERS_LIST$ </ul> </div> </div> <div class="h-footer-2"> <div class="hf-title">Пользователь</div> <div class="hf-content"> <ul> $MYINF_13$ </ul> </div> </div> <div class="h-footer-2"> <div class="hf-title">Баннеры</div> <div class="hf-content"> <ul> <ul> <noindex> </noindex><table> <tbody><tr> <td> <li><a href="#"><a href="http://zornet.ru/"><img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/45630245.png" border="0" title="Описание сайта" width="88" height="31"></a></a></li></td> <td> <li><a href="#"><a href="http://zornet.ru/"><img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/45630245.png" border="0" title="Описание сайта" width="88" height="31"></a></a></li></td> </tr> <tr> <td> <li><a href="#"><a href="http://zornet.ru/"><img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/45630245.png" border="0" title="Описание сайта" width="88" height="31"></a></a></li></td> <td><li><a href="#"><a href="http://zornet.ru/"><img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/45630245.png" border="0" title="Описание сайта" width="88" height="31"></a></a></li></td> </tr> </tbody></table> </ul> </div> </div> </div> </div> <div class="hf-bottom"><div class="h-container">© 2011 - 2016 ZorNet.ru – сайт на тематику система uCoz, где собраны оригинальные решение.</div></div> </footer> Стили оставляем те же, что в материале. good8671 28 Мая 2016 17:33¹⁰ 0 Спасибо большое, все получилось. Сафрон 28 Мая 2016 17:18⁹ 0 Но если смотреть на сам дизайн низ сайта, то там и должно быть 4 баннера, или 2 по ширине, но не как не по вертикале, но теперь кому как, можно выбрать. upiter9988 10 Января 2017 23:42¹¹ 0 Можете адаптировать данный низ сайта под андроид а то низ сайта расширяется у меня на планшете. Шапка сама у меня 120з пикселей и она нормально отображается как на пк так и на планшете, кроме футера Kolinkor 11 Января 2017 10:09¹² 0 Можно здесь же адаптирован, не думаю что чем то отличается этот низ сайта, просто найти кто сможет. Kosten 03 Декабря 2019 20:52¹³ 0 Аналогичный формат в адаптивном виде можно найти на форуме, так как на нем предоставлена тема низ сайта, где идет отличная подборка низ для сайта в различном дизайне.
1 2 »