Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

Панель навигации для подвала блога

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

В статье фиксированная панель в нижней части блога был предложен ещё один пример с использованием JavaScript. Начинающим блогерам, установка панели навигации, которую предлагаю сегодня, не составит труда. Код устанавливается в гаджет HTML/JavaScript.

При любом разрешении экрана панель будет видна в определённом месте. Посмотрите пример на тестовом блоге в футоре.

Давайте перейдём к реализации. Сначала скопируйте в блокнот следующий код HTML, где создадим списки элементов с содержанием и кнопами соц.сетей.

<div id="stickey_footer">
<ul id="footer_menu">
 <li><a href="http://www.shpargalochki.ru/ ">Главная</a></li>
 <li><a href="http://www.shpargalochki.ru/p/blog-page_1.html ">Содержание</a></li>
 <li><a href="http://www.shpargalochki.ru/p/blog-page_29.html">Об авторе</a></li>
 <li><a href="http://www.shpargalochki.ru/p/blog-page_2746.html">Форма связи</a></li>

 </ul>

 <ul id="social_icons">
 <li><a href="#" ><img src='http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png' alt=" Твиттер" /><span>Twitter</span></a></li>
 <li><a href="#" ><img src='http://s019.radikal.ru/i618/1406/40/71d113bc8bce.png' alt="Гугл+" /><span>Гугл+</span></a></li>
 <li><a href="#" ><img src='http://s52.radikal.ru/i137/1406/1d/b342e2f0d04f.png' alt="youtube" /><span>youtube</span></a></li>
 <li><a href="#" ><img src='http://i069.radikal.ru/1406/d9/74471340c15b.png' alt="Фейсбук" /><span>Facebook</span></a></li>
 </ul>

</div>


Если есть необходимость, можно добавить ещё пункты меню и иконок, добавляя соответственно -

<li><a href="http://www.shpargalochki.ru/ ">Главная</a></li>

 <li><a href="#" ><img src='http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png' alt=" Твиттер" /><span>Twitter</span></a></li>

То, что выделено красным цветом, это адреса ваших страниц и адрес картинки-иконки. Вместо решёток пишите свои адреса в социальных сетях.

Чтобы придать большей уникальности панели навигации, сделайте свои иконки. Об этом здесь.

Сейчас копируйте код CSS, где зададим стили.Они достаточно простые фон, тень, закругление углов и расположение кнопок.

<style>#stickey_footer {
 background: none repeat scroll 0 0 #2F4F4F;
 border: 1px solid rgba(0, 0, 0, 0.3);
 bottom: 0;
 font-family: Arial, Helvetica, sans-serif;
 height: 40px;
 left: 50%;
 margin: 0 auto 0 -490px;
 padding: 0 10px;
 position: fixed;
 text-shadow: 1px 1px 1px #000000;
 width: 960px;
}

#stickey_footer {
 -moz-border-radius: 10px 10px 0px 0px;
 -webkit-border-radius: 10px 10px 0px 0px;
 border-radius: 10px 10px 0px 0px;
}

#stickey_footer:hover {
 background: none repeat scroll 0 0 #8FBC8F;
}

#stickey_footer {
 -moz-box-shadow:0px 0px 11px #191919;
 -webkit-box-shadow:0px 0px 11px #191919;
 box-shadow:0px 0px 11px #191919;
}
#footer_menu {
 margin: 0;
 padding: 0;
 width:auto;
}
#footer_menu li {
 list-style: none;
 float: left;
 font-size:12px;
 padding: 12px 14px 14px 14px;
 border-right:1px solid rgba(0, 0, 0, 0.4);
 background: rgba(0, 0, 0, 0.1);
}
#footer_menu .imgmenu {
 padding:5px 8px 3px 14px;
 float:left;
 background:url("images/home.png") 13px 5px no-repeat;
 width:36px;
 height:30px;
 border:none;
 border-right:1px solid rgba(0, 0, 0, 0.4);
 cursor:pointer;
}
#footer_menu li:hover {
 background:#202020;
 background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
 background:url("images/home_hover.png") 13px 5px no-repeat;
}
#footer_menu li a {
 display: block;
 color: #cccccc;
 text-decoration: none;
}
#footer_menu li a:hover {
 color: #ffffff;
}
#footer_menu li span {
 display:none;
}
#stickey_footer #social_icons {
 float:right;
 width:auto;
 margin:5px 15px 0px;
 padding:0px;
 overflow:hidden;
}
#stickey_footer #social_icons li {
 margin-right:30px;
 float:left;
 width:24px;
 padding:0px;
 height:32px;
 list-style:none;
 _margin-right:0px;
}</style>


Тут, думаю, всё понятно. Отметила цвет фона панели, цвет при наведении курсора, тень. В конце кода позиционирование иконок относительно правого края.

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

В гаджет HTML/JavaScript устанавливайте первый код, под ним второй и сохраняйте. Переместите его куда-нибудь в нижнею часть макета и не забудьте сохранить расположение.

Вот и всё. Поверьте, когда вы сделаете такую фиксированную панель навигации, вашим посетителям будет намного проще ориентироваться.

У меня всё. Спасибо за ваше внимание и до новых встреч.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


16 комментариев:

  1. Надо попробовать. Если, что с меня вопросы :)

    ОтветитьУдалить
  2. Привет, Ирина. Тут главное иконки свои можно подобрать а с цветом и размерами всегда пожалуйста, обращайся. Мне вот своя нижняя уже поднадоела. Поработаю над дизайном. Да и этот вариант что в статье более лёгкий для блога.

    ОтветитьУдалить
  3. Каждый раз, читая Ваши рекомендации, я с восхищением думаю, как же мне хочется во всем этом разбираться, понимать и осознавать. Пока что я могу только копировать какие-то действия, не понимая, как все это устроено изначально.
    Спасибо за очередной урок, как раз сейчас занимаюсь оформлением и настройкой своего блога.
    Буду Вам очень благодарна за все уроки по этой теме!

    ОтветитьУдалить
    Ответы
    1. Любовь, если есть желание обязательно потихоньку разберётесь. Все мы с чего-то начинали. Будут какие-то трудности или вопросы обращайтесь, помогу чем могу. Спасибо вам за визит и комментарий.

      Удалить
  4. Спасибо! Удобно! Вика, спасибо!

    ОтветитьУдалить
    Ответы
    1. Ирина, я быстренько уже сбегала к тебе в библиомир. И правда, у тебя так здорово всё вписалось. Вообще блог стал как - то интереснее выглядеть. Молодец.

      Удалить
    2. ну так - нет предела совершенства!:))) ЭТО благодаря Катюше ( и тебе конечно!) Она меня поругала - я чуть чуть исправилась. Сейчас вот закончу летние мероприятия и будем с Катей улучшать дальше.
      Про нижнюю панель - Виииик, а нельзя сделать так, чтобы те разделы, которые в верней панели не повторялись в нижней? Точнее: можно ли убрать некоторые названия в верхней панели, а оставить только в нижней? Чтобы не повторялись. Я так подумала:)) ( что уже смешно!) и поняла, что нельзя. Если только оставить в верхней панели страницу без названия:)) Но тогда там будет просто пустое место в строке панели. А это наверное не красиво будет. Но вдруг.... :))

      Удалить
    3. Ирина, то что тебе надо кучу гаджетов убрать, говорила я по-моему года 2назад. А насчёт разделов, можешь ведь вставлять в нижнюю, да и в верхнюю что хочешь. Допустим свою страницу о блоге, об авторе ты хочешь видеть только на нижней панели . Зайди во вкладку дизайн, гаджет страницы. там есть функция где нужно отметить , какие не надо хочешь отобразить, а какие нет . Они никуда не денутся, поскольку уже опубликованы. Просто не будут отображаться вверху.Теперь ту можешь их убрать в нижнюю панельку. Зайди в админке на страницы, выбери нужную нажми просмотреть. В строке браузера будет ссылка на неё. Копируй и вставляй в код нижней панели. На эту тему подробнее здесь http://www.shpargalochki.ru/2014/03/delaem-podstranicy-v-bloge.html

      Удалить
  5. Викусь, привет! Говорила же "я подумала" уже смешно звучит:)) ну конечно же!! Я совсем забыла про ту галочку. на страницах.:)) вот что бы я без тебя делала!!!!

    ОтветитьУдалить
    Ответы
    1. Ирина, отдыхать тебе пора. ОТДЫХАТЬ. И про все галочки вспомнишь.

      Удалить
    2. Да я бы с удовольствием , но я ведь в школе работаю, а школа -это организм без отдыха... иначе ничего не успеешь. лагерь, отчеты, проверки, новые учебники до 3000 экз получить- распаковать-пропечатать-разложить, работа с формулярами -перевести в сл. класс 1700 шт- вообщем бррр!

      Удалить
    3. Ирина, я понимаю на сколько работа тяжёлая. Но она тебе нравится о это видно.Что ж, придётся напоминать , мне нетрудно. Но всё же отдыхать надо по возможности.

      Удалить
    4. Спасибо Вика! я не против! но вот невестка по моему уже обиделась за внука! Я согласна помогать. сидеть с ним, но я не согласна ЖИТЬ с ним постоянно! Мне тяжело: сердце не дает развернуться во всю ширь, работа, да и Данька такой шебутной!!!А получается. что я с ним каждый день...в течении месяца .Такой необходимости с ним быть постоянно нет - есть папа. мама. садик...Ну вот и заикнулась об отдыхе- по моему она обиделась. Ничего не сказала, но не звонит уже неделю.
      Вот тебе и отдых! :))

      Удалить
  6. Вик, а почему у меня после публикации поста в гугл + появляются 2 сообщения о новом посте? Публикую один раз, а появляются 2 сообщения? Да еще момент публикации тормозит:((

    ОтветитьУдалить
    Ответы
    1. Ирина, моё мнение на этот счёт однозначно-дети должны жить отдельно от родителей. Хватит уже. Тишины и покоя уже хочется. Да уж о каком отдыхе может идти речь когда целый день в заботе. Должно быть у каждого личное пространство. У меня сын месяц гостит и то голова кругом идёт. Столько места кажется занимает. Большой и громкий. И то голова как арбуз. Сочувствую тебе.
      Насчёт Гугл , если я правильно тебя поняла, вот тут статейка про это http://ru-google-os.blogspot.ru/2013/09/automatically-share-blogger-posts-on-google-plus.html
      С праздником!

      Удалить
    2. С Праздником Вика! Спасибо -"щас "зайду

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML