Фиксированное нижнее меню с подпиской по email

Просмотров: 410

Приветствую вас, бесценные друзья и товарищи! Просматривал на днях свой Яндекс Диск, чего я там хорошего напихал и обнаружил код нижнего плавающего меню для Blogger. Вот, так то, как повезло, теперь есть тема для поста. Наверное больше полугода пылился файл, видимо настало время сдуть пылюку с него и представить благородной публике его внутренности. И так, ближе к делу.

Сегодня хочу предложить вам для вашего любимого блога фиксированное нижнее меню с подпиской по email. Данное горизонтальное меню/панель будет располагаться в нижней части блога и при прокрутке страниц блога оно всегда будет перед глазами посетителей. Выглядит меню в блоге Blogger так:

Фиксированное нижнее меню
Фиксированное нижнее меню с подпиской по email

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

Горизонтальное фиксированное меню для Blogger

Для того, чтобы установить нижнее фиксированное меню в свой блог, первым делом нужно добавить в шаблон стили CSS. Как обычно делаем, находим строку ]]></b:skin> (подробно как и с видео уроком читаем, смотрим - здесь) и чуть выше неё добавляем код такой:

/*****************************************
Name : Нижнее меню блога Blogger
******************************************/
.content-wrapper {
position : relative;
max-width : 980px;
margin : 0 auto;
}
#BD-bottom-menu{
border-top:3px solid #00CCFF;
z-index:100;
bottom:0;
left:0;
width:100%;
overflow:auto;
position:fixed;
margin:0 0 4px;
padding:8px 0 6px;
height: auto;
background-color: #444;// latar belakang
box-shadow: 1px 0 5px #111;
}
#BD-bottom-menu .left a{
float:left;
border: solid #333333 1px;
text-decoration:none;
color:#C0C0C0;
padding:5px 10px;
margin:0 3px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #515151;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 2px #111;
}
#BD-bottom-menu .left a:hover{
color:#fff;box-shadow:0 0 2px #222;border: solid #111 1px;
background-color: #4D4D4D;text-shadow:none;
}
#BD-bottom-menu .right .BD-box {
margin-bottom : 0px;
padding : 0px;
float: right;
}
#BD-bottom-menu .right .BD-box input {
border : rgb(9, 149, 223) solid 1px;
font-size : 12px;
padding : 5px;
text-shadow : 1px 1px 0 #FFF;
width : 200px;
color : #0000CC;
font-family : georgia;
border : rgb(9, 149, 223) solid 1px;
border-color : #0099FF;
background-color: #EAF8FF;
}
#BD-bottom-menu .right .BD-box input:hover {
background-color: #FFFFFF;
}
#BD-bottom-menu .right .BD-box .submit {
border : rgb(9, 149, 223) solid 2px;
color : #E5E5E5;
cursor : pointer;
font-family : verdana;
font-size : 12px;
padding : 0 0 3px 0;
text-shadow : 1px 1px #111;
text-transform : uppercase;
width : 100px;
height : 25px;
background-color : #0066FF;
border-color : #0099FF;
font-style: italic;
font-weight: bold;
}
#BD-bottom-menu .right .BD-box .submit:hover {
background-color :#0099FF;
color : #FFFFFF;
border-color : #00CCFF;
text-shadow: none;
}
/*** Blog Design CSS нижнее меню ***/

Дизайн меню настраиваете по своему вкусу. Будет видео, друзья и я покажу вам, как легко подобрать цвет для элементов этого меню. Идём далее, находим в шаблоне закрывающий тег </body> и выше его добавляем этот кодик:

<!-- Меню блога start -->
    <br/>
    <br/>
    <div id='BD-bottom-menu'>
      <div class='content-wrapper'>
        <div class='left'>
          <a href='здесь ваша ссылка' rel='nofollow' target='_blank' title='Домашняя страница'>
            Главная
          </a>
          <a href='здесь ваша ссылка' rel='nofollow' target='_blank' title='Содержание архива'>
            Архив блога
          </a>
          <a href='здесь ваша ссылка' rel='nofollow' target='_blank' title='Все статьи'>
            Карта сайта
          </a>
          <a href='здесь ваша ссылка' rel='nofollow' target='_blank' title='Связь с автором'>
            Контакт
          </a>
        </div>
        <div class='right'>
          <div class='BD-box'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ВАШ ID FEEDBURNER &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=600,height=550&apos;);return true' target='popupwindow'>
              <img alt='feedburner' src='https://lh5.googleusercontent.com/--h68rQVZ4V0/UgiYYVLX7XI/AAAAAAAABro/MDwIDY0vTY8/h77/feedburner.png' style='margin-bottom:-9px;' title='feedburner'/>
              <input class='required email' name='email' onblur='if (this.value == &apos;&apos;) this.value = &apos;Enter email here !!&apos;;' onclick='if (this.value == &apos;Enter email here !!&apos;) this.value = &apos;&apos;;' type='text' value='Enter email here !!'/>
              <input class='submit' id='submit' name='submit' title='subscribe' type='submit' value='SUBSCRIBE'/>
              <input name='uri' type='hidden' value='ВАШ ID FEEDBURNER'/>
              <input name='loc' type='hidden' value='ru_RU'/>
            </form>
          </div>
        </div>
      </div>
    </div>

Здесь, в коде HTML вставляем свои ссылки на нужные страницы блога, а также, в двух местах, вместо ВАШ ID FEEDBURNER вписываем ваш фид блога. Сохраняем шаблон и смотрим результат. Вот пожалуй и всё о чём я хотел вам рассказать. Очень надеюсь, что такой метод расположения меню кому нибудь пригодиться. Ах, да. Проанонсирую следующий пост, это будет почти такое же меню, только верхнее и выпадающее. А вот и видео готово, смотрите установку и быстрый подбор цвета элементов данного меню.

Как установить нижнее фиксированное меню в Blogger - Видео

С праздником Пасхи вас, друзья, всего самого хорошего и большой вам удачи в жизни. До встречи на страницах моего блога. Пока, пока.


Оставьте комментарий