Как в Blogger Сделать Меню



    Найти выпадающее меню для блоггера не самое сложное занятие, сложно его установить в блог, точнее найти место в котором нужно разместить html код менюшки, потому как шаблоны бывают разные. Так что лучший вариант это выбрать подходящий шаблон в котором будет не только меню, но другие нужные вам виджеты.

    Если все же хотите помучиться, тогда вот инструкция по установке выпадающего меню.

    Blogger: Выпадающее меню с адаптивным дизайном


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

    Скачать код меню

    Чтобы узнать, как его устанавливать посмотрите видео:


    Горизонтальное выпадающее меню второй вариант


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

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

    Так что, если вы ищете для своего блога меню под мобильные устройства, вы попали по нужному адресу. Сегодня в этой статье мы покажем вам, как можно легко добавить на свой блог Mobile Responsive Multi Dropdown Menu. Для устройств с разными расширениями дисплея это меню будет отображаться по разному. Чем меньше расширение, тем компактнее оно будет выглядеть. Чтобы увидеть наше главное меню в действии, перейдите на наш тестовый блог.

    Для того чтобы установить горизонтальное выпадающее меню на свой блог вам нужно открыть раздел Шаблон - Изменить HTML и найти там код ]]></b:skin> перед которым нужно вставить следующий код:

    nav { display: block; margin-top: 100px; background: #374147; } .menu { display: block; } .menu li { display: inline-block; position: relative; z-index: 100; } .menu li:first-child { margin-left: 0; } .menu li a { font-weight: 600; text-decoration: none; padding: 20px 15px; display: block; color: #fff; transition: all 0.2s ease-in-out 0s; } .menu li a:hover,.menu li:hover>a { color: #fff; background: #9ca3da; } .menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 150px; position: absolute; left: 0px; background: #fff; z-index: 99; transform: translate(0,20px); transition: all 0.2s ease-out; } .menu ul:after { bottom: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-left: -6px; } .menu ul li { display: block; float: none; background: none; margin: 0; padding: 0; } .menu ul li a { font-size: 12px; font-weight: normal; display: block; color: #797979; background: #fff; } .menu ul li a:hover,.menu ul li:hover>a { background: #9ca3da; color: #fff; } .menu li:hover>ul { visibility: visible; opacity: 1; transform: translate(0,0); } .menu ul ul { left: 149px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out; } .menu ul ul:after { left: -6px; top: 10%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 6px; margin-top: -6px; } .menu li>ul ul:hover { visibility: visible; opacity: 1; transform: translate(0,0); } .responsive-menu { display: none; width: 100%; padding: 20px 15px; background: #374147; color: #fff; text-transform: uppercase; font-weight: 600; } .responsive-menu:hover { background: #374147; color: #fff; text-decoration: none; } a.homer { background: #9ca3da; } @media (min-width: 768px) and (max-width: 979px) { .mainWrap { width: 768px; } .menu ul { top: 37px; } .menu li a { font-size: 12px; } a.homer { background: #374147; } } @media (max-width: 767px) { .mainWrap { width: auto; padding: 50px 20px; } .menu { display: none; } .responsive-menu { display: block; margin-top: 100px; } nav { margin: 0; background: none; } .menu li { display: block; margin: 0; } .menu li a { background: #fff; color: #797979; } .menu li a:hover,.menu li:hover>a { background: #9ca3da; color: #fff; } .menu ul { visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; transform: initial; } .menu li:hover>ul { visibility: visible; opacity: 1; position: relative; transform: initial; } .menu ul ul { left: 0; transform: initial; } .menu li>ul ul:hover { transform: initial; } } @media (max-width: 480px) { } @media (max-width: 320px) { }

    Затем находим код </body> перед которым нужно добавить следующий код:

    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){ 
     var touch  = $('#resp-menu');
     var menu  = $('.menu');
     
     $(touch).on('click', function(e) {
      e.preventDefault();
      menu.slideToggle();
     });
     
     $(window).resize(function(){
      var w = $(window).width();
      if(w > 767 && menu.is(':hidden')) {
       menu.removeAttr('style');
      }
     });
     
    });
    //]]>
    </script>

    Теперь остался финальный штрих. Код, который мы запишем ниже вам нужно будет вставить в том месте, в котором вы хотите, чтобы появилось меню:

    <nav>
    <a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>    
       <ul class="menu">
       <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
       <ul class="sub-menu">
       <li><a href="#">Sub-Menu 1</a></li>
       <li><a href="#">Sub-Menu 2</a></li>
       <li><a href="#">Sub-Menu 3</a></li>
       <li><a href="#">Sub-Menu 4</a></li>
       <li><a href="#">Sub-Menu 5</a></li>   
       </ul>
       </li>
      <li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
      <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
      <ul class="sub-menu">
       <li><a href="#">Sub-Menu 1</a></li>
       <li><a href="#">Sub-Menu 2</a>
        <ul>
        <li><a href="#">Sub Sub-Menu 1</a></li>
        <li><a href="#">Sub Sub-Menu 2</a></li>
     <li><a href="#">Sub Sub-Menu 3</a></li>
        <li><a href="#">Sub Sub-Menu 4</a></li>
     <li><a href="#">Sub Sub-Menu 5</a></li> 
        </ul>
       </li>
         <li><a href="#">Sub-Menu 3</a>
        <ul>
        <li><a href="#">Sub Sub-Menu 1</a></li>
        <li><a href="#">Sub Sub-Menu 2</a></li>
     <li><a href="#">Sub Sub-Menu 3</a></li>
        <li><a href="#">Sub Sub-Menu 4</a></li>
     <li><a href="#">Sub Sub-Menu 5</a></li> 
        </ul>
       </li>
       </ul>
      </li>
      <li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
        <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
      <ul class="sub-menu">
       <li><a href="#">Sub-Menu 1</a></li>
       <li><a href="#">Sub-Menu 2</a>
        <ul>
        <li><a href="#">Sub Sub-Menu 1</a></li>
        <li><a href="#">Sub Sub-Menu 2</a></li>
     <li><a href="#">Sub Sub-Menu 3</a></li>
        <li><a href="#">Sub Sub-Menu 4</a></li>
     <li><a href="#">Sub Sub-Menu 5</a></li> 
        </ul>
       </li>
         <li><a href="#">Sub-Menu 3</a>
        <ul>
        <li><a href="#">Sub Sub-Menu 1</a></li>
        <li><a href="#">Sub Sub-Menu 2</a></li>
     <li><a href="#">Sub Sub-Menu 3</a></li>
        <li><a href="#">Sub Sub-Menu 4</a></li>
     <li><a href="#">Sub Sub-Menu 5</a></li> 
        </ul>
       </li>
       </ul>
      </li>
      <li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
      <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
      <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
      </ul>
      </nav>

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

    Blogger: Как настроить Главное Меню

    Поскольку есть много новичков которые еще не совсем освоились в блогере, мы решили опубликовать небольшой мануал по настройке главного меню на конструкторе для сайтов - блогов blogger. Если вы создали меню на стороннем конструкторе, тогда этот материал не для вас, но если вы хотите настроить меню зарубежного шаблона или же нашего переведенного шаблона на русский язык, но под свой контент, тогда этот материал как раз для вас. В общем то сложного здесь ничего нет обычно главное меню бывает горизонтальным или вертикальным и при этом и то и другое может иметь свойство выпадения дополнительных ячеек. Факт в том, что большинство вебмастеров отдают предпочтение горизонтальному меню, это связано с тем, что она располагается вверху сайта над контентом и не занимает лишнего места, потому как вертикальное меню не будет смотреться в том же месте его нужно ставить по бокам сайта, где и без того не всегда хватает места.  В общем суть настройки у них одна и та же.

    Для настройки нужно выбрать название одной из ячеек главного меню к примеру на нашем сайте это будет ячейка под названием Интересное. Дальше в панели управления выбираем раздел Тема - Изменить HTML в открывшемся кликните в любом месте левой кнопкой мышки, чтобы оно выбралось и нажмите сочетание клавиш CTRL+F в открывшемся поисковом окошке вводим название ячейки и жмем клавишу Enter. Видим браузер нашел нашу ячейку и заодно остальные ячейки. Теперь название ячейки меняете своими именами, а в местах, где стоит # ставите вместо нее ссылку на ту страницу, которую должна открывать ячейка вашего меню. Жмете сохранить шаблон и проверяете проделанную работу. Если вам нужно добавить ячейку к главному меню копируете уже имеющуюся ячейка и вставляете ее за той, которой она должна идти, только не забудьте поменять название и ссылку.

    Так же не менее важный нюанс, когда вы вставляете ссылку от ярлыка к примеру она выглядит так:

    http://laport.blogspot.com/search/label/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D0%BD%D0%BE%D0%B5?&max-results=7

    тогда шаблон не сохранит, и выдаст ошибку в таком случае в этой ссылке вам нужно вписать amp; окончание ссылки должно выглядеть так ?&amp;max-results=7 После этого шаблон сохранится. 

    На скриншоте мы обвили все описанные выше действия.
    Если вы все равно не поняли, что да как предлагаем вам посмотреть видео инструкцию по настройке главного меню.

    Видео инструкция:


    Настройка меню в Дизайне

    Стандартное выпадающее меню 

    Вы уже знаете, что в блоггере есть стандартное меню (виджет Страницы) в которое можно добавлять не только статические страницы, но и ссылки на любые другие страницы. И по умолчанию в нем нет возможности задать выпадающие ссылки. Вот как раз это мы с вами будем исправлять. Для начала перейдите в панель управления, раздел Дизайн, создайте новый гаджет HTML/Javascript, разместите в нем HTML код:
    <div class="section" id="page_list_top" name="Список страниц (верхний)"><div class="widget PageList" data-version="2" id="PageList1">
    <div class="widget-content">
    <div class="overflowable-container overflowable-3">
    <div class="overflowable-contents">
    <div class="container">
    <ul class="tabs">
    <li class="overflowable-item" aria-hidden="false">
    <a href="#">Главная страница</a>
    </li>
    <li class="overflowable-item" aria-hidden="false">
    <a href="#">Новости</a>
    </li>
    <li class="overflowable-item" aria-hidden="false">
    <a href="#">Скачать игры Torrent</a>
    </li>
    <div class="dropdown">
    <li class="dropbtn"><a href="#"> Dropdown <i aria-hidden="true" class="fa fa-caret-down"></i></a>
    </li>
    <div class="dropdown-content">
    <a href="#">Спорт</a>
    <a href="#">Кино</a>
    <a href="#">Бизнес</a>
    <a href="#">Техника</a>
    <a href="#">Музыка</a>
    <a href="#">Мир</a>
    <a href="#">Здоровье</a>
    </div>
    </div>
    </ul>
    </div>
    
    
    </div>
    </div></div></div></div>

    Сохраните виджет. Теперь перейдите в раздел Тема - Изменить HTML добавьте после тега ]]></b:skin> CSS код:
    <style>
    .tabs-inner {padding: 0;}
    .overflowable-container, #page_list_top .widget.PageList .overflowable-contents, .blog-name, .top-nav .PageList, .centered-top-secondline .PageList ul{overflow:visible;}  
    .tabs-outer{overflow:visible;}
    .tabs .widget ul, .tabs .widget ul{overflow:visible;}  
    .dropdown a:hover {text-decoration:none;}  
    .dropbtn a{color:#!important}
    .dropbtn { border: none; position: relative; color: #cccccc; background: #3330; padding: 0px; float: none!important;} .dropdown { position: relative; cursor: pointer; display:inline-block; margin-right:0px;} .dropdown-content { display: none; position: absolute; min-width: 160px; z-index: 9; margin-top: 0px;} .dropdown-content a { color: #fff!important; padding: 12px 16px; text-decoration: none; display: block; margin-left: 0px; background: #11111175; position: relative; float: left; width: 100%; text-align: left; } .dropdown-content a:hover {background: #!important; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; -webkit-transition: all 0.6s ease-out;} .dropdown:hover .dropdown-content { display: block; } .dropdown-content a:before {content:&quot;&quot;;position:absolute;width:0;left:0;right:0;margin:auto; bottom:5px;height:3px;background:#fff;opacity:0;visibility:hidden;transition: all 0.8s ease-in-out;} .dropdown-content a:hover:before {opacity:1;visibility:visible;width:90%;}
    @media(max-width:700px) {.overflowable-container{display: inline-block;}}
    </style> 
    Сохраните изменения.
    Если используете тему Soho тогда добавьте к CSS еще один кусок:
    li.dropbtn:before { color: rgba(0, 0, 0, 0.54); content: '\00b7'; }
    Видео инструкция:



    Поделиться в социальных сетях:
    Facebook Twitter Vkontakte

    Рекомендуем

    16 Коммент.

    Оставить комментарий
    avatar
    mr_media
    февраля 23, 2019

    Хотел поставить лайк, а некуда... Где кнопка?

    Ответить
    avatar
    Mark Korvin
    февраля 23, 2019

    Спасибо, что указали на этот недочет. Скоро что-то придумаем. А пока, если действительно все понравилось, комментарий с одним банальным словом "Спасибо" будет лучшим лайком.

    Ответить
    avatar
    EBronstein
    мая 07, 2019

    поиск не работает, просто показывает все материалы

    Ответить
    avatar
    EBronstein
    мая 07, 2019

    если не починить, то хоть убрать как? пытался закомментить, но иконка остается, а как ее убрать я хз

    Ответить
    avatar
    Mark Korvin
    мая 07, 2019

    Щас гляну.

    Ответить
    avatar
    Mark Korvin
    мая 07, 2019

    Вот эти две строки:
    <form action='/search/' class='search_box' id='search_box'>
    <input name='search_criteria' placeholder='Поиск' type='text' value=''/>

    Замените на вот эти:
    <form action='/search?q' class='search_box' id='search_box'>
    <input name='q' placeholder='Поиск' type='text' value=''/>

    Ответить
    avatar
    Николай Ксенофонтов
    мая 10, 2019

    На шаблоне Contempo работает отлично. На шаблоне Emporio после установки при открытии сообщения или страницы название блога и строка поиска самого шаблона делит их на две части. Как можно исправить?

    Ответить
    avatar
    Mark Korvin
    мая 10, 2019

    Удалите в CSS строку:
    .centered-top-container.sticky {position: absolute;}

    Чтобы после этого меню не закрывало шапку в сообщениях, вставьте после ]]></b:skin> код:
    <b:if cond='data:blog.pageType != &quot;index&quot;'>
    <style>
    .no-scroll {
    top: 60px!important;
    z-index: 9999;
    }
    </style>
    </b:if>

    Ответить
    avatar
    Николай Ксенофонтов
    мая 10, 2019

    Благодарю!!!
    Все получилось!

    Ответить
    avatar
    Сергей Лукьянов
    августа 05, 2019

    на мобильных устройствах не открывается меню. Просто черная полоса и написано Menu/ Как можно исправить, спасибо!

    Ответить
    avatar
    Mark Korvin
    августа 05, 2019

    Киньте ссылку на блог.

    Ответить
    avatar
    Svetlana
    ноября 08, 2019

    Спасибо. Все получилось

    Ответить
    avatar
    Сергей Дихтяренко
    февраля 24, 2020

    а почему не хотите likebtn.com себе установить - у меня этот вариант плюс разметка гугла отлично работают на блогере и в поиске прилично выглядит даже смена домена решилась парой кликов на сервисе.. понятно что не свое так и блогер же ... может я чего-то не учел

    Ответить
    avatar
    Mark Korvin
    февраля 25, 2020

    Тормозит загрузку страниц.

    Ответить
    avatar
    Дарю радость
    апреля 23, 2020

    Здравствуйте, у меня тема Notable, вставляю меню, все ок за исключением кнопок: Category, Portfolio, Work, Playground, Sitemap. Какую бы ссылку я не ставил на внутрь сайта, на ярлык или просто внешнюю ссылку, кнопки не работают. Почему, понять не могу. Заранее спасибо за ответ. P.S. Написал в youtube, на всякий случай и тут напишу.

    Ответить
    avatar
    Mark Korvin
    апреля 23, 2020

    Привет. Они и не должны открывать ссылки поскольку они содержат выпадающие ячейки. Ячейка Sitemap ссылки открывает, проверено.

    Ответить