В тази публикация ще видим как е възможно да вмъкнете навигационни бутони, които могат да бъдат поставени отдясно, отляво, отдолу вляво или отдолу вдясно и които ви позволяват да се придвижвате отгоре до долу на страницата или обратно само с един клик.
Характеристика на кода
➤Не са нужни външни библиотеки, така че кодът е много лек и не влияе негативно на скоростта на зареждане на блога;➤Ще бъде възможно да изберете цвета на бутоните, в съответствие със дизайна на нашия блог;
➤Въпреки че представеният код е тестван само на платформата 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguNt3_nuTvvCwkUxdKDHz5cIjZqoKV-MuFNGYkKqq8WCDKo9fkRzFHuepcF2eyboJ9QVMZ1PIsYW6ydXPwI1MN1uTdo-WZUm5z1vCPo4HOjTP7vZ8VWPRSHuX7coo54FEwUki8hxlIEuc/s90/updownblack96.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfOFM3xFGM5YG8Kh5u7L76hTHXSk2RfLrHAChX0ST-KbvyLi1JVosIOA3vKdHb63m5OvTXj70Z0KJajtgsQnZOZ5B10SZm5v1SBmyG7QBErKigFTM1P7wUQAeHRgo3i8d2Mz9mB7A8wi0/s90/updownblue96.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc97CJ7ltb3BFdQycAmEUZwjUMFCueCFLVNWEN7vw3blnGslIWRSqgKvCKPS7LjYQqHogRmGPvDHXKIvqo8CUG-HquUH9NdCepryy4Ei-y-6WCkS3yIEAvl3lvD2jmLmo0HoVfT5v9tjA/s90/updowngray96.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq27iJ4A3L7LtdI1NYiD3A1dbNM-a5KhNJjzbrmb11a96OaOc_UjyM4Bjd1zgeTZwrx4AP5IpA1LKdUzJsa32DRjzPy-RIkMAVHcFYz3Vomp7DNmiFW4NCSgK-d8aFaVcjdsXsnR_itB0/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>
//<![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.
Вече имате инсталирани в блога си притурка Бутони за придвижване нагоре и надолу по страницата само с един клик.
За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Няма коментари:
Публикуване на коментар