В статье фиксированная панель в нижней части блога был предложен ещё один пример с использованием 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>
<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>
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 устанавливайте первый код, под ним второй и сохраняйте. Переместите его куда-нибудь в нижнею часть макета и не забудьте сохранить расположение.
Вот и всё. Поверьте, когда вы сделаете такую фиксированную панель навигации, вашим посетителям будет намного проще ориентироваться.
У меня всё. Спасибо за ваше внимание и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
Надо попробовать. Если, что с меня вопросы :)
ОтветитьУдалитьПривет, Ирина. Тут главное иконки свои можно подобрать а с цветом и размерами всегда пожалуйста, обращайся. Мне вот своя нижняя уже поднадоела. Поработаю над дизайном. Да и этот вариант что в статье более лёгкий для блога.
ОтветитьУдалитьКаждый раз, читая Ваши рекомендации, я с восхищением думаю, как же мне хочется во всем этом разбираться, понимать и осознавать. Пока что я могу только копировать какие-то действия, не понимая, как все это устроено изначально.
ОтветитьУдалитьСпасибо за очередной урок, как раз сейчас занимаюсь оформлением и настройкой своего блога.
Буду Вам очень благодарна за все уроки по этой теме!
Любовь, если есть желание обязательно потихоньку разберётесь. Все мы с чего-то начинали. Будут какие-то трудности или вопросы обращайтесь, помогу чем могу. Спасибо вам за визит и комментарий.
УдалитьСпасибо! Удобно! Вика, спасибо!
ОтветитьУдалитьИрина, я быстренько уже сбегала к тебе в библиомир. И правда, у тебя так здорово всё вписалось. Вообще блог стал как - то интереснее выглядеть. Молодец.
Удалитьну так - нет предела совершенства!:))) ЭТО благодаря Катюше ( и тебе конечно!) Она меня поругала - я чуть чуть исправилась. Сейчас вот закончу летние мероприятия и будем с Катей улучшать дальше.
УдалитьПро нижнюю панель - Виииик, а нельзя сделать так, чтобы те разделы, которые в верней панели не повторялись в нижней? Точнее: можно ли убрать некоторые названия в верхней панели, а оставить только в нижней? Чтобы не повторялись. Я так подумала:)) ( что уже смешно!) и поняла, что нельзя. Если только оставить в верхней панели страницу без названия:)) Но тогда там будет просто пустое место в строке панели. А это наверное не красиво будет. Но вдруг.... :))
Ирина, то что тебе надо кучу гаджетов убрать, говорила я по-моему года 2назад. А насчёт разделов, можешь ведь вставлять в нижнюю, да и в верхнюю что хочешь. Допустим свою страницу о блоге, об авторе ты хочешь видеть только на нижней панели . Зайди во вкладку дизайн, гаджет страницы. там есть функция где нужно отметить , какие не надо хочешь отобразить, а какие нет . Они никуда не денутся, поскольку уже опубликованы. Просто не будут отображаться вверху.Теперь ту можешь их убрать в нижнюю панельку. Зайди в админке на страницы, выбери нужную нажми просмотреть. В строке браузера будет ссылка на неё. Копируй и вставляй в код нижней панели. На эту тему подробнее здесь http://www.shpargalochki.ru/2014/03/delaem-podstranicy-v-bloge.html
УдалитьВикусь, привет! Говорила же "я подумала" уже смешно звучит:)) ну конечно же!! Я совсем забыла про ту галочку. на страницах.:)) вот что бы я без тебя делала!!!!
ОтветитьУдалитьИрина, отдыхать тебе пора. ОТДЫХАТЬ. И про все галочки вспомнишь.
УдалитьДа я бы с удовольствием , но я ведь в школе работаю, а школа -это организм без отдыха... иначе ничего не успеешь. лагерь, отчеты, проверки, новые учебники до 3000 экз получить- распаковать-пропечатать-разложить, работа с формулярами -перевести в сл. класс 1700 шт- вообщем бррр!
УдалитьИрина, я понимаю на сколько работа тяжёлая. Но она тебе нравится о это видно.Что ж, придётся напоминать , мне нетрудно. Но всё же отдыхать надо по возможности.
УдалитьСпасибо Вика! я не против! но вот невестка по моему уже обиделась за внука! Я согласна помогать. сидеть с ним, но я не согласна ЖИТЬ с ним постоянно! Мне тяжело: сердце не дает развернуться во всю ширь, работа, да и Данька такой шебутной!!!А получается. что я с ним каждый день...в течении месяца .Такой необходимости с ним быть постоянно нет - есть папа. мама. садик...Ну вот и заикнулась об отдыхе- по моему она обиделась. Ничего не сказала, но не звонит уже неделю.
УдалитьВот тебе и отдых! :))
Вик, а почему у меня после публикации поста в гугл + появляются 2 сообщения о новом посте? Публикую один раз, а появляются 2 сообщения? Да еще момент публикации тормозит:((
ОтветитьУдалитьИрина, моё мнение на этот счёт однозначно-дети должны жить отдельно от родителей. Хватит уже. Тишины и покоя уже хочется. Да уж о каком отдыхе может идти речь когда целый день в заботе. Должно быть у каждого личное пространство. У меня сын месяц гостит и то голова кругом идёт. Столько места кажется занимает. Большой и громкий. И то голова как арбуз. Сочувствую тебе.
УдалитьНасчёт Гугл , если я правильно тебя поняла, вот тут статейка про это http://ru-google-os.blogspot.ru/2013/09/automatically-share-blogger-posts-on-google-plus.html
С праздником!
С Праздником Вика! Спасибо -"щас "зайду
Удалить