Сегодняшняя тема посвящена тому, как добавить виджет выпадающего меню Underscore в blogger , он сильно отличается от любого другого виджета меню, потому что вам не нужны какие-либо предварительные знания в HTML или любом другом коде, просто установите этот плагин и наслаждайтесь редактированием своего меню прямо из макета. вашей панели управления блоггером.
Давайте двинемся дальше и посмотрим, как добавить виджет выпадающего меню Underscore в blogger.
Почему виджет меню важен?
Ну, меню — самая важная часть блога, оно помогает вам предоставлять ценные ссылки вашим посетителям, чтобы они могли более легко получить доступ к вашему блогу, а также помогает снизить показатель отказов и удерживает вашего посетителя надолго.
Что особенного в нашем виджете?
Само меню очень особенное, вы не можете найти никакого другого учебника или сообщения, в котором есть такой продвинутый виджет, этот виджет упрощает редактирование вашей ссылки, и вам не нужно редактировать эту чертову кучу кодов.
Начнем с шага 1 ( добавление CSS )
Перед редактированием мы рекомендуем вам сделать резервную копию вашего шаблона, чтобы что-то пошло не так, у вас по-прежнему был дизайн вашего блога в безопасности.
Первое, что вам нужно сделать, это войти в свою учетную запись Blogger и перейти в >> Шаблоны >> Редактировать HTML и выполнить поиск по тегу окончания ]]> </ b: skin> и сразу над ним вставить следующий код.
/* ######## Navigation Menu Css by sorabloggingtips.com ######################### */ .navi-menu { text-align: center; margin: 0 auto; padding: 0; width: 100%; } .nav-menu { margin: 0 auto; background: $primarycolor; } .selectnav { display:none; } .nav-menu { padding: 0; } .nav-menu ul { list-style: none; margin: 0; padding: 0; z-index: 999; } .nav-menu ul li { display: inline-block; line-height: 1; list-style: none outside none; padding: 0; text-align: left; } .nav-menu li a { background: transparent; color: #fff; display: block; font-size: 14px; padding: 14px 19px; position: relative; text-decoration: none; text-transform: uppercase; font-family: Montserrat; font-weight: 700; font-style: normal; letter-spacing: 1px; } .nav-menu li a i { margin-right: 3px; } .nav-menu li a:hover, .nav-menu li a:hover .nav-menu ul li.hasSub a:after { background:#fff; color:#000; } .nav-menu ul li li a:hover { padding-left: 20px; } .nav-menu ul li ul { width: 180px; margin: 0px; position: absolute; visibility: hidden; display: inline; padding: 0px; height: auto; border-top-width:0; background: #fff; -webkit-box-shadow: 0 1px 0 1px rgba(0,0,0,.1); box-shadow: 0 1px 0 1px rgba(0,0,0,.1); } .nav-menu ul li:hover ul { visibility: visible; } .nav-menu li li a { color: #000000; font-size: 14px; padding: 10px 15px; position: relative; text-align: left; -webkit-transition: color .15s linear 0s,padding-left .15s linear 0s; } .nav-menu li li { float: none !important; display: block; } .nav-menu a#pull { display: none; } .nav-menu ul li.hasSub a { padding-right: 25px } .nav-menu ul li.hasSub a:after { color: #fff; position: absolute; top: 15px; right: 10px; display: block; content: «\f0d7»; font-family: FontAwesome; font-weight: 400; font-size: 15px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .nav-menu ul li.hasSub ul li a:after { display: none!important }
Шаг 2 ( Добавление HTML )
Это зависит от вас, куда вы хотите добавить меню, но обычно блоггеры предпочитают добавлять его под заголовком.
Найдите в шаблоне тег <div id = «header-wrapper»> и сразу под ним вставьте следующую кодировку HTML. Если вы не можете найти <div id = «header-wrapper»> , вы можете вставить его чуть выше <div class = «row» id = «content-wrapper»> .
<div class=’navi-menu’> <b:section class=’nav-menu row’ id=’Navigation Menu’ maxwidgets=’2′ name=’Navigation Menu’ showaddelement=’no’> <b:widget id=’LinkList100′ locked=’true’ title=» type=’LinkList’ version=’1′ visible=’true’> <b:includable id=’main’> <div class=’widget-content’> <ul id=’nav’ itemscope=» itemtype=’http://schema.org/SiteNavigationElement’> <b:loop values=’data:links’ var=’link’> <li itemprop=’name’><a expr:href=’data:link.target’ itemprop=’url’><data:link.name/></a></li> </b:loop> </ul> <script type=’text/javascript’> //<![CDATA[ $(«#LinkList100″).each(function(){var e=»<ul id=’nav’><li><ul id=’sub-menu’>»;$(«#LinkList100 li»).each(function(){var t=$(this).text(),n=t.substr(0,1),r=t.substr(1);»_»==n?(n=$(this).find(«a»).attr(«href»),e+='<li><a href=»‘+n+'»>’+r+»</a></li>»):(n=$(this).find(«a»).attr(«href»),e+='</ul></li><li><a href=»‘+n+'»>’+t+»</a><ul id=’sub-menu’>»)});e+=»</ul></li></ul>»;$(this).html(e);$(«#LinkList100 ul»).each(function(){var e=$(this);if(e.html().replace(/\s| /g,»»).length==0)e.remove()});$(«#LinkList100 li»).each(function(){var e=$(this);if(e.html().replace(/\s| /g,»»).length==0)e.remove()})}); //]]> </script> </div> </b:includable> </b:widget> </b:section> </div> <div style=’clear: both;’/>
Теперь сохраните свой шаблон и откройте макет, чтобы добавить ссылки.
Примечание: — меню работает с jquery, поэтому вам необходимо установить плагин jquery, если вы его еще не установили.
Шаг-3 ( Добавление ссылок и редактирование меню ) — Важнейшее !!
Теперь это самая важная часть учебника, и вы должны делать это очень осторожно. Перейдите в панель управления blogger> Макет> щелкните ссылку «Изменить» в виджете «Главное меню».
Обычная ссылка: MenuItem Дополнительная ссылка: _MenuItem
Примечание: — пожалуйста, сначала позаботьтесь о подчеркивании, которое вы поставили, оно нацелено на скрипт, чтобы сделать раскрывающееся меню.
Заключение
Поздравляю !! Вы сделали это. теперь вы узнали, как добавить виджет выпадающего меню Underscore в blogger . Посетите свой блог и проверьте этот замечательный виджет вживую. Надеюсь, вам понравился этот урок. Если вам понравилось, поделитесь им с друзьями, мы прилагаем все усилия, чтобы разработать больше таких замечательных виджетов, пожалуйста, следите за нами.
