Jak zrobić górne menu (zakładki, karty) na blogu blogger?

    Zaktualizowano: 2023-09-08T10:12:02Z
Jak zrobić górne menu (zakładki, karty) na blogu blogger?

Menu główne pełni prawdopodobnie najważniejszą rolę, jaką jest kierowanie użytkowników do niezbędnych stron bloga

Dzięki temu elementowi możesz znacznie ułatwić użytkownikom dostęp do swoich postów. To jest to, na co wyszukiwarki przede wszystkim zwracają uwagę podczas oceny zasobów. Nikt nie lubi stron o skomplikowanej i niezrozumiałej strukturze.


Jak zainstalować menu główne na swoim blogu

Głównym problemem jest to, że różne motywy Bloggera mają różne znaczniki HTML, więc dość trudno jest znaleźć jedną działającą opcję dla wszystkich motywów. Jednak pomimo tego udało mi się znaleźć właściwą opcję. 

Głównymi właściwościami tego menu jest to, że jest ono responsywne, tzn. dostosowuje się do urządzeń mobilnych, a także ma możliwość konfigurowania dodatkowych (rozwijanych) przycisków.

Skorzystaj z instrukcji HTML i wideo, aby prawidłowo zainstalować menu na swoim blogu:

  1. W panelu sterowania przejdź do sekcji Motyw - Edytuj kod HTML.
  2. Naciśnij CTRL+F na klawiaturze.
  3. W wyświetlonym polu wyszukiwania wpisz </body> więc naciśnij Enter.
  4. Dodaj kod przed tagiem </body>:

<div class='nav_wrapper'>
<!--<a class="menu-link" href="#menu"></a>-->
  
 <div class='spinner-master'>
  <input id='spinner-form' type='checkbox'/>
  <label class='spinner-spin' for='spinner-form'>
    <div class='spinner diagonal part-1'/>
    <div class='spinner horizontal'/>
    <div class='spinner diagonal part-2'/>
  </label>
</div>
  
<a class='btn' href='#search_box' id='search'>&#9740;</a>
<nav class='menu' id='menu'>
 <ul class='dropdown'>
  <li><a href='#Link' title='Link'>Home</a></li>
  <li><a href='#Link' title='Link'>Category</a>
  <ul>
   <li><a href='#Link' title='Link '>Link</a></li>
   <li><a href='#Link' title='Link'>Link</a></li>
  </ul>
  </li>
  <li><a href='#Link' title='Link'>Portfolio</a>
   <ul>
    <li><a href='#Link' title='Link'>Link</a></li>
    <li><a href='#Link' title='Link'>Link</a></li>
    <li><a href='#Link' title='Link'>Link</a></li>
   </ul>
  </li>
  <li><a href='#Link' title='Link'>Work</a>
  <ul>
   <li><a href='#Link' title='Link'>Link</a></li>
   <li><a href='#Link' title='Link'>Link</a></li>
   <li><a href='#Link' title='Link'>Link</a></li>
   <li><a href='#Link' title=' Link'> Link</a></li>
  </ul>
  </li>
  <li><a href='#Link' title='Link'>Playground</a>
   <ul>
    <li><a href='#Link' title='Link'>Link  </a></li>
    <li><a href='#Link' title='Link'>Link</a></li>
    <li><a href='#Link' title='Link'>Link</a></li>
   </ul>
  </li>
  <li><a href='#Link' title='Link'>Sitemap</a></li>
 </ul>
 </nav>
<form action='/search/' class='search_box' id='search_box'>
  <input name='search_criteria' placeholder='Поиск' type='text' value=''/>
  <input class='search_icon' type='submit' value='Поиск'/>
</form>
</div>

<style>
.centered-top-container.sticky {position: absolute;}
.centered-top-container {top: 20px;
    position: relative;}
nav { width: 100%; } .nav_wrapper { position: fixed; left: 0; top: 0; width: 100%; transition: top .5s ease-out; background: #2f3b3f;z-index:9999999 } .scroll { top: -90px; } .no-scroll { top: 0; z-index: 9999; } .btn { padding: 10px 1%; margin: 5px; color: #fff; text-decoration: none; font-family: sans-serif; transition: all 0.1s ease; } .btn:hover { transition: all 0.1s ease; } #search { float: right; font-size: 30px; padding: 2px 15px; line-height: 40px; color: #fff; margin: 0; font-weight: 700; -webkit-transform: rotate(181deg); -moz-transform: rotate(181deg); -ms-transform: rotate(181deg); -o-transform: rotate(181deg); transform: rotate(181deg); } #search:hover { color: #25a186; } .search_box { clear: both; width: 100%; background: #e8ebf0; padding: 0; margin: 0; height: 0; overflow: hidden; transition: all 0.1s ease-in-out; } .search_box.active { height: auto; padding: 15px 0; } .search_box input { width: 80%; font-size: 13px; margin: 0 0 0 15px; padding: 10px; border: none; background: #fff; } .search_box input:focus { outline: none; } .search_box input.search_icon { clear: both; width: 10%; height: auto; padding: 10px; margin: 0; margin-left: -5px; border: none; color: #fff; cursor: pointer; background: #8c949d; opacity: 1; transition: all 0.1s ease; } .search_box input.search_icon:hover { background: #25a186; } .menu-link { display: none; } .spinner-master input[type=checkbox] { display: none; } .menu { width: 100%; height: auto; background: #2f3b3f; transition: all 0.3s ease; } .menu ul { padding: 0px; margin: 0px; list-style: none; position: relative; display: inline-block; } .menu &gt; li &gt; ul.sub_menu { min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #fff; } .menu ul li { padding: 0px; } .menu &gt; ul &gt; li { display: inline-block; } .menu ul li a { display: block; text-decoration: none; color: #fff; font-size: 14px; } .menu ul li a:hover { background: #25a186; color: #fff; } .menu ul li.hover &gt; a { background: #25a186; color: #fff; } .menu ul li &gt; a { padding: 15px; } .menu ul ul { display: none; position: absolute; top: 100%; min-width: 160px; background: #39484d; } .menu ul li:hover &gt; ul { display: block; } .menu ul ul &gt; li { position: relative; } .menu ul ul &gt; li a { padding: 10px 15px; height: auto; background: #39484d; } .menu ul ul &gt; li a:hover { background: #25a186; color: #fff; } .menu ul ul ul { position: absolute; left: 100%; top: 0; } @media all and (max-width: 768px) { .example-header .container { width: 100%; } #search { padding: 10px; } .spinner-master * { transition: all 0.3s; box-sizing: border-box; } .spinner-master { position: relative; margin: 15px; height: 30px; width: 30px; float: left; } .spinner-master label { cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 5px; left: 0; } .spinner-master .spinner { position: absolute; height: 4px; width: 100%; padding: 0; background-color: #fff; } .spinner-master .diagonal.part-1 { position: relative; float: left; } .spinner-master .horizontal { position: relative; float: left; margin-top: 4px; } .spinner-master .diagonal.part-2 { position: relative; float: left; margin-top: 4px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .horizontal { opacity: 0; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .diagonal.part-1 { transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-top: 10px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .diagonal.part-2 { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-top: -12px; } a.menu-link { display: block; color: #fff; float: left; text-decoration: none; padding: 10px 16px; font-size: 1.5em; } a.menu-link:hover { color: #25a186; } a.menu-link:after { content: &quot;\2630&quot;; font-weight: normal; } a.menu-link.active:after { content: &quot;\2715&quot;; } .menu { clear: both; min-width: inherit; float: none; } .menu, .menu &gt; ul ul { overflow: hidden; max-height: 0; background-color: #39484d; } .menu &gt; li &gt; ul.sub-menu { padding: 0px; border: none; } .menu.active, .menu &gt; ul ul.active { max-height: 55em; } .menu ul { display: inline; } .menu li, .menu &gt; ul &gt; li { display: block; } .menu &gt; ul &gt; li:last-of-type a { border: none; } .menu li a { color: #fff; display: block; padding: 0.8em; position: relative; } .menu li.has-submenu &gt; a:after { content: &#39;+&#39;; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0.55em 0.5em; } .menu li.has-submenu &gt; a.active:after { content: &quot;-&quot;; } .menu ul ul &gt; li a { background-color: #39484d; padding: 10px 18px 10px 30px; } .menu ul li a:hover { background: #4b5f65; color: #fff; } .menu ul li.hover &gt; a { background: #4b5f65; color: #fff; } .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top: auto; border: none; } .search_box { position: absolute; top: 60px; left: 0; z-index: 10; } .search_box input { width: 70%; } .search_box input.search_icon { width: 17%; }; }
</style>
<script type='text/javascript'>
$(&quot;ul li:has(ul)&quot;).addClass(&quot;has-submenu&quot;);$(&quot;ul li ul&quot;).addClass(&quot;sub-menu&quot;);$(&quot;ul.dropdown li&quot;).hover(function(){$(this).addClass(&quot;hover&quot;)},function(){$(this).removeClass(&quot;hover&quot;)});var $menu=$(&quot;#menu&quot;),$menulink=$(&quot;#spinner-form&quot;),$search=$(&quot;#search&quot;),$search_box=$(&quot;.search_box&quot;),$menuTrigger=$(&quot;.has-submenu &gt; a&quot;);$menulink.click(function(e){$menulink.toggleClass(&quot;active&quot;);$menu.toggleClass(&quot;active&quot;);if($search.hasClass(&quot;active&quot;)){$(&quot;.menu.active&quot;).css(&quot;padding-top&quot;,&quot;50px&quot;)}});$search.click(function(e){e.preventDefault();$search_box.toggleClass(&quot;active&quot;)});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass(&quot;active&quot;).next(&quot;ul&quot;).toggleClass(&quot;active&quot;)});$(&quot;ul li:has(ul)&quot;);$(function(){var e=$(document).scrollTop();var t=$(&quot;.nav_wrapper&quot;).outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()&gt;=50){$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}else{$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}if(n&gt;t){$(&quot;.nav_wrapper&quot;).addClass(&quot;scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).removeClass(&quot;scroll&quot;)}if(n&gt;e){$(&quot;.nav_wrapper&quot;).removeClass(&quot;no-scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).addClass(&quot;no-scroll&quot;)}e=$(document).scrollTop()})})
</script>
Zastąp #Link własnymi linkami

Zapisz ustawienia i przetestuj menu.

Jeśli menu nie działa w wersji mobilnej, dodaj następujący kod przed znacznikiem </head>:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
Na razie to wszystko, jeśli masz jakieś pytania, zadaj je w komentarzach

Udostępnij szablon

Facebook X (Twitter) Google

Administrator:

Cześć, nazywam się Kuba. W ciągu ostatnich pięciu lat z powodzeniem pracowałem z szablonami i motywami dla Bloggera. Z tego powodu chcę podzielić się z tobą moim doświadczeniem..

Nowe publikacje

Śledź nas na facebooku