Притурки. Бутони за придвижване нагоре и надолу по страницата в Blogger
.jpg)
понеделник
Здравейте, всички! Обикновено блогове на Blogger имат начална страница с поне 6 публикации, което прави страницата доста дълга. Освен това, за да направим блога по-SEO оптимизиран, често пишем доста дълги публикации. И накрая, не е рядкост, особено в силно посещаваните сайтове, публикациите да получават много коментари. Следователно читателят трябва да превърта страницата много често и дълго, за да отиде до края или да се върне в началото ѝ.
В тази публикация ще видим как е възможно да вмъкнете навигационни бутони, които могат да бъдат поставени отдясно, отляво, отдолу вляво или отдолу вдясно и които ви позволяват да се придвижвате отгоре до долу на страницата или обратно само с един клик.
➤Ще бъде възможно да изберете цвета на бутоните, в съответствие със дизайна на нашия блог;
➤Въпреки че представеният код е тестван само на платформата Blogger, не изключвам, че той може да работи дори на сайтове от различни платформи, тъй като не използва конкретен маркер на платформата;
➤В допълнение, бутоните използват изображения, създадени със системата CSS Sprite, която ще покаже ефект на задържане, когато читателят кликне върху бутоните с курсора;
➤Дори няма да е необходимо да качвате изображения на бутони, за да получите техните URL, защото аз го направих и ще ви предложа готови такива;
Можете да избирате между 5 стила на бутоните с различни URL:
Вмъкнат по подразбиране в кода на притурката е първият URL.
Инсталирането в Blogger е много просто:
Отидете на Оформление ➔ Добавяне на притурка ➔ HTML / Javascript и след това в тялото на притурката, поставете този код:
Натиснете "Запазване" без да поставяте заглавие на притурката и я позиционирайте в страничната колона.
където се задава разстоянието в пиксели от долната и дясната страна на страницата;
➤Можете да промените позиционирането на бутоните, като зададете разстоянието да бъде отгоре и отляво, като използвате маркерите:
➤Бутоните винаги ще запазват една и съща позиция на всички страници на сайта, защото в кодът позицията им е: position:fixed;
➤URL адресът на изображенията на бутона трябва да бъде въведен два пъти в кода;
Как да изберете кой от предложените 5 URL адреса да впишете в кода?
Вече имате инсталирани в блога си притурка Бутони за придвижване нагоре и надолу по страницата само с един клик.
За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!
В тази публикация ще видим как е възможно да вмъкнете навигационни бутони, които могат да бъдат поставени отдясно, отляво, отдолу вляво или отдолу вдясно и които ви позволяват да се придвижвате отгоре до долу на страницата или обратно само с един клик.
Характеристика на кода
➤Не са нужни външни библиотеки, така че кодът е много лек и не влияе негативно на скоростта на зареждане на блога;➤Ще бъде възможно да изберете цвета на бутоните, в съответствие със дизайна на нашия блог;
➤Въпреки че представеният код е тестван само на платформата 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>
//<![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.
Вече имате инсталирани в блога си притурка Бутони за придвижване нагоре и надолу по страницата само с един клик.
За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!