Създаване и водене на безплатен блог на платформата Blogger. Препоръки и съвети.

Търсене

Breaking

2019-09-09

Притурки. Бутони за придвижване нагоре и надолу по страницата

Бутони за придвижване нагоре и надолу
Здравейте, всички! Обикновено блогове на Blogger имат начална страница с поне 6 публикации, което прави страницата доста дълга. Освен това, за да направим блога по-SEO оптимизиран, често пишем доста дълги публикации. И накрая, не е рядкост, особено в силно посещаваните сайтове, публикациите да получават много коментари. Следователно читателят трябва да превърта страницата много често и дълго, за да отиде до края или да се върне в началото ѝ.



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

    Характеристика на кода

    ➤Не са нужни външни библиотеки, така че кодът е много лек и не влияе негативно на скоростта на зареждане на блога;

    ➤Ще бъде възможно да изберете цвета на бутоните, в съответствие със дизайна на нашия блог;

    ➤Въпреки че представеният код е тестван само на платформата Blogger, не изключвам, че той може да работи дори на сайтове от различни платформи, тъй като не използва конкретен маркер на платформата;

    ➤В допълнение, бутоните използват изображения, създадени със системата CSS Sprite, която ще покаже ефект на задържане, когато читателят кликне върху бутоните с курсора;

    ➤Дори няма да е необходимо да качвате изображения на бутони, за да получите техните URL, защото аз го направих и ще ви предложа готови такива;

    Инсталиране

    Бутоните изглеждат така:


    Изглед


    Можете да избирате между 5 стила на бутоните с различни URL:

    https://lh4.googleusercontent.com/-vTPaW1iFTDM/T1oYK5Cuf8I/AAAAAAAAWy0/VWLRGUAjsdw/s90/updowngraycircle96.png

    https://lh3.googleusercontent.com/-J5XTwtLUDDg/T1oX_T_PxzI/AAAAAAAAWyc/WUHB9TAhso4/s90/updownblack96.png

    https://lh3.googleusercontent.com/-qNjSpB16A3A/T1oYDPp4FII/AAAAAAAAWyk/xIQYiu0DwXs/s90/updownblue96.png

    https://lh3.googleusercontent.com/-KLYDW3tkuFo/T1oYFwblZdI/AAAAAAAAWys/efJHmdeDEIs/s90/updowngray96.png

    https://lh5.googleusercontent.com/-VK_7NBAixks/T1oYNrl4HbI/AAAAAAAAWy8/2ynTtHq2Dq4/s90/updownred96.png


    Вмъкнат по подразбиране в кода на притурката е първият URL.
    Инсталирането в Blogger е много просто:
    Отидете на Оформление ➔ Добавяне на притурка ➔ HTML / Javascript и след това в тялото на притурката, поставете този код:


    <div id="updownbutton"><script type='text/javascript'>
    //<![CDATA[
    var HIPCEI = "<style type=\"text/css\">#updownbutton .updownbutton, #updownbutton .updownbutton div{    padding:0px;    margin:0px;    border:0px;}#updownbutton .navigation_up_down{    margin:auto;    width:30px;    height:60px;    position:fixed;    bottom:80px;    right:8px; } #updownbutton .navigation_up_down .navigation_up_down_up{    margin:auto;    display:block;    width:30px;    height:30px;    cursor:pointer;    background:url(\'https://lh4.googleusercontent.com/-vTPaW1iFTDM/T1oYK5Cuf8I/AAAAAAAAWy0/VWLRGUAjsdw/s90/updowngraycircle96.png\');    background-position: 0px 0px;}#updownbutton .navigation_up_down .navigation_up_down_up:hover{    background-position: -30px 0px;}#updownbutton .navigation_up_down .navigation_up_down_up:active{    background-position: -60px 0px;}#updownbutton .navigation_up_down .navigation_up_down_down{    margin:auto;    display:block;    width:30px;    height:30px;    cursor:pointer;    background:url(\'https://lh4.googleusercontent.com/-vTPaW1iFTDM/T1oYK5Cuf8I/AAAAAAAAWy0/VWLRGUAjsdw/s90/updowngraycircle96.png\');    background-position: 0px -30px;}#updownbutton .navigation_up_down .navigation_up_down_down:hover{    background-position: -30px -30px;}#updownbutton .navigation_up_down .navigation_up_down_down:active{    background-position: -60px -30px;}</style><div class=\"navigation_up_down\">    <div class=\"navigation_up_down_up\" onclick=\"window.scrollTo(0,1);window.scrollTo(0,0);\"></div>    <div class=\"navigation_up_down_down\" onclick=\"window.scrollTo(document.body.scrollWidth,document.body.clientHeight*100000);\"></div></div>";
    document.getElementById('updownbutton').innerHTML=HIPCEI;
    //]]>
    </script></div>

    Натиснете "Запазване" без да поставяте заглавие на притурката и я позиционирайте в страничната колона.

    Настройки

    ➤Позицията на бутоните се избира чрез промяна в реда:

    bottom:80px; right:8px;

    където се задава разстоянието в пиксели от долната и дясната страна на страницата;

    ➤Можете да промените позиционирането на бутоните, като зададете разстоянието да бъде отгоре и отляво, като използвате маркерите:

    top вместо bootom и left вместо right;



    Със стойностите на тези маркери в примерния код бутоните ще се показват в долния десен ъгъл, за да бъде по-удобно на читателя, когато прочете последната част от публикацията или коментарите.


    ➤Бутоните винаги ще запазват една и съща позиция на всички страници на сайта, защото в кодът позицията им е: position:fixed;

    ➤URL адресът на изображенията на бутона трябва да бъде въведен два пъти в кода;

    Как да изберете кой от предложените 5 URL адреса да впишете в кода?


    За да прегледате предварително как изглежда съответния бутон, поставете адреса му на браузъра и натиснете Enter.


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

    За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:

    BGtop

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

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

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