Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

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

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

Приставката, която ще ви предложа днес, е подходяща за всички платформи, като 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;}


    ➔И последната стъпка. Намерите в темата тага



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



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

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

    Доскоро.



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

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

    BGtop

    Няма коментари:

    Публикуване на коментар