» »

Красивый низ сайта новостного блога uCoz


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

Найден был в интернете, но с такими ошибками, что пришлось их исправить и он сразу приобрел свой вид. Не стал делать его сильно темный, что то синего немного в стили добавлено. Будет место под краткое описание, что думаю очень важно иметь на главной странице. Также остальные отсеки, если так можно сказать, только под ссылки, что сами можете поставить, какие нужно. Чтоб не был плоским, пришлось от zornet поставить визуальный нижний обзор и там вы можете написать, с какого года вы создали или небольшие правило.

PS - в footer не непременно не одной ссылки на сам дизайн, сделан из каркаса и стилей.

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

С начало ставим скрипт в низ сайта.

Код
<footer>
  <div class="h-container">
  <div class="h-footer-tab">
  <div class="h-footer-1">
  <div class="hf-logo"><i class="fa fa-wifi"></i>ZORNET.RU</div>
  <div class="hf-desc">
Здесь можно написать, кратко о вашем интернет ресурсе, есди брать ZorNet.Ru - то на сайте найдете скрипты и габлоны для uCoz, а также готовые решение по продвижению сайта и полной оптимизаций.
  </div>
  <a href="http://zornet.ru/load/rss" target="_blank">Карта сайта RSS</a> | <a href="http://zornet.ru/sitemap.xml" target="_blank">Общий-Sitemap</a> | $POWERED_BY$
  </div>
  <div class="h-footer-2">
  <div class="hf-title">Новости</div>
  <div class="hf-content">
  <ul>
  <li><a href="#">Свежие новости</a></li>
  <li><a href="#">Новости зарубежныве</a></li>
  <li><a href="#">Актуальные новости</a></li>
  </ul>
  </div>
  </div>
  <div class="h-footer-2">
  <div class="hf-title">Партнеры</div>
  <div class="hf-content">
  <ul>
  <li><a href="#">WebMaster-uCoz.Ru</a></li>
  <li><a href="#">InternetEmpire.Ru</a></li>
  <li><a href="#">Webo4ka.Ru</a></li>
  </ul>
  </div>
  </div>
  <div class="h-footer-2">
  <div class="hf-title">О сайте</div>
  <div class="hf-content">
  <ul>
  <li><a href="#">Наши проекты</a></li>
  <li><a href="#">Наши контакты</a></li>
  <li><a href="#">Наши услуги</a></li>
  </ul>
  </div>
  </div>
  </div>
  </div>
<div class="hf-bottom"><div class="h-container">© 2014 - 2016 «ZorNet.Ru» - все для Web-мастера в системе uCoz</div></div>
</footer>


CSS:

Код
footer {background:#333847;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(255,255,255,0.2);font-size:18px}
.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:#2a2b35;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;}


Вот такой не плохо сделан, и можно с уверенностью сказать стильный материал.
20.04.2016 Просмотров: 524 Комментарий: (7)

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

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

Комментарий: 7
Сафрон
Сафрон 21.04.2016 00:031
0
Вот это понимаю, нормальный низ сайт. забираю, мне просто нравится, когда не каких баннеров и статистик нет, чтоб низ сайта выполнял свою функцию.

Что Костен, рипать научился, или где ты его нашел, просто давно такой подыскиваю.
tsakonter
tsakonter 21.04.2016 00:082
0
Сафрон, тут согласен, что нужно держать информацию в низ сайта, а не баннеры, но точно не статистику, и здесь бы убрать и поставить другое и сразу изменилось бы.
Сопрано
Сопрано 21.04.2016 00:445
0
Нужно следить за своим сайтом, но рекомендаций не когда не помешают, а что это низ сделан под блог, это точно. Можно и на любой сайт поставить, просто название изменить и все, тут смотря какая еще тематика на сайте.
Kosten
Kosten 21.04.2016 00:153
0
Сафрон, ты же в курсе, что рип не для меня, так понимаю как делают, видео смотрел, но пока не пробовал, если только код небольшой вытащить, а низ сайта, а кто то полный шаблон, здесь для меня непонятно, и не интересно.

А что где искать. поиск в интернете, да можно найти, но только старое, что то можно переделать или доработать, чтоб не похоже было. А вот новое что то, все нахожу, не поверишь, в контакте, там реально сколько кодов, главное набрать правильно. там по этим # и что то оригинальное можно найти. Основном не доработано или просто много ошибок, скидывают и вот на этот низ наткнулся, он все сделан как здесь на сайте, просто не догадался сам выкинуть баннеры и сделать все по ссылкам, а так в точности такой можно сказать.
Сафрон
Сафрон 21.04.2016 00:414
0
Да, в курсе этого, не знал что в контакте так много информации. Что поставил уже, сейчас нужно найти под блоки скрипт, где то у тебя видел, вот как раз нужны они мне.
Tergran
Tergran 21.04.2016 00:476
0
Не чего в нем необычного нет, правильно сказали, здесь низ такой же, только немного переделан, и этот цвет, лучше сразу в темный бы сделал.
Kosten
Kosten 21.04.2016 01:027
0
Но цвет может каждый свой сделать, не все под темный делать, хотя сильно под черный не кто и не создает, так темно серый получается.
avatar