Приставката, която ще ви предложа днес, е подходяща за всички платформи, като Blogger, WordPress, Joomla и други.
Встъпление
Мисля, че всеки от вас посещава сайта на Уикипедия. На пръв поглед нищо необичайно, сайт на енциклопедията и това е всичко. Вярно е, че това е обикновен сайт, но в неговите публикации има приставка, която показва структурата им по раздели. По този начин се помага на читателя да разбере по-добре какви са те и да избере желания раздел. Тази приставка се нарича 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;}
➔И последната стъпка. Намерите в темата тага
<div id="post-toc"><data:post.body/></div>
Активиране на приставката за съдържание в публикации
Всеки път, когато искате да добавите приставката за съдържание във ваша публикация, следвайте тези инструкции.
◾Местоположение на приспособлението в публикацията.
Най-добре е да добавите приставката в тялото на публикацията след нейния първи абзац. За да направите това, след написване на публикация в редактора преминете към раздел HTML и поставете следния код:
<div class="mbtTOC">
<button onclick="mbtToggle()">Съдържание</button>
<ol id="mbtTOC"></ol>
</div>
За да заработи приставката и за да се изобрази съдържанието на публикацията е необходимо в самия ѝ край да добавите кода
<script>mbtTOC();</script>
Доскоро.
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Няма коментари:
Публикуване на коментар