Содержание статьи для Blogger
Содержание позволяет структурировать статью и помогает читателю быстрее найти нужный раздел в тексте. Особенно, это актуально для больших и информативных публикаций. Но родной функционал Blogger не предусматривает возможности его создания.
В данной статье, я расскажу о том, как самостоятельно сделать содержание внутри публикации, покажу три разных способа создания оглавления.
Содержание статьи без скрипта
Данное содержание создается вручную. Пункты меню формируются из заголовков и подзаголовков статьи.
Шаг 1. Создаем заголовок раздела, куда будет перемещаться пользователь после клика по пункту содержания.
Для этого, переключаемся в HTML режим и вставляем в нужное место следующий код:
<h2 id="soderzhanie-stati-bez-skripta">Содержание статьи без скрипта</h2>. Где:
Содержание статьи без скрипта - это заголовок раздела.
soderzhanie-stati-bez-skripta - это ссылка на раздел. Создается по принципу правильной ссылки статьи (Название раздела переводится в транслит).
Если вы хотите создавать также и подпункты (подзаголовки), можете использовать вместе с тегом h2 и тег h3.
Шаг 2. Создаем пункт содержания.
Для этого в HTML режиме редактирования статьи, помещаете на место, где хотите, чтобы располагалось оглавление, следующий код:
<a href="https://news-sawich.blogspot.com/2022/01/soderzhanie-stati-dlya-blogger.htm#soderzhanie-stati-bez-skripta">Содержание статьи без скрипта</a>. Где:
https://news-sawich.blogspot.com/2022/01/soderzhanie-stati-dlya-blogger.html - ссылка на статью, в которой создается содержание. Можно посмотреть в правом меню текстового редактора в разделе: "Постоянная ссылка"
soderzhanie-stati-bez-skripta - ссылка на раздел.
- Заголовок помещаем в поле: отображаемый текст;
- Ссылку (весь текст выделенный желтым и зеленым), вставляем в раздел: вставьте или найдите ссылку;
- Не ставим галочки на против: открывать ссылку в новом окне и добавить атрибут "rel=nofollow".
Оглавление статьи с помощью меток
Данный способ добавления оглавления похож на предыдущий, но только тут используются метки, а наличие заголовков и подзаголовков не обязательно.
Шаг 1. Добавляем метку в то место, куда должен переместится читатель после клика по разделу из содержания.
Для этого, в HTML режиме, помещаем в необходимое место следующий код:
<a href="http://www.blogger.com/blogger.g?blogID=4882734791219095058/4588841983946149485" name="soderzhanie-stati-bez-skripta"></a> Где:
4882734791219095058/4588841983946149485 - это ID статьи и блога, найти его можно в адресной строке во время создания сообщения. Смотри рисунок выше.
soderzhanie-stati-bez-skripta - метка, которую прописываете в произвольной форме и на любом языке. Но лучше, создавать по типу ссылки раздела, как в варианте выше.
Шаг 2. Создаем пункт содержания.
Для этого, по аналогии с вариантом выше, помещаем в нужное место код:
<a href="https://news-sawich.blogspot.com/2022/01/soderzhanie-stati-dlya-blogger.html#soderzhanie-stati-bez-skripta">Содержание статьи без скрипта</a>. Где:
https://news-sawich.blogspot.com/2022/01/soderzhanie-stati-dlya-blogger.html - это ссылка на статью;
soderzhanie-stati-bez-skripta - метка;
Содержание статьи без скрипта - заголовок пункта содержания.
Также, пункт меню можно вставить с помощью добавления ссылки, поместив заголовок и ссылку в соответствующее место.
После формирования полного списка оглавления, пункты можно пронумеровать, переместить вправо-влево и пр.
Автоматическое содержание статьи с помощью скрипта
При помощи данного скрипта, содержание формируется автоматически на основе заголовков, заключенных в тег h2. Поэтому, чтобы работало данное оглавление, в статье обязательно должны быть заголовки.
Установка скрипта в блог
Что бы установить данный скрипт на свой сайт Blogger, необходимо в редакторе шаблонов найти строку: </head>. И над ней вставить код:
<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[
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>
После этого, найти код: ]]></b:skin>. И выше него вставить:
.mbtTOC{border:1px solid #2A95F4;box-shadow:1px 1px 0 #fff;background-color: #fff;color:#1A422A;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:#118D43; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color: #fff;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>.
Активация скрипта в статье
Чтобы скрипт автоматического оглавления сработал, необходимо переключиться в HTML режим и поставить на место будущего содержания, следующий код:
А в конец сообщения поместить: <script>mbtTOC();</script>.
Итак, подведем итоги: сегодня рассмотрели три варианта добавления оглавления в блог на Blogger. Каждый из них имеет свои плюсы и минусы. И какой использовать, решать только вам.
Комментарии