Содержание статьи в виде списка в Blogger

Содержание

• Заголовок статьи 1
• Заголовок статьи 2
• Заголовок статьи 3 
• Подзаголовок заголовка 3

• Заголовок статьи 4

 

Заголовок статьи 1

текст заголовка статьи 1

Заголовок статьи 2  

текст заголовка статьи 2

Приступим к реализации создания содержания

Переходим в режим HTML, находим Заголовок статьи 1 где начинается текст, добавляем id="1"

Снова переходим в режим вёрстки, добавляем ссылку #1

Обновляем страницу, проверяем, всё должно работать. 

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

С помощью виджета Table of Contents

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

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

Начнём!

1. Перед закрывающим тегом</head>добавим следующий код:

HTML<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
        

<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>

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

  5. Следующим делом найдите в шаблоне тег:]]></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;}
     

6. И наконец последний шаг. Найдите тег

<data:post.body/>

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

<div id="post-toc"><data:post.body/></div>

7. Сохраните шаблон.

Активация виджета

Каждый раз когда нужно будет добавить виджет содержание статьи для определенного поста следуйте этим указаниям.

1) Расположение виджета в посте.

Лучше всего добавлять виджет после первого абзаца статьи. Для этого в редакторе сообщения переключитесь на вкладку HTML и вставьте следующий код:

<div class="mbtTOC"> <button onclick="mbtToggle()">Содержание</button> <ol id="mbtTOC"></ol> </div>

2) Активация плагина.
Чтобы плагин заработал и начал отображаться в статье, нужно на той же вкладке HTML в самом конце статьи добавить код:

<script>mbtTOC();</script>

Пробуем создать статью!