Подчеркивание, самый продвинутый виджет меню в Blogger

Сегодняшняя тема посвящена тому, как добавить виджет выпадающего меню 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 . Посетите свой блог и проверьте этот замечательный виджет вживую. Надеюсь, вам понравился этот урок. Если вам понравилось, поделитесь им с друзьями, мы прилагаем все усилия, чтобы разработать больше таких замечательных виджетов, пожалуйста, следите за нами.

Cancel