Ви вважаєте, що елементів навігації на вашому сайті вже й так вдосталь? Ні, їх ніколи не буде вдосталь і чим більше їх, тим краще для просування сайту в пошукових системах.
Що таке Хлібні Крихти "Breadcrumbs"?
Хлібні крихти (англ. Breadcrumbs) - це елемент навігації сайту, простіше кажучи навігаційна стежка, яка відповідає за те, щоб користувач завжди знав до якої категорії відноситься публікація, яку він переглядає.
Пошукові системи, особливо Google просто в захваті від цього елементу. Для нього навіть ввели його власну HTML мітку від schema.org, щоб пошукові боти одразу розуміли що це навігаційна стежка і цей сайт дійсно дбає про те, щоб читачам було комфортно взаємодіяти з ним.
Як встановити Хлібні Крихти в Blogger (Blogspot)
На перший погляд дана процедура може здатися складною, однак для вас все буде просто, тому що я детально розібрав процес встановлення на відео. Так шо розберемося і без 100 грам.
Щоб встановити навігаційну стежку:
- Перейдіть в панель управління Blogger
- Відкрийте розділ Тема
- В меню оберіть пункт Редагувати HTML
- Відкрийте файл з HTML кодом Хлібних крихт
- Слідуйте вказівкам у відео інструкції
Отже ви перейшли в HTML редактор, тепер відкрийте файл з HTML кодом Хлібних Крихт. Подальші інструкції дивимось в відео ролику:
Віджет Table of Content (Зміст публікації)
Даний інструмент являється важливою частиною для структуризації публікацій сайту. Ба більше, він може позитовно впливати на SEO оцінку сайту. Ще одна супер властивість TOC полягає у створенні швидких посиланнь, які відображаються в сніппеті пошукової системи Гугл.
Як встановити TOC в блог на Blogger?
- Перейдіть в панель управління Blogger, розділ Тема.
- На всякий випадок збережіть резервну копію.
- Редагувати HTML.
- Перед закриваючим тегом
</head>додайте код:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC plugin by MyBloggerTricks.com
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>
Віджет спрацьовує за наявності в тексті заголовків h2 виділено червоним, якщо використовуєте h3, то відповідно пропишіть в скрипті h3 замість h2, двічі.
]]></b:skin> і перед ним встановіть CSS код:
/*####Automatic TOC Plugin by MyBloggerTricks####*/
.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}
.mbtTOC ul {list-style:none;}
.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}
.mbtTOC a{color:#0080ff;text-decoration:none;}
.mbtTOC a:hover{text-decoration:underline; }
.mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}
.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}
<data:post.body/> може зустрічатись в шаблоні декілька раз, кожен з них замініть наступним кодом:
<div id="post-toc"><data:post.body/></div>Активація Table of content в публікаціях
Для активації TOC відкрийте потрібну вам публікацію, переключіть редактор в режим Перегляд HTML, скопіюйте даний код:<div class="mbtTOC">
<button onclick="mbtToggle()">Зміст</button>
<ol id="mbtTOC"></ol>
</div><script>mbtTOC();</script>