Привет читатели блога. Я не надолго вылетела из блоговедения)), подвернулась возможность опробовать свои навыки в ковыряния в шаблоне на blogspot платформе. Результаты оцениваю на 4 бала из 5))). Во первых очень долго, но я сама себя оправдываю, что я все же жена и мама, во вторых шаблон изначально хозяйка устанавливала сама и он нестандартный, а потому пришлось с ним знакомиться с нуля и это то же отняло время.

Ну вот похвалилась, что я стала "авторитетом" и меня просят повозиться с блогом.

Но сегодня не об этом. Не давно на блоге "конкурента" да простит меня Justus (он скорей мой вдохновитель на новые посты, потому  что я частенько подглядываю в его блог, и читаю вопросы его комментаторов. Там частенько беру идеи для постов). Так вот один из его читателей спрашивал про "горизонтальное, плавающее (фиксированное), выпадающее меню". (Это значит что при прокрутке вашего блога, данное меню будет путешествовать вниз или вверх, как ветки елки с игрушками, на многих блогах такое есть). На русской платформе blogspot народные умельцы не придумали такое меню. И тут я вспоминаю, что видела нечто подобное у блоггеров за бугром.

 Оказывается это в последнее время считаться шиком. Кто бы мог подумать...  Злорадно хихикая, я пошла искать, что бы поделиться с вами этим простым в установке, но сложным в освоении скриптом. Но когда чего-то хочется, невозможное становится возможным.
Как это работает смотреть тут

Для тех кто рискнет его применить сам скрипт:
<style>#sbfixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}#sbfixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}* html, * html body{overflow-y:hidden;height:100%;}* html #sbfixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }* html #sbfixedinner{margin-right:17px;}* html #sbfixed {position:absolute;}#sbtop-wrapper{background:#20263c;width:100%;float:left;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid rgb(72, 161, 250);}#sbtopbar{width:980px;height:40px;margin:0 auto}#sbtop{width:100%}#sbtop,#sbtop ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}#sbtop a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}#sbtop a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDicviqXgd9wZNstdHO8B3A516wCqLEj6Qcbez15jZUfV4eDaZXkXHLBUFb0ZA0tUAQ24IuJIw2QwtaoCSFSrMSxkBceP4L_nmXXSBDOwsPTOLUUEqAN4Ti9mVdEcIDqnavvl59sakEJc/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}#sbtop li{float:left;position:static;width:auto}#sbtop li ul,#sbtop ul li{width:170px}#sbtop ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}#sbtop li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}#sbtop li:hover a,#sbtop a:active,#sbtop a:focus,#sbtop li.hvr a{background-color:#222;color:#fff}#sbtop li:hover ul,#sbtop li.hvr ul{display:block}#sbtop li:hover ul a,#sbtop li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}#sbtop li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}#sbtop ul a:hover{background-color:rgb(72, 161, 250)!important;color:#fff!important;text-decoration:none}#sbtop a span,#sbtop a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}#sbtop li:hover a span,#sbtop li:hover a.arrow span{color:#f1c822}</style><div id="sbfixed"><div id="sbfixedinner"><div id="sbtop-wrapper"><div id="sbtopbar"><ul id="sbtop"><li><a href="3"><span>Привет</span>на главную</a></li><li><a href="/"><span>О себе</span>нажать</a></li>><li><a href="3"><span>О Блоге</span>нажать</a></li><li><a href="3"><span>Сладкое</span>торты</a><ul><li><a href="3n">наполеон</a></li><li></li><li><a href="3">медовик</a></li><li></li><li><a href="3n">яблочный</a></li><li></li><li><a href="3">черничный</a></li></ul></li><li><a href="3"><span>Первые</span>блюда</a><ul><li><a href="3r">Борщ</a></li><li></li><li><a href="3">Супы</a></li><li></li><li><a href="3">Щи</a></li><li></li><li><a href="3">Холодец</a></li><li></li><li><a href="3">Жаркое</a></li></ul></li><li><a href="3"><span>Закуски</span>холодные</a><ul><li></li><li><a href="3" rel="nofollow">Бутерброды</a></li><li></li><li><a href="3" rel="nofollow">из теста</a></li><li></li><li><a href="3" rel="nofollow">с икрой</a></li><li></li><li><a href="3" rel="nofollow">паштетом</a></li><li></li><li><a href="3" rel="nofollow">с маслом</a></li></ul></li></ul></div><div style="clear:both;"></div></div></div></div>
Скрипт вставляете в html/JavaSkript

Но прежде чем вставить, этот скрипт вам нужно его довести до логического ума, в смысле что бы он работал корректно на вашем блоге.
Для этого:
Закуски -  и все слова подчеркнутые как это слово ЗАМЕНИТЬ НА СВОЕ.

И самое кропотливое: 
a href="3" цифру 3 надо удалить и вставить адрес. Напримерa href="http://demo-studing-blog.blogspot.com/"- то есть к каждому слову нужно присвоить адрес, куда попадет ваш читатель при нажатии на него.

Если пост оказался полезным не забывайте поделиться и нажать на кнопки социальных сетей.

Скрипт взят отсюда http://www.trueblogtips.com/stylish-floating-header-menu-by/

Система Orphus

13 коммент.:

  1. Опечалили Вы меня своим постом . Зачем перепечатывать что то , совершенно не понимая что это . Автор этого меню , ( кстати - это не скрипт ( если уж Вы об этом пишете ) , это код на CSS и HTML ) , закрывает в nofollow не нужные именно ему подменю , Вы просто копируете данный код и те , кто воспользуется им , получит так же неиндексацию , а вдруг она ему нужна . Анна , пишите уж лучше о своих поделках из бисера , лучше получается . Прощайте .

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

      Удалить
  2. Аня, попробовала на тестовом блоге поставить один к одному, все устанавливается нормально. Возможно так и нужно закрывать подменю nofollow? Все же пишут,что гаджеты рубрики, последние записи(а подменю это те же рубрики)-это для поисковиков дублирование контента.Автор молодец, меню красивое и главное-рабочее. Я пока себе сделала, намучилась с нашими кодами, потому что меню никак не хотело выпадать. Пришлось соединять из двух источников и многое подправлять.Зато осваиваю html/css. Не поняла только зачем к каждому подменю добавлен пустой тег Так что Дмитрий ваш комментарий ни к месту. И что вы такой умный тут искали? Аня, с русским языком будьте внимательнее, очень много ошибок,что портит впечатление

    ОтветитьУдалить
    Ответы
    1. Нина по поводу закрытых ссылок я согласна, видимо автор скрипта это и имел ввиду.
      Любой опыт всегда хорошо.

      Удалить
  3. Аня,

    Спасибо за информации.
    Но пока она для меня слишком сложная ;)

    ОтветитьУдалить
  4. как сделать так, чтобы немного сдвинуть текст, чтобы он был посередине, а не слева?

    ОтветитьУдалить
    Ответы
    1. Попробуйте снова скопировать код, видимо вы что то не захватили, зашла на ваш блог он у вас некорректно работает. Если зайдете на мой демо, уведите как он смотрится правельно

      Удалить
  5. исправил, но мне нужно. чтобы это меню было ещё правее. прямо по центру, а не слева. Спасибо

    ОтветитьУдалить
  6. Я вот так вижу меню https://lh3.googleusercontent.com/-gFxthENM840/UuZwNJfRnXI/AAAAAAAADoI/uLgfpK_oi_g/w1399-h688-no/%25D0%2591%25D0%25B5%25D0%25B7%25D1%258B%25D0%25BC%25D1%258F%25D0%25BD%25D0%25BD%25D1%258B%25D0%25B9.png Вы хотите еще более по центру?

    ОтветитьУдалить
    Ответы
    1. у меня не так почему-то, отображается левее, поэтому мне и нужно подвинуть, не подскажите как?

      Удалить
    2. Скорей всего это из за браузера? На разных браузерах по разному смотрится... с этим ни чего не поделать. У меня стоит по центру вашего блога, как вы сами видите на картинке.

      Удалить
    3. http://shkolablogger.ru/fiksirovannoe-vyipadayushhee-menyu-dlya-blogger.html попробуйте еще спросить тут, человек вроде разбирается больше в расписаниях кодов.

      Удалить
    4. А вы можете сделать меню как на этом сайте? http://www.bloglovin.com/

      Удалить

Есть вопросы? Или просто хочется поговорить? Оставляйте комментарии