Приставка за съдържание на публикация

Здравейте приятели. Дълго време в blogzablogove.com не съм споделяла с вас нещо полезно и интересно, което би могло да помогне за популяризиране на блога в търсачките. Днес ще коригирам това. Колебаех се кой термин да използвам: добавка, приставка, плъгин, уиджет или притурка. Но се надявам, че който от тях да използвам ще разберете за какво става дума.

Приставката, която ще ви предложа днес, е подходяща за всички платформи, като Blogger, WordPress, Joomla и други.

1. Встъпление
2. Приставка Съдържание
3. Как работи приставката Table of Contants
4. Особености на приставката за показване на съдържанието на публикация
5. Как да инсталирате приставката за съдържание в блог на Blogger
6. Активиране на приставката за съдържание в публикации

Встъпление

Мисля, че всеки от вас посещава сайта на Уикипедия. На пръв поглед нищо необичайно, сайт на енциклопедията и това е всичко. Вярно е, че това е обикновен сайт, но в неговите публикации има приставка, която показва структурата им по раздели. По този начин се помага на читателя да разбере по-добре какви са те и да избере желания раздел. Тази приставка се нарича ToC - Table of Contents, таблица със съдържание или просто съдържание. Като цяло, тази приставка има за цел преди основната част на текста да бъдат показани основните му раздели и като кликнете върху заглавието на желания раздел, браузърът незабавно да ви го показва. Можете да видите демонстрация на тази приставка на страницата на днешната ми публикация.

Такава организация на публикация в блога е много полезна за нейното популяризиране в търсачките. Поради което не бива да пропускате възможността да оформяте публикациите си с нейна помощ.

Приставка Съдържание

Приставката, която ви предлагам да инсталирате е автоматично решение, което ще ви помогне да забравите за досадния, изискващ време и трудоемък процес на изготвяне на съдържанието на една дълга публикация. Тя автоматично създава удобна таблица на съдържанието на публикацията и то светкавично. Тя е създадена чрез чист код JavaScript и за нейната работа не изисква свързване към библиотеката Jquery. Което от своя страна позволява тя да се зареди по-бързо и разбира се, всичко това се индексира от търсещите роботи.

Доказателството, че това е наистина важно за търсачките може да се разбере от факта, че след индексирането на публикацията в снипета, фрагмента, се появява етикет с надпис "Назад към четене" с препратка към заглавието на най-важния раздел в публикацията по мнение на робота.

Как работи приставката Table of Contants

Приставкага ще включва в съдържанието на публикацията само тези заглавки в нея, които са затворени в тага h2, а не както в Уикипедия. Знаем, че уики е огромна енциклопедия и едва ли някой в Blogger иска да направи нещо подобно. Затова за по-голяма простота и удобство е по-добре да подчертаем най-важните заглавия. Повтарям, заглавия, а не подзаглавия.
Добавянето на приставката за съдържание е най-подходящо за дълга публикация, в която има най-малко четири заглавки с таг h2.

Особености на приставката за показване на съдържанието на публикация

Сега ще изброим нейните особености

◾Създадена е в чист JavaScript и то само в десетина реда;
◾Лека и бърза;
◾SEO настроена;
◾Добавя уникален идентификатор за всеки раздел на публикацията;
◾Създава подреден списък;
◾Активира бутона за показване на съдържанието (скриване или показване);
◾Показва избраната секция;
◾Лесна за инсталиране;
◾Адаптивна;

Как да инсталирате приставката за съдържание в блог на Blogger

Приятели, както споменах по-горе, приставката е подходяща не само за Blogger, но и за сайтове на други платформи. Но ще ви покажа как да инсталирате приставката точно в Blogger.

Отидете в контролния панел ➔ после в раздел ➔"Тема" ➔ направете нейно резервно копие за всеки случай ➔ кликнете върху бутона за Промяна на HTML ➔ преди затварящия маркер
</ 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[

//*************TOC plugin by Blogzablogove.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>

Ако някой от вас е забравил как се търси даден фрагмент в HTML кода на темата, припомнете си.

➔Намерете в кода на темата реда ]]></b:skin>и пред него добавете кода:

/*####Automatic TOC Plugin by Blogzablogove####*/

.mbtTOC{border:5px solid #BFCFFE;box-shadow:1px 1px 0 #BFCFFE;background-color:# BFCFFE;color:#BFCFFE;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:#BFCFFE;text-decoration:none;}

.mbtTOC a:hover{text-decoration:underline; }

.mbtTOC button{background:#BFCFFE; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:# BFCFFE;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 и поставете следния код:

<div class="mbtTOC">

<button onclick="mbtToggle()">Съдържание</button>

<ol id="mbtTOC"></ol>

</div>

◾Активиране на приставката

За да заработи приставката и за да се изобрази съдържанието на публикацията е необходимо в самия ѝ край да добавите кода

<script>mbtTOC();</script>

Сега публикувайте и се порадвайте на резултата.

Въпроси във връзка с инсталирането и настройките на приставката за съдържание на публикация очаквам в коментари.

Доскоро.



Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: