Раздвижная панель меню на jquery

menju-jqueryВсем доброго дня, дорогие друзья! Очень рад нашей новой встрече на страницах моего замечательного блога, № 1 в интернете и во всей вселенной. Надеюсь лето не будет вам помехой, чтобы заниматься своим любимым детищем - блогом на Blogger. И поэтому сегодня вашему вниманию хочу представить очень полезную фишку для блога это - меню на jquery или раздвижная панель. С помощью данной панели вы сможете освободить драгоценное место на боковой панели своего блога, для более полезных виджетов или контекстной рекламы.

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

Вид закрытой панели:

razdvizhnaja-panel'
Раздвижная панель

Вид открытой панели:

razdvizhnaja-otkrytaja-panel'
Раздвижная открытая панель

А вот по этой ссылке можно попробовать панель в живую - http://ifashion-rustemplate.blogspot.ru/

Как установить раздвижное меню на jquery в Blogger

Дамы и господа я не буду переводить иностранные слова на русский, так как, все всё равно напишут только им нужные слова, по своему желанию. Поехали. Друзья, делаем всё внимательно, копируем код и скрипты до последней запятой, вставляем всё в нужные места шаблона и так далее. Первым делом вам нужно будет найти в вашем шаблоне строку  <head> ( в начале ) и чуть ниже вставить скрипт:

Далее, ищем тег </head> и чуть выше вставляем стили для нашей красивой панельки:

Обратите внимание, здесь вы можете изменить высоту панели, если вам нужно больше места - height: 230px;, а также поменять цвет фона background: #272727; и многое другое. И наконец финал для нашего великолепного оформления блога, добавим HTML код панели чуть выше строчки <body> в вашем шаблоне блога:

Всё, готово. Осталось заменить английские слова, заполнить меню, вписать аккаунты в соцсетях и так далее. Если хотите поменять картинку автора блога, тогда замените http://1.bp.blogspot.com/-J8r3gQVzSSE/Uv5nM4vluSI/AAAAAAAAGJk/Np7Vu3uVxwU/s1600/profile-pic.png на своё изображение. Вот вроде и всё. Надеюсь для вас было полезно. До новых встреч. Пока, пока.

Панель позаимствована из буржунета - helplogger



Комментарии

  • Спасибо! Поделилась этой полезной информацией в фейсбуке и гугле.
    Думаю, что будет интересна многим…

  • Добрый день!
    А возможно такое меню реализовать на Google Sites? Там, как то с этим бедно, Blogger более гибкий. 🙂

    • Привет, Евгений! Нет, на Google Сайты не пойдёт.Там вообще мало возможностей, что либо применить своё.А с Blogger можно делать, что угодно. 🙂

  • Здравствуйте. Классная панель футера. Но…. Хотел себе установить, сделал все как у Вас описано, но панель установилась вверху блога, над шапкой. Открывается и закрывается. Не пойму в чем тут дело, хотя я и не спец в кодах. Может подскажете что делать. Спасибо.

    • Вячеслав, где вы увидели, что панель предназначена для подвала. Или вы с другой целью написали комментарий? 🙂

  • Просто я видел такую панель внизу сайта. У некоторых футер такой. Думал и ваш код для установки внизу сайта. Просто в кодах я не силен и что изменить я не знаю.

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

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

Решите задачку: *