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

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

1. Характеристика на кода
2. Инсталиране
3. Настройки

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

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

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

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

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

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

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

Инсталиране

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

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUzAYt6dsEY407-E1bMWi1rgIthk7GoDwl1ww-MR1Gj1PAFS4JfTa7EXQm3wb3nIMLIi45vXA3pU8fPEJD7mUYbMfoHZPYkqGe9xL7NSQkuMjoLzLvpvuIeYU0CeC_9WfeCAtpO1dqCUg/s90/updowngraycircle96.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiav1jcSNayqatCQebEecY9r1XIN8ew9f8p_h85NGl3cGJXZsue2DCNHmU2RlIB7CEuPmJMbVgAN3ii1Vdp0hqH6gdecI9ajtJLgFXXm4wEhIL0aKDwlX7pC5udCS2YX-xMVZRN2ahYgTY/s90/updownblack96.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLY8FadhDFQVAp9Xm-LTniaxRFkv4ZVenVHiJ-rJ6AUDIbSDTUS3iFRPdrS9VPnQFqhEyJbX81vGjZIKOJRU9S3TOOhAWRhRq-mBvth8R_O0GqhpY6gqpz47ZhDQdqQIoMaV5qcOldShU/s90/updownblue96.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0gj0-zGWvHNOsTplLDP-6LPiiNEQwTBuM3rC4rkepp5Tq3hjYVuHxGdAx9H-5cdZ3wpwdxzILK7BVSDZTweLz9Y_wsVnToqk_6ELKDHK_dtR5jc3SwzH09CbxQWAQx30WqSjyiH-wKYM/s90/updowngray96.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRAVQyPyJxIG1kNiHpI_yVms0fYhG0OK9D6qQ19vTTFQxgw6CK2RnI8i21WsgeiCCUjSmYdJW4wjxssGZ-pqygt9vYL4-wqVMD23AKh_FXf_PJtLQaXwav9JTokouwVSDmh9W2zb5ErIM/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/AVvXsEhUzAYt6dsEY407-E1bMWi1rgIthk7GoDwl1ww-MR1Gj1PAFS4JfTa7EXQm3wb3nIMLIi45vXA3pU8fPEJD7mUYbMfoHZPYkqGe9xL7NSQkuMjoLzLvpvuIeYU0CeC_9WfeCAtpO1dqCUg/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/AVvXsEhUzAYt6dsEY407-E1bMWi1rgIthk7GoDwl1ww-MR1Gj1PAFS4JfTa7EXQm3wb3nIMLIi45vXA3pU8fPEJD7mUYbMfoHZPYkqGe9xL7NSQkuMjoLzLvpvuIeYU0CeC_9WfeCAtpO1dqCUg/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.

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

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


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