Подвал (футер) WordPress как создать, как изменить. Подвал сайта html и css

05 Апр 2017

В этой статье мы поговорим про подвал (футер) WordPress, а именно, как самому создать подвал сайта и как изменить подвал сайта в WordPress. «Подвал сайта html» и «Подвал сайта css» очень популярные поисковые фразы, начинающие веб-мастера хотят получить готовые коды html и css для создания подвала. Готовый код подвала для WordPress можно найти чуть ниже. На CMS WordPress футер можно создать самому, а сам процесс достаточно легкий. Если вас интересует вопросы «Как в WordPress изменить подвал»и «Как сделать футер в WordPress», эта статья будет вам полезна.

Плейлист «Как создать сайт на WordPress»

TimeWeb лучший хостинг для WordPress: домен в подарок, 99 рублей в месяц.
Попробуйте, 10 дней бесплатно: РЕГИСТРАЦИЯ ОБЗОР ВИДЕО

Чтобы сайт выделялся среди сотен тысяч подобных, веб-мастер должен придумать что-нибудь оригинальное в его дизайне. Безусловно, визитная карточка сайта это шапка. Но и футер сайта достаточно важный элемент любого интернет ресурса. Если сайт привлекателен, удобен для посетителей и продуман в каждой детали, шансы сделать его популярным значительно возрастают.Подвал сайта примеры html. Подвал на этом блоге я создал самостоятельно при помощи различных html кодов, которые совместил воедино. Спустись вниз страницы, посмотрите на футер. Мой подвал сайта обладает различными элементами, счетчиками, ссылками на популярные статьи блога. Помимо всего прочего в подвале сайта я разместил горизонтальное меню. На мой взгляд, подвал на блоге Busines-Expert неплохо смотрится, плюс помогает посетителям найти нужную им информацию.

Подвал сайта код. Вот такой код размещен у меня в подвале вместе с счетчиками, ссылками и меню (стили подключены к html странице, то есть их не нужно добавлять в файл css.style), добавляем его в файл footer.php в самый низ после всех записей:

<body>
<div style="position: relative; text-align: center; overflow: hidden; top: 0; left: 0; height: 100%; width: 100%"><img src='http://busines-expert.com/wp-content/uploads/2016/10/futer-saita.png'></div>

<div style="float: left; position: relative; width: 100%; height: 100%; left: 10px; top: 55px; margin-top: -80px; text-align: left; color: #fff;"> © 2015-2017 Busines-Expert.com. Все права защищены. Все о заработке в интернете</div>
   <div style="float: left; position: relative; margin: 0 auto; width: 33%; height: 100%; left: 615px; top: 49px; margin-top: -80px;"> 
<a target="_blank" href="https://www.bestchange.ru/?p=33854"><img src="http://www.bestchange.ru/images/banners/88x31-5.gif" alt="Лучший обменник WM" title="BestChange.ru - Мониторинг обменников в интернете" width="88" height="31" border="0" /></a></div>
<div style="float: left; position: relative; margin: 0 auto; width: 33%; height: 100%; left: 705px; top: 49px; margin-top: -80px;"> 
<a href="http://mmgp.ru/?referrerid=295457" target="_blank"><img src=" http://busines-expert.com/wp-content/uploads/2016/09/mmgp.gif " border="0" width="88" height="31" alt=" mmgp"/></a></div>
<div style="float: left; position: relative; margin: 0 auto; width: 33%; height: 100%; left: 795px; top: 49px; margin-top: -80px;"> 
<!-- Yandex.Metrika informer -->
<a href="https://metrika.yandex.ru/stat/?id=33936684&amp;from=informer"
target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/33936684/3_0_86D2FFFF_66B2FFFF_0_pageviews"
style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" onclick="try{Ya.Metrika.informer({i:this,id:33936684,lang:'ru'});return false}catch(e){}" /></a>
<!-- /Yandex.Metrika informer -->

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
    (function (d, w, c) {
        (w[c] = w[c] || []).push(function() {
            try {
                w.yaCounter33936684 = new Ya.Metrika({
                    id:33936684,
                    clickmap:true,
                    trackLinks:true,
                    accurateTrackBounce:true,
                    webvisor:true
                });
            } catch(e) { }
        });

        var n = d.getElementsByTagName("script")[0],
            s = d.createElement("script"),
            f = function () { n.parentNode.insertBefore(s, n); };
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://mc.yandex.ru/metrika/watch.js";

        if (w.opera == "[object Opera]") {
            d.addEventListener("DOMContentLoaded", f, false);
        } else { f(); }
    })(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/33936684" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --></div>

<div style="float: left; position: relative; margin: 0 auto; width: 33%; height: 100%; left: 885px; top: 49px; margin-top: -80px;"> 
<!-- Rating@Mail.ru logo -->
<a href="http://top.mail.ru/jump?from=2772985">
<img src="//top-fwz1.mail.ru/counter?id=2772985;t=479;l=1" 
style="border:0;" height="31" width="88" alt="Рейтинг@Mail.ru" /></a>
<!-- //Rating@Mail.ru logo -->

<!-- Rating@Mail.ru counter -->
<script type="text/javascript">
var _tmr = window._tmr || (window._tmr = []);
_tmr.push({id: "2772985", type: "pageView", start: (new Date()).getTime()});
(function (d, w, id) {
  if (d.getElementById(id)) return;
  var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
  ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js";
  var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};
  if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }
})(document, window, "topmailru-code");
</script><noscript><div style="position:absolute;left:-10000px;">
<img src="//top-fwz1.mail.ru/counter?id=2772985;js=na" style="border:0;" height="1" width="1" alt="Рейтинг@Mail.ru" />
</div></noscript>
<!-- //Rating@Mail.ru counter --></div>

<div style="float: left; position: relative; margin: 0 auto; width: 33%; height: 100%; left: 975px; top: 49px; margin-top: -80px;"> 
<!--LiveInternet counter--><script type="text/javascript"><!--
document.write("<a href='//www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t18.6;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet: показано число просмотров за 24"+
" часа, посетителей за 24 часа и за сегодня' "+
"border='0' width='88' height='31'><\/a>")
//--></script><!--/LiveInternet-->
</div>

<div style="float: left; position: relative; margin: 0 auto; width: 33%; height: 100%; left: 1064px; top: 49px; margin-top: -80px;"> 
<a href="http://www.youtube.com/c/BusinesExpert"><img src="http://busines-expert.com/wp-content/uploads/2016/10/podpiska-na-kanal.png" width="88" height="31" border="0" /></a>
</div>


<div style="width: 100%; height: 0px; z-index: 0; color: #ffba00;"> 
   <div style="float: left; position: relative; text-align: center; width: 100%; height: 100%; left: 15px; top: -490px; margin-top: -80px; border-right: 1px solid #fff; text-align: left; font-size: 12pt;"> 
   <h3>Популярные статьи:</h3> 
   <ul style="text-align: left;"> 
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00;font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/vse-stati/">Карта сайта</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/luchshie-igry-s-vyvodom-deneg/">Лучшие игры с выводом денег</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/avtoserfing/">Автосерфинг</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/igra-taxi-money/">Лучший проект 2017 года</a></span></li>
&nbsp; 
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/zarabotok-na-youtube/">Все о заработке на YouTube</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/investicionnyj-portfel-ot-busines-expert/">Инвестиционный портфель</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/kak-zarabotat-v-internete-bez-vlozhenij/">Заработок без вложений</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/kak-privlech-referalov/">Как привлечь рефералов</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/zarubezhnye-buksi/">Заработок на буксах</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/zarabotok-na-klikax-i-zadaniayh/">Подработка для начинающих</a></span></li>
</ul> 
</div>

</div>
</div>
</body>
</html>






<div class="row">
<span class="header"></span>
<nav class="horizontal-nav center-nav">
  <ul>
    <li><a href="http://busines-expert.com/">Главная</a></li>
    <li><a href="http://busines-expert.com/vse-stati/">Все статьи</a></li>
    <li><a href="http://busines-expert.com/uslugi/">Услуги</a></li>
    <li><a href="http://busines-expert.com/kontakty/">Контакты</a></li>
    <li><a href="http://busines-expert.com/investicionnyj-portfel-ot-busines-expert/">Инвестиции</a></li>
    <li><a href="http://busines-expert.com/sposoby-zarabotka/">Способы заработка</a></li>
    <li><a href="http://busines-expert.com/dlya-chego-sozdan-blog-busines-expert/">О проекте</a></li>
  </ul>
</nav>
</div>
<style type="text/css">
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}

.row .header {
  font-size: 9pt;
  text-transform: uppercase;
  font-weight: bold;
  color: #0078c9;
  text-align: center;
  width: 100%;
  display: block;
  margin-bottom: 0px;
}


/* Общие стили */

nav.vertical-nav ul > li > a,
nav.horizontal-nav ul > li > a {
  background-color: 0078c9;
  color: #ffba00;
  text-decoration: underline;
  font-size: 12pt;
  float: left;
}

nav.horizontal-nav ul > li > a,
nav.vertical-nav ul > li {
  display: block;
}


nav.left { float: left; }
nav.right { float: right; }

nav.center-nav ul {display: table; margin: 0 auto;}

/* Горизонтальное меню */
nav.horizontal-nav,
nav.vertical-nav {
  position: relative;
}

nav.horizontal-nav ul,
nav.vertical-nav ul {
  list-style: none;
}

nav.horizontal-nav ul > li {
  display: inline-block;
  float: left;
}

nav.horizontal-nav ul > li > a {
  padding: 10px 20px;
}

nav.horizontal-nav ul > li > a:hover,
nav.horizontal-nav ul > li > a:active,
nav.horizontal-nav ul > li > a:focus,
nav.vertical-nav ul > li > a:hover,
nav.vertical-nav ul > li > a:active,
nav.vertical-nav ul > li > a:focus {
    background-color: rgba( 8, 0, 0, 0.25);
    color: #ffffff; 
}
</style>

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


Как прижать (закрепить) футер к низу страницы. Первый фрагмент кода отвечает за его расположение. Устанавливаем ширину 100% (width: 100%), тем самым мы растягиваем подвал, это означает, что наш футер будет автоматически растягиваться и подстраиваться под размеры всех типов устройств. Теперь и на экранах с большим разрешением и на мобильных устройствах наш подвал будет отображаться корректно. С этим разобрались, в этой же части кода подгружаем нужное вам фото (замените ‘http://busines-expert.com/wp-content/uploads/2016/10/futer-saita.png’ на путь к вашей картинке):

<div style="position: relative; text-align: center; overflow: hidden; top: 0; left: 0; height: 100%; width: 100%"><img src='http://busines-expert.com/wp-content/uploads/2016/10/futer-saita.png'></div>

Как добавить счетчик в подвал WordPress. Следующий фрагмент кода позволяет прописать авторство (копирайт) и вывести один или несколько счетчиков посещений или любые другие информативные кнопки. Чтобы прописать ваш копирайт, замените этот текст в коде на свой: «© 2015-2017 Busines-Expert.com. Все права защищены. Все о заработке в интернете». Что касается счетчиков, каждый нужно выводить персонально. К каждому счетчику нужно задать координаты вывода, чтобы они корректно отображались в нужных местах. В коде ниже все счетчики выведены горизонтально друг за другом:

<div style="float: left; position: relative; width: 100%; height: 100%; left: 10px; top: 55px; margin-top: -80px; text-align: left; color: #fff;"> © 2015-2017 Busines-Expert.com. Все права защищены. Все о заработке в интернете</div>
   <div style="float: left; position: relative; margin: 0 auto; width: 33%; height: 100%; left: 615px; top: 49px; margin-top: -80px;"> 
<a target="_blank" href="https://www.bestchange.ru/?p=33854"><img src="http://www.bestchange.ru/images/banners/88x31-5.gif" alt="Лучший обменник WM" title="BestChange.ru - Мониторинг обменников в интернете" width="88" height="31" border="0" /></a></div>
<div style="float: left; position: relative; margin: 0 auto; width: 33%; height: 100%; left: 705px; top: 49px; margin-top: -80px;"> 
<a href="http://mmgp.ru/?referrerid=295457" target="_blank"><img src=" http://busines-expert.com/wp-content/uploads/2016/09/mmgp.gif " border="0" width="88" height="31" alt=" mmgp"/></a></div>
<div style="float: left; position: relative; margin: 0 auto; width: 33%; height: 100%; left: 795px; top: 49px; margin-top: -80px;"> 
<!-- Yandex.Metrika informer -->
<a href="https://metrika.yandex.ru/stat/?id=33936684&amp;from=informer"
target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/33936684/3_0_86D2FFFF_66B2FFFF_0_pageviews"
style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" onclick="try{Ya.Metrika.informer({i:this,id:33936684,lang:'ru'});return false}catch(e){}" /></a>
<!-- /Yandex.Metrika informer -->

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
    (function (d, w, c) {
        (w[c] = w[c] || []).push(function() {
            try {
                w.yaCounter33936684 = new Ya.Metrika({
                    id:33936684,
                    clickmap:true,
                    trackLinks:true,
                    accurateTrackBounce:true,
                    webvisor:true
                });
            } catch(e) { }
        });

        var n = d.getElementsByTagName("script")[0],
            s = d.createElement("script"),
            f = function () { n.parentNode.insertBefore(s, n); };
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://mc.yandex.ru/metrika/watch.js";

        if (w.opera == "[object Opera]") {
            d.addEventListener("DOMContentLoaded", f, false);
        } else { f(); }
    })(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/33936684" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --></div>

<div style="float: left; position: relative; margin: 0 auto; width: 33%; height: 100%; left: 885px; top: 49px; margin-top: -80px;"> 
<!-- Rating@Mail.ru logo -->
<a href="http://top.mail.ru/jump?from=2772985">
<img src="//top-fwz1.mail.ru/counter?id=2772985;t=479;l=1" 
style="border:0;" height="31" width="88" alt="Рейтинг@Mail.ru" /></a>
<!-- //Rating@Mail.ru logo -->

<!-- Rating@Mail.ru counter -->
<script type="text/javascript">
var _tmr = window._tmr || (window._tmr = []);
_tmr.push({id: "2772985", type: "pageView", start: (new Date()).getTime()});
(function (d, w, id) {
  if (d.getElementById(id)) return;
  var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
  ts.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//top-fwz1.mail.ru/js/code.js";
  var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};
  if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }
})(document, window, "topmailru-code");
</script><noscript><div style="position:absolute;left:-10000px;">
<img src="//top-fwz1.mail.ru/counter?id=2772985;js=na" style="border:0;" height="1" width="1" alt="Рейтинг@Mail.ru" />
</div></noscript>
<!-- //Rating@Mail.ru counter --></div>

<div style="float: left; position: relative; margin: 0 auto; width: 33%; height: 100%; left: 975px; top: 49px; margin-top: -80px;"> 
<!--LiveInternet counter--><script type="text/javascript"><!--
document.write("<a href='//www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t18.6;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet: показано число просмотров за 24"+
" часа, посетителей за 24 часа и за сегодня' "+
"border='0' width='88' height='31'><\/a>")
//--></script><!--/LiveInternet-->
</div>

<div style="float: left; position: relative; margin: 0 auto; width: 33%; height: 100%; left: 1064px; top: 49px; margin-top: -80px;"> 
<a href="http://www.youtube.com/c/BusinesExpert"><img src="http://busines-expert.com/wp-content/uploads/2016/10/podpiska-na-kanal.png" width="88" height="31" border="0" /></a>
</div>

Как изменить координаты счетчика или информативного блока или ссылки в подвале. Давайте рассмотрим на примере вот этой части кода:

<div style="float: left; position: relative; margin: 0 auto; width: 33%; height: 100%; left: 1064px; top: 49px; margin-top: -80px;"> 
<a href="http://www.youtube.com/c/BusinesExpert"><img src="http://busines-expert.com/wp-content/uploads/2016/10/podpiska-na-kanal.png" width="88" height="31" border="0" /></a>

За изменение координат расположения отвечают команды left и top (на картинке сверху это «left: 1064px; top: 49px»). Чтобы передвинуть проект направо, напротив команды left ставим число, которое больше 1064px. Чтобы передвинуть проект налево, напротив команды left ставим число, которое меньше 1064px. Чтобы передвинуть проект вверх, напротив команды top ставим число, которое больше 49px. Чтобы передвинуть проект вниз, напротив команды top ставим число, которое меньше 49px.

 

Точно также можно передвигать любые проекты не только в подвале, но и в шапке, сайдбарах и виджетах сайта.

Как вывести произвольные ссылки в футере сайта (информационный блок). Следующий фрагмент кода выводит в левой части футере ссылки на популярные статьи моего блога. Вам нужно изменить название и саму ссылки на ваши. В данном случае блок выравниваем по левому краю, в коде это выглядит так: float: left;.Также, вы можете менять расположение всего блока, размер шрифта, его стиль и так далее:

<div style="width: 100%; height: 0px; z-index: 0; color: #ffba00;"> 
   <div style="float: left; position: relative; text-align: center; width: 100%; height: 100%; left: 15px; top: -490px; margin-top: -80px; border-right: 1px solid #fff; text-align: left; font-size: 12pt;"> 
   <h3>Популярные статьи:</h3> 
   <ul style="text-align: left;"> 
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00;font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/vse-stati/">Карта сайта</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/luchshie-igry-s-vyvodom-deneg/">Лучшие игры с выводом денег</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/avtoserfing/">Автосерфинг</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/igra-taxi-money/">Лучший проект 2017 года</a></span></li>
&nbsp; 
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/zarabotok-na-youtube/">Все о заработке на YouTube</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/investicionnyj-portfel-ot-busines-expert/">Инвестиционный портфель</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/kak-zarabotat-v-internete-bez-vlozhenij/">Заработок без вложений</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/kak-privlech-referalov/">Как привлечь рефералов</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/zarubezhnye-buksi/">Заработок на буксах</a></span></li>
&nbsp;
<li><span style="font-family: 'arial black', sans-serif; color: #ffba00; font-size: 14pt; text-decoration: underline;"><a style="color: #ffba00;" href="http://busines-expert.com/zarabotok-na-klikax-i-zadaniayh/">Подработка для начинающих</a></span></li>
</ul> 
</div>

Как сделать меню в футере WordPress. Следующий фрагмент кода отвечает за вывод меню. Опять же, меняете названия ссылок и ссылки на ваши. CSS cтили включены в код!

<div class="row">
<span class="header"></span>
<nav class="horizontal-nav center-nav">
  <ul>
    <li><a href="http://busines-expert.com/">Главная</a></li>
    <li><a href="http://busines-expert.com/vse-stati/">Все статьи</a></li>
    <li><a href="http://busines-expert.com/uslugi/">Услуги</a></li>
    <li><a href="http://busines-expert.com/kontakty/">Контакты</a></li>
    <li><a href="http://busines-expert.com/investicionnyj-portfel-ot-busines-expert/">Инвестиции</a></li>
    <li><a href="http://busines-expert.com/sposoby-zarabotka/">Способы заработка</a></li>
    <li><a href="http://busines-expert.com/dlya-chego-sozdan-blog-busines-expert/">О проекте</a></li>
  </ul>
</nav>
</div>
<style type="text/css">
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}

.row .header {
  font-size: 9pt;
  text-transform: uppercase;
  font-weight: bold;
  color: #0078c9;
  text-align: center;
  width: 100%;
  display: block;
  margin-bottom: 0px;
}


/* Общие стили */

nav.vertical-nav ul > li > a,
nav.horizontal-nav ul > li > a {
  background-color: 0078c9;
  color: #ffba00;
  text-decoration: underline;
  font-size: 12pt;
  float: left;
}

nav.horizontal-nav ul > li > a,
nav.vertical-nav ul > li {
  display: block;
}


nav.left { float: left; }
nav.right { float: right; }

nav.center-nav ul {display: table; margin: 0 auto;}

/* Горизонтальное меню */
nav.horizontal-nav,
nav.vertical-nav {
  position: relative;
}

nav.horizontal-nav ul,
nav.vertical-nav ul {
  list-style: none;
}

nav.horizontal-nav ul > li {
  display: inline-block;
  float: left;
}

nav.horizontal-nav ul > li > a {
  padding: 10px 20px;
}

nav.horizontal-nav ul > li > a:hover,
nav.horizontal-nav ul > li > a:active,
nav.horizontal-nav ul > li > a:focus,
nav.vertical-nav ul > li > a:hover,
nav.vertical-nav ul > li > a:active,
nav.vertical-nav ul > li > a:focus {
    background-color: rgba( 8, 0, 0, 0.25);
    color: #ffffff; 
}
</style>

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

Опубликовано в Как создать сайт. Пошаговая инструкция
Советую посетить следующие страницы:
Подвал сайта оформление и редактирование
 Как сделать меню в html и css
 Как установить счетчик посещений на сайт
✓ Комментарии Вконтакте для сайта WordPress
 Плагин WP Quads. Как разместить рекламу на сайте

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Лучший
курс обмена
BestChange.ru – популярный сервис по подбору выгодных обменных пунктов электронных валют, который поможет вам производить свои обмены безопасно и с минимальными потерями на комиссиях.
Обменять
на

Последнее на YouTube

Популярное на YouTube
© 2015-2017 Busines-Expert.com. Все права защищены. Все о заработке в интернете
Лучший обменник WM
 mmgp
Яндекс.Метрика
Рейтинг@Mail.ru