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

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

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

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

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

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

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

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

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

Инсталиране

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

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIjZ-U_RfhxleI1BwdZHYJAxTeMOSWVlTEZaSyp5fqLWDY2aU12ee2DbEX5cD4ONlABD8rlgzw_jlD7NAhJRgFH2W-2qQTV6mrH1EOyMD-TQr-J2tqZHBPXj_ZAKTLNNIRJz5k9pm2Nhg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc97CJ7ltb3BFdQycAmEUZwjUMFCueCFLVNWEN7vw3blnGslIWRSqgKvCKPS7LjYQqHogRmGPvDHXKIvqo8CUG-HquUH9NdCepryy4Ei-y-6WCkS3yIEAvl3lvD2jmLmo0HoVfT5v9tjA/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIjZ-U_RfhxleI1BwdZHYJAxTeMOSWVlTEZaSyp5fqLWDY2aU12ee2DbEX5cD4ONlABD8rlgzw_jlD7NAhJRgFH2W-2qQTV6mrH1EOyMD-TQr-J2tqZHBPXj_ZAKTLNNIRJz5k9pm2Nhg/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIjZ-U_RfhxleI1BwdZHYJAxTeMOSWVlTEZaSyp5fqLWDY2aU12ee2DbEX5cD4ONlABD8rlgzw_jlD7NAhJRgFH2W-2qQTV6mrH1EOyMD-TQr-J2tqZHBPXj_ZAKTLNNIRJz5k9pm2Nhg/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.

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

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


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