Среда, 27.11.2024, 21:44

Мой сайт

Скрипты,шаблоны для ucoz


Новый Футер для сайта uCoz
10.01.2016, 15:43
Что сказать вам, особо нечего кроме того что много кто просит у меня низ сайта (footer) который стоит на нашем сайте, делать нечего так как мы и созданы для того что бы помогать тем кто не умеет по той или иной причине делать сам.

Сегодня в этом материале я хочу предоставить вам эту возможность и установить на свой сайт низ (footer) как у нас на сайте а точнее сказать он же и есть.

HTML Код
Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<footer>
  <div id="footer">
  <div class="wrappers">

<div id="bottom">
<div id="bot-i">  
<aside>  
<div class="footer_sidebox"><div class="footer_title"><span>Официальные сайты uCoz</span><span class="ttl-d"></span></div>
<div class="inner">
<ul>
  <li><i class="fa fa-users" style="color: rgb(86, 160, 204); font-size: 17px;"></i><a href="http://forum.ucoz.ru/" target="_blank" rel="nofollow">Forum.ucoz.ru сообщество uCoz</a></li>
  <li><i style="color: rgb(86, 160, 204); font-size: 17px;" class="fa fa-cogs"></i><a href="http://www.ucoz.ru/qa/" target="_blank" rel="nofollow">uВопросы по сайтам uCoz</a></li>
<li><i style="color: rgb(86, 160, 204); font-size: 17px;" class="fa fa-comments-o"></i><a href="http://blog.ucoz.ru/" target="_blank" rel="nofollow">Официальный блог компании uCoz</a></li>
</ul>
</div>
<div class="clr"></div>
</div>
   
   
<div class="footer_sidebox"><div class="footer_title"><span>Друзья нашего сайта</span><span class="ttl-d"></span></div>
<div class="inner">
<ul>
<li><i class="fa fa-check-square-o" style="color: rgb(86, 160, 204); font-size: 17px;"></i><a href="http://cstavr.ru" target="_blank" rel="nofollow">Фильмы HD 720 качество онлайн</a></li>
<li><i class="fa fa-check-square-o" style="color: rgb(86, 160, 204); font-size: 17px;"></i><a href="http://css-ultimatum.ru" target="_blank" rel="nofollow">Counter Strike: Source - Дополнения к игре</a></li>
<li><i class="fa fa-check-square-o" style="color: rgb(86, 160, 204); font-size: 17px;"></i><a href="/" target="_blank" rel="nofollow">Место свободно</a></li>
</ul>
</div>
<div class="clr"></div>
</div>
   
   
  <div class="footer_sidebox"><div class="footer_title"><span>Пустой блок</span><span class="ttl-d"></span></div>
<div class="inner">
<ul>
<li><i class="fa fa-check-square-o" style="color: rgb(86, 160, 204); font-size: 17px;"></i><a href="/" target="_blank" rel="nofollow">Место свободно</a></li>
<li><i class="fa fa-check-square-o" style="color: rgb(86, 160, 204); font-size: 17px;"></i><a href="/" target="_blank" rel="nofollow">Место свободно</a></li>
  <li><i class="fa fa-check-square-o" style="color: rgb(86, 160, 204); font-size: 17px;"></i><a href="/" target="_blank" rel="nofollow">Место свободно</a></li>
</ul>
</div>
<div class="clr"></div>
</div>
</aside>
</div>
</div>
  <div class="foot-l">
Наш сайт настроен помогать тем кто в первые начал создавать и делать сайты в системе uCoz.
  </div>
  <div class="foot-r">$POWERED_BY$</div>
  <div class="clr"></div>
  </div>
  </div>
</footer>


CSS Код
Код
#footer {width: 980px; background: #3a3a3a; padding-top: 10px; color: #FFF; margin: 0 auto;}
.foot-l {float:left; width:87%; font-size: 13px;}
.foot-r {float: right; width: 10%; text-align: right; margin-right: 25px;font-size: 13px;}
.wrappers {width: 1000px;}
.wrappers {margin: 0 auto;padding: 0 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
#bottom .footer_sidebox { float: left; padding: 0 15px 10px 15px; background: none; }
.footer_title { font-size: 18px; color: #FFF; padding-bottom: 10px; }
.inner { padding: 5px 2px 15px 2px; }
.footer_sidebox ul { margin: 0; list-style: none; padding: 0; border-spacing: 0; }
.footer_sidebox li { margin-bottom: 11px; }
.footer_sidebox li a { padding: 0 0 0 5px; color: #fff; text-decoration: none; opacity: .7; -moz-opacity: .7; filter: alpha(opacity=70); }
.footer_sidebox li a:hover { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); }


И так просто перенесите HTML Код в нижнюю часть вашего сайта предварительно всё там удалив, затем скопируйте CSS Код и добавьте их в самый низ стилей вашего сайта.

Установка завершена и footer установлен на ваш сайт.
Категория: Скрипты для uCoz | Добавил: Дмитрий
Просмотров: 1574 | Загрузок: 0 | Комментарии: 7 | Рейтинг: 5.0/2
Всего комментариев: 7
Прикольно низ реально симпотяжный
0
Дмитрий 10.01.2016 в 15:57 / Материал
Думаю пользователю narkoz73 пригодиться этот материал.
1
Ну спасибо за материал)))
0
Дмитрий 10.01.2016 в 16:14 / Материал
Рад что пригодился!
0
mikadmen 29.01.2016 в 17:01 / МатериалСпам
как уменьшить в высоту подскажите пожалуйста
0
Дмитрий 29.01.2016 в 17:08 / Материал
Высота зависит от того что у вас там, чем меньше ссылок в столбике тем меньше, или отступы нужно уменьшать так сразу не скажешь .
0
mikadmen 29.01.2016 в 23:00 / МатериалСпам
понятно я уже сделал спс
0
avatar
Категории раздела
Скрипты для uCoz [188]
Шаблоны для uCoz [80]
Графика для сайта [29]
Программы для сайта [5]
uCoz уроки [19]
Web статьи [4]
VIP работы [3]
Поиск
Вход на сайт
Наш опрос
Хотели бы Вы создать бизнес вместе с Ucoz (Uweb)?
Мини-чат
Друзья сайта
Статистика

Сейчас онлайн: 8
Гостей: 8
Пользователей: 0