« Темный низ(footer) с 4 столбцами, для вашего сайта на uCoz »

Описание материала:

Сидел и думал, что бы залить на сайт, вроде все есть, я не имею виду только свой сайт, и как любому вебмастеру, нам хочется удивить своих пользователей и гостей сайта. И вот я решил выложить на сайт, по моему отличный низ сайта, а еще его называют подвал или footer. Низ сайта сделан в темных тонах, с четырьмя столбцами, в данном случае столбцы называются так - Меню, Партнеры, Блок и Социальные сети, но Вы легко можете их переименовать под себя. А еще, в самом низу, есть простое горизонтальное меню. Ширина подвала автоматическая и он будет красиво смотреть, на любом мониторе вашего компьютера.



Установка:
1. Скачиваем архив с нашего сайта, загружаем папку ie_footer в корень своего сайт
2. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:
Код
/* Темный низ(footer) с 4 столбцами, для вашего сайта на uCoz */
#footer { background: url(/ie_footer/fon.png) repeat 0 0;}
#footer a{ color: #717171; text-decoration: none;}
#footer a:hover{ color: #D5AC59; text-decoration: none;}
#footer .footer-cols { padding: 0 32px 26px; }
#footer .col { width: 212px; float: left; }
#footer .col + .col { padding-left: 22px; }
#footer h2 { font-size: 20px; margin-bottom: 10px; color: #fff; background: url(/ie_footer/cols.png) repeat-x 0 bottom; padding-bottom: 10px; text-shadow: rgba(0,0,0,0.9) 1px 1px 1px; font-weight: 700; text-transform: uppercase; }
#footer .col ul { list-style: none; list-style-position: outside; margin: 0px -40px;}
#footer .col ul a{ color: #717171; text-decoration: none;}
#footer .col ul a:hover{ color: #D5AC59; text-decoration: none;}
#footer .col ul li { padding-left: 11px; background: url(/ie_footer/ar.png) no-repeat 0 3px; padding-bottom: 7px; font-size: 11px; }
#footer .col p { font-size: 11px; color: #fff; }  
#footer .footer-bottom { background: url(/ie_footer/cols.png) repeat-x 0 0; padding: 5px 32px 0; }
#footer .footer-bottom p.copy { float: right; line-height: 14px; font-size: 12px; color: #717171; }
#footer .footer-bottom p.copy a { color: #717171; text-decoration: none; }
#footer .footer-bottom p.copy a:hover { color: #D5AC59; text-decoration: none; }
#footer .footer-nav { float: left; margin: 0px -40px;}
#footer .footer-nav ul { list-style: none; list-style-position: outside; line-height: 11px; }
#footer .footer-nav ul li { float: left; padding: 0 2px; text-shadow: rgba(0,0,0,0.7) 0px 1px 1px; }
#footer .footer-nav ul li:first-child { padding-left: 0; }
#footer .footer-nav ul li a { color: #717171; text-decoration: none;}
#footer .footer-nav ul li a:hover { color: #D5AC59; text-decoration: none;}
#footer .shell { background: url(/ie_footer/shell.png) repeat 0 0; padding: 20px 0; }
.shell { width: 980px; margin: -20px auto; }
/* InternetEmpire.Ru */

3. Заходим в ПУ - Управление дизайном - Нижняя часть сайта и заменяем имеющийся код на этот:
Код
<div id="footer">
<div class="shell">
<div class="footer-cols">
<div class="col">
<h2>Меню сайта</h2>
<ul>
<li><a href="#">Шаблоны для uCoz</a></li>
<li><a href="#">Скрипты для uCoz</a></li>
<li><a href="#">Информеры для uCoz</a></li>
<li><a href="#">PSD Исходники</a></li>
<li><a href="#">CSS Элементы</a></li>
</ul>
</div>
<div class="col">
<h2>Партнеры</h2>
<ul>
<li><a href="#">InternetEmpire.Ru</a></li>
<li><a href="#">WebMaster-uCoz.Ru</a></li>
<li><a href="#">uGuide.Ru</a></li>
<li><a href="#">Zornet.Ru</a></li>
<li><a href="#">Свободно</a></li>
</ul>
</div>
<div class="col">
<h2>Блок</h2>
<ul>
<li><a href="#">Название</a></li>
<li><a href="#">Название</a></li>
<li><a href="#">Название</a></li>
<li><a href="#">Название</a></li>
<li><a href="#">Название</a></li>
</ul>
</div>
<div class="col">
<h2>Соц. сети</h2>
<p>Одноклассники: <a href="#">перейти</a></p>
<p>ВКонтакте: <a href="#">перейти</a></p>
<p>Facebook: <a href="#">перейти</a></p>
<p>Twitter: <a href="#">перейти</a></p>
</div>
 

</div>
<div class="footer-bottom">
<div class="footer-nav">
<ul>
<li><a href="/">Главная</a> <font color="#fff">/</font></li>
<li><a href="/forum">Форум сайта</a> <font color="#fff">/</font></li>  
<li><a href="/load">Каталог файлов</a> <font color="#fff">/</font></li>
<li><a href="/publ">Каталог статей</a> <font color="#fff">/</font></li>
<li><a href="/photo">Фотоальбом</a></li>
</ul>
</div>
<p class="copy"><a title="Лучшее для сайтов в системе uCoz" href="http://internetempire.ru/" target="_blank">InternetEmpire.Ru</a> 2016г. <font color="#fff">|</font> $POWERED_BY$</p>
 

</div>
</div>
</div>


Готово!


Скачать ( Размер архива 252.1 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 909 | Загрузок: 41


Поделиться в соц. сетях:
Комментариев к материалу: 6
Александр 04.03.2016 в 14:51Спам
А можно добавить больше столбцов?
0
Виктор Ягодин 04.03.2016 в 14:55
А зачем Вам больше?
1
Александр 04.03.2016 в 14:58Спам
Мне просто надо увеличить, хочу посмотреть как будет выглядеть.
0
Виктор Ягодин 04.03.2016 в 15:17
Как мы с вами уже решили и увидели, это возможно!)
1
Александр 04.03.2016 в 15:17Спам
Спасибо огромное smile
1
Виктор Ягодин 04.03.2016 в 15:22
Да не за что) biggrin
1
avatar